Xcode Assets (*.xcassets)

When Xcode 5 was released, users noticed new projects included a file called “Images.xcassets.” Despite how it appears in the project navigator, this is not a single flat file.  Rather, it’s a resource bundle – known as an “asset catalog” – that may contain one or more sets of images, along with a JSON descriptor file. The purpose of an asset catalog is to manage the varying sizes of icons, launch screens, and other images required to support multiple iOS devices.  In addition to providing image management, an asset catalog is compiled into a smaller file (for iOS 7 and greater) compared to the total size individual image files would produce.

(译文:当Xcode 5发布时,用户注意到新的工程包含了一个叫做 “Images.xcassets.” 的文件夹。不管它在工程导航视图中看起来是什么,它不是一个单独的单调的文件夹。反而,它是一个资源集---被称为一个 “asset catalog”---它可能包含一个或更多图像集合,还有一个JSON描述文件。一个 资源分类的目的是管理各种尺寸的图标,启动图和其他需要支持多种iOS设备的图片。除了提供图片管理功能,相对于单独的图片文件编译总的大小,asset catalog 可以被编译成更小的文件(在iOS7及以上系统)。

CONFIGURING IMAGES.XCASSETS

(译文:配置 IMAGES.XCASSETS)

The images.xcassets catalog is the default asset, used to manage the required app icons and launch images.  Let’s start by configuring the app icons.

(译文:images.xcassets catalog 是默认的集合,用来管理必须的APP图标和启动图。让我们从配置APP图标开始

  1. Select “images.xcassets” from the project navigator.
  2. (译文:从工程导航中选择 “images.xcassets”

  3. assets-projectexplorer 

  4. The editor panel is divided into two sections: a set list on the left and a set viewer on the right.  Select “AppIcon” from the set list.
  5. (译文:编辑板被分为2个部分:左边是集合列表,右边是集合视图。从集合类表中选择 “AppIcon” 

  6. assets-setlist 

  7. Make sure the utilities panel is displayed and select the attributes inspector.  This allows you to choose which device types you intend to support.  The “IOS icon is pre-rendered” option is used to prevent devices running iOS 6 or earlier from adding the gloss/glare overlay to your app’s icon in the Springboard (Home Screen).
  8. (译文: 确保 设施板显示出来且选择 属性检查 这一项。这个允许你选择你要支持哪种设置型号。“IOS icon is pre-rendered”这个选项用来在Springboard,防止在iOS6或者更早的系统上跑时加载 掩饰/闪光 覆盖视图到你的APP图标上。

  9. assets-appicon-attr 

  10. With your devices now selected, the required app icons are displayed in the set viewer.  Drag and drop icons from your Mac’s Finder into each image holder.  You do not have to follow any particular naming convention, though many still use the image.png & image@2x.png convention.  The “pt” size listed below each item can be used to determine the proper size of each image.  For example, a 1x (non-retina), 76 pt icon should be 76 x 76 pixels.  If the icon says “2x (retina)” it should be twice the pt size specified (e.g. 2x, 76 pt icon should be 152 x 152 pixels).

  11. (现在,你的设备选择好了,需要的APP图标展示在集合视图中。从你的Mac 的 finder中 拖拽图标到每个图像持有处。你不必遵守任何特殊的命名惯例,尽管很多人使用  image.png  和  image@2x.png 这个惯例。“pt” 大小被列出在了每个项的下面,可以用来决定每个图像合适的尺寸。比如,一个 1x(非视网膜), 76 pt 的图标应该是 76 x 76 像素。如果这个图标说 2x(视网膜),它应该是原来大小的2倍(比如, 2x, 76 pt 图标 应该是 152 x 152 像素)。


  12. assets-appicon-list

Launch images are configured in a similar manner to app icons.  The primary difference between the two is that the dimensions aren’t listed under each launch image – just 1x (non-retina), 2x (retina), and R4 (4″ retina).  You can find dimensions for each device listed in the iOS Human Interface Guidelines.

译文:启动图设置时和APP图标类似。最大的不同是维度大小没有在每个启动图下面被列出来---只有1x (非视网膜), 2x (视网膜), 和R4 (4″ 视网膜) 。你可以找到每个设置上的维度在 iOS Human Interface Guidelines. 上列出来。

CONFIGURING CUSTOM APP IMAGES

译文:配置自定义的APP图片

Asset catalogs may be used to manage any image that is used in your application.  Remember, a catalog may contain one or more sets of images.  Each set is a single image in different sizes.  I like to create one catalog, with multiple sets, per scene.  I’ll also create separate catalogs for icons that are shared amongst multiple scenes.  To create an additional catalog, follow these steps:

译文:Asset catalogs可以用来管理任何在你的应用中用到的图片。记住,一个分类可以包含一个或者多个图像集合。每个集合是一个独立的不同尺寸的图像。我更倾向于创建一个分类,每个场景包含不同的集合。我也会为多个场景共用的图标创建一个单的 catalogs。创建一个附加的分类,照下面的步骤做:

  1. Create a new file (⌘N) and select the Asset Catalog template in the iOS – Resource panel.
  2. 译文:在 iOS – Resource 面板 创建一个新的文件且选择 Asset Catalog  模板。

  3. assets-newcatalog 

  4. Choose a name, select the targets that should include the catalog, and click “Create.”
  5. 译文:选择一个名字,选择包含这个分类的目标,并点击 “Create.”

  6. assets-newcatalog-save 

  7. Select the new *.xcassets file in the project explorer.  This causes the editor to display the set list and set viewer.
  8. 译文:在工程探测视图中选择这个新的 *.xcassets文件。这样可以使编辑器展示这个集合列表和视图。

  9. assets-newcatalog-pe 

  10. Click the “+” button at the bottom of the set list, and select “New Image Set.”
  11. 译文:点击 集合列表 底部的“+”按钮,并选择 “New Image Set.” 

  12. assets-logo3 

  13. By default, a set is created with the name “Image” – this name may be changed in the attributes inspector.  Also by default, the set viewer displays slots for 1x & 2x “Universal” images.  This may also be changed in the attributes inspector to use “Device Specific” images.
  14. 译文:默认情况下,这个集合创建时叫做 “Image”---这个名字可以在 attributes inspector 中被改变。也是在默认情况下,集合视图展示1x & 2x “Universal” 图像槽。这个也可以在attributes inspector中用  “Device Specific” 图像改变。

  15. assets-logo 

  16. Drag your images into the set viewer.
  17. (译文:把你的图像拖动到集合视图中。)

  18. assets-logo2 

  19. To add the image in Interface Builder, add an ImageView to your scene, and select the name of the set in the attributes inspector.
  20. 译文:为了把图像添加到Interface Builder中,在你的场景中添加一个  ImageView 控件,并选择在attributes inspector中的集合名字。 

  21. assets-logo-ib 

  22. To programmatically create the image, simply refer to the set name.
  23. 译文:用代码创建这个图像,仅仅引用这个集合的名字。

Now your app will automatically choose the appropriate images for each device you’ve chosen to support!  In a future post, I’ll explain how to use the “Slicing” feature of the asset catalog.

译文:现在你的APP可以为每个你选择的设备自动选择合适的图像来支持!在将来发布的文章中,我会解释怎样使用 asset catalog 的“Slicing” 特性



Read more: http://www.intertech.com/Blog/xcode-assets-xcassets/#ixzz4FUIjNpDF 
Follow us: @IntertechInc on Twitter | Intertech on Facebook

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值