[iOS-Practice] 图片资源的管理

iOS 及 Android 应用开发中，怎样命名和管理切图资源最科学？
iOS 切图文件命名规范

移动应用作为面向用户的客户端，展示内容的界面需要大量的图片资源，在 iOS 开发中，如果对图片资源有规范的命名和清晰的分类管理，可以使开发人员更方便的使用和提高开发效率。

图片格式

PNG VS JPG

开发中主流使用的格式主要是 .png 和 .jpg 两种，.png 相对于 .jpg 的优点是，解压缩效率高，对 CPU 消耗小，而且是无损压缩，苹果公司推荐使用的格式也是 .png。而且 Asset Catalog 仅支持 .png 格式，如果项目中有 .jpg 格式的资源，则不能放入其中，需要再单独建立普通文件夹存放。

PDF

如果你的项目支持 PDF 矢量图，那么就无需像位图那样管理很多适配的图片资源了，每一种图片，只需要向 Asset Catalog 导入一张矢量图即可，Xcode 会在编译时将其转化为需要的位图，如1倍图到3倍图等。

图片命名规范

最基本的原则是，文件名应该只描述图片的用途，而不描述图片的样式，所以名字中不应出现对颜色，样式等描述的单词。一种规范的格式是：

module_identifier_type_state

• module，代表的是功能模块，大部分的图片是对应着不同的界面，即对应了不同的功能模块，包括登录和启动界面也应作为一个单独的模块。对于一些在很多界面中通用的资源，可以放在 common 模块中。针对 iOS 开发来说，一般会将 TabBar 上用到的资源单独的抽出为 tab 模块。把 module 放在第一位的好处是相对于 type(btn，icon等) 更利于检索。可以把 module 理解为命名空间（namespace）的作用。
• identifier，主要作用就是用来描述图片的用途，如一个用于设置按钮的图片，这一部分就可以写为 setting。当一个单词无法准确描述用途时，也可用多个单词由 _ 分隔。
• type，说明图片的类型，额外提供了一些图片的信息，一般可以分为背景(bg)，图标(icon)，图片(img)，按钮(btn)等。当然除了按钮(btn)外也可以设置一些其他控件，如输入框，可以写为 input 或 tf。
• state，例如一个按钮的不同状态要对应不同的图片，在描述符相同的情况下，就可以用 state 来区分，可以是 normal，highlighted，selected，disabled 等。如果你的图片命名中用到了颜色，看看是否可以用 state 来取代那种通过样式来区别命名的方式。

除了上述主要内容外，还有一些其他的基本要求：

• 命名使用英文并且全小写，不使用拼音。
• 单词间用 _ 分隔而不是其他符号。

分组管理

可以按照 module 来建立目录对图片资源进行分组管理。其实这里分目录并不与图片名以 module 开头功能重复，分目录的作用是，当项目中的图片越来越多时，可以对整个图片文件列表有清晰方便的管理。而在使用图片时，则可以通过图片名中的 module 来高效的索引和清楚的指明。·

Asset Catalog

Asset Catalog Help
Asset Catalog Format Reference

Asset Catalog 是从 iOS7 开始引入的一种更方便的管理应用内资源的机制，非常适合用来管理应用内的图片资源。Asset Catalog 提供对图片和通用类型数据的管理，图片数据要求必须是 .png 格式，而对于通用类型的数据，可以是除了二进制可执行文件以外的任何类型。使用 Asset Catalog 另一个好处是，它能帮助我们实现 APP 瘦身（APP Thinning），Asset Catalog 能为不同的平台、不同设备甚至相同类型的设备但是不同的配置（比如内存大小等）提供定制化的资源供给解决方案，当用户下载应用时，只有该用户的设备需要的资源才会被下载下来，这样就减小了用户下载的包的大小。

Asset Catalog 的使用非常简单，选中文件后，Xcode 提供了一个方便的操作区，左侧是所有资源项的列表，在列表底部可以新建，删资源项，当然也直接将图片拖入列表建立资源项。中间显示了该资源项内的所有适配的资源文件，右侧是资源项的属性检查器。而在编程时，使用的就是资源项的名称。

Asset Catalog 本质上就是通过目录来管理资源，其本身是一个 . xcassets 后缀的目录，目录内包含了所有的资源项，例如可能是一个 Image Set 或 Data Set，也有可能是 App Icons 或 Launch Images，它们都是后缀为 .imageset，.launchimage 或 .appiconset 的目录。从命名(Set，Icons，Images)中也可以看出每一项都代表了一个资源集合，当然要用目录来管理。资源项目录里存放的是某一资源针对不同设备，Size Classes，内存，分辨率等而定制的不同版本的文件。.xcassets 目录内还有一种没有后缀的普通目录对应的就是 Asset Catalog 中的 Folder，用来对资源项进行分组管理。

而要让程序可以正确找到不同版本的文件，Xcode 会自动在资源项目录里创建一个特殊的配置文件 Contents.json，在这个文件中记录了该资源的不同版本的文件对应的设备选项，以供程序可以选择正确的图片资源用于显示。文件内容类似如下形式：

{
  "images" : [
    {
      "idiom" : "universal",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "scale" : "3x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

所以 Asset Catalog 里的每一个资源项(即文件资源的集合目录)应按照图片的命名规范来命名，因为最终在代码和 Interface Builder 里我们直接引用的都是 Asset Catalog 里的资源项。而最终具体使用哪一个版本的资源文件就是系统根据配置文件 Contents.json 来决定了。这样看来，其实具体的图片文件的命名相对来说就不是很重要了，当我们将图片文件通过 Xcode 在 .xcassets 文件里的不同选项间拖动时，就是在改变 Contents.json 文件里的映射记录，而这些映射都是供系统查找用的。但为了文件的规范管理，我们还是应该对所有图片文件有一个统一规范的命名，我认为比较好的一种方法是，首先同一资源项下的所有文件开始都使用资源项的名称，后面加不同的后缀，比如 Universal 里的1倍，2倍，3倍图就可以用 iOS 在没有 Asset Catalog 时的命名规则，在后面加@2x，@3x。其他针对不同设备，Size Classes，内容等也可规定相应的统一后缀。

payment_success_icon.png
[email protected]
[email protected]

App Icons

App Icons 是一个特殊的 Image Set，这个资源集合里包含了所有适配的应用图标文件。资源项的名称可直接使用 Xcode 中默认的 AppIcon ，而图片资源的名称，因为一般只会有一套，可以直接使用Prepo切出的图标名称，格式为Icon-后加适配的后缀

Icon-76.png
[email protected]
[email protected]
Icon-Small.png
[email protected]
Icon-Spotlight-40.png
[email protected]

Launch Images

Launch Images 是另一种特殊的 Image Set，这个资源集合里存放的是所有适配的应用启动图。当然现在可以用 .xib 文件或 .storyboard 文件作为应用启动图适配文件，但其中的图片还是要放到 Asset Catalog 里的。因为一般启动图也是只有一套，所以资源项的名称也可直接使用 Xcode 默认的 LaunchImage，而图片资源可以 launch_img开始，后跟 iPad，landscape / portrait，@2x/@3x等后缀。

launch_img_iPad_landscape@2x
launch_img_iPad_portrait@2x
launch_img_iPhone_landscape@2x
launch_img_iPhone_portrait@2x

可配置的资源文件的选项

• Size Classes，可以设置不同 Size Classes 组合对应的 1-3 倍图，iOS8 开始支持。
• Platforms，可以针对不同的平台系统(iPhone，iPad，Mac，Apple TV，Apple Watch)设置多倍图。
• Device Memory，可以根据设备内存(1G，2G)的不同分别设置图片
• Device Graphics，根据不同的设备渲染能力。

而且，这几项是可以同时组合使用的，使开发者可以非常灵活的提供较多个针对不同情况的图片资源文件。

命名空间

使用上述命名规范并不会造成资源项名称相同的情况，但如果有名称冲突的情况，可以通过 .xcassets 内的管理资源项的分组目录提供命名空间的支持。选中该目录，就可以在属性检查器中设置

使用时则需要在名称前加命名空间的名字

UIImage *image = [UIImage imageNamed:@"Folder/payment_success_icon"];

Image Slicing

从 iOS7 开始支持 Image Slicing 功能，通过点击内容区右下角的 Show Slicing 按钮就可以开始配置了。以水平方向为例，在左线与中线之间的部分，为图片的可变的区域，用于图片缩放时的填充和压缩，而中线与右线之间的所有像素将会被隐藏。对于竖直方向，则上线对应水平方向的左线，下线对应水平方向的右线。另外，可以通过界面右侧的属性设置中的Slicing部分对其进行操作，Center包含了可变区域变化的两种模式，分别是stretch(拉伸)和tile(平铺)。

Render Mode

UIImage 的 renderingMode 也集成到了 Asset Catalog 中了。可以在资源项的属性检查器中设置图片的渲染模式。

设置图片资源为矢量图