[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" : "payment_success_icon@2x.png",
      "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
payment_success_icon@2x.png
payment_success_icon@3x.png
App Icons

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

Icon-76.png
Icon-76@2x.png
Icon-iPadPro@2x.png
Icon-Small.png
Icon-Small@2x.png
Icon-Spotlight-40.png
Icon-Spotlight-40@2x.png
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 中了。可以在资源项的属性检查器中设置图片的渲染模式。

设置图片资源为矢量图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容