【IOS开发基础系列】images.xcassets专题

重点参考链接:

iOS7 images.xcassets里面放入资源图片

http://www.580114.com/u/ioslearner/Blog/t-43688


1 代码调用

[UIImage imageNamed:@"imageSet的name"] 

        把我们app的资源图片也放入到images.xcassets里面,也是个不错的选择。目前步骤可用,但不保证是最好的的方案。

        首先 new folder,随便起个名字比如 ui,然后把资源图片加入到此文件夹下面,在Xcode工程里面操作。下面看截图吧,so easy。

        1. 打开此前使用过的HelloWorld项目,然后单击并打开导航区域中的Images.xcassets,看看都有些什么东东:

        2. 在图中可以看到中间位置有两个虚线框,感觉应该可以直接拖文件进来。OK,那就先准备一下资源文件,如下图所示:

        说明:为方便起见,除Icon7.png之外,其他图标的文件名均沿袭了以往iOS图标的命名规则。

        3. 将Icon-Small@2x.png拖拽到第一个虚线框中,将Icon7.png拖拽到第二个虚线框中,如下图所示:

        说明:Icon-Small@2x.png的尺寸是58*58像素的,而Icon7.png的尺寸是120*120像素的。另外,如果拖入的图片尺寸不正确,Xcode会提示警告信息。

        4. 上图中单击实用工具区域的最右侧Show the Attributes inspector(显示属性检查器)图标,能够看到图像集的属性,勾选一下iOS 6.1 and Prior Sizes看看会发生什么变化?

        5. 分别将Icon-Small.png、Icon.png和Icon@2x.png顺序拖拽到三个空白的虚线框中,完成之后的效果如下图所示:

        6. 右击左侧的AppIcon,在弹出的辅助菜单中选择Show in Finder,看看刚才拖拽都做了哪些工作:

        7. 图中除了Contents.json这个文件陌生之外,其他文件都是刚刚拖拽进Xcode的,双击查看一下Contents.json文件内容:

{ "images" : [ 

    {"size" : "29x29", "idiom" : "iphone","filename" : "Icon-Small.png", "scale" :"1x" }, 

    { "size" : "29x29", "idiom" :"iphone", "filename" : "Icon-Small@2x.png","scale" : "2x" }, 

    { "size" : "57x57","idiom" : "iphone", "filename" :"Icon.png", "scale" : "1x" }, 

    { "size": "57x57", "idiom" : "iphone","filename" : "Icon@2x.png", "scale" :"2x" }, 

    { "size" : "60x60", "idiom" :"iphone", "filename" : "Icon7.png","scale" : "2x" } ], 

 "info" : {"version" : 1, "author" : "xcode" } 

}

        内容一目了然啊,哈哈,以后再也不用去特意记住每个尺寸的图标分别应该叫什么名字了,不知道您会不会,反正我每次都是粘贴复制的,呵呵。以后,只要通过拖拖拽拽就搞定了~_~

        8. 图标搞定了,启动图片照做就OK了,具体操作差别不大,完成之后的示意图如下:

        9. 再看一下Finder中的内容,如下所示:

        10. 在Finder中不难发现多出了两个文件,分别是:Default@2x-1.png和Default-568h@2x-1.png,双击打开对应的Contents.json文件,内容如下:

{ "images" : [ 

        { "orientation": "portrait", "idiom" : "iphone","extent" : "full-screen","minimum-system-version" : "7.0", "filename" :"Default@2x.png", "scale" : "2x" }, 

        {"extent" : "full-screen", "idiom" :"iphone", "subtype" : "retina4","filename" : "Default-568h@2x.png","minimum-system-version" : "7.0", "orientation" :"portrait", "scale" : "2x" }, 

        {"orientation" : "portrait", "idiom" :"iphone", "extent" : "full-screen","filename" : "Default.png", "scale" :"1x" }, 

        { "orientation" : "portrait","idiom" : "iphone", "extent" :"full-screen", "filename" : "Default@2x-1.png","scale" : "2x" }, 

        { "orientation" :"portrait", "idiom" : "iphone","extent" : "full-screen", "filename" :"Default-568h@2x-1.png", "subtype" : "retina4","scale" : "2x" } 

    ], 

    "info" : { "version": 1, "author" : "xcode" } 

}

        11. 将其中的"filename" : "Default@2x-1.png"和"filename" : "Default-568h@2x-1.png"分别改为"filename" : "Default@2x.png"和"filename" : "Default-568h@2x.png",保存并返回Xcode看看会发生什么?

        修改后的Contents.json内容如下:

{ "images" : [ 

        {"orientation" : "portrait", "idiom" :"iphone", "extent" : "full-screen","minimum-system-version" : "7.0", "filename" :"Default@2x.png", "scale" : "2x" }, 

        { "extent": "full-screen", "idiom" : "iphone","subtype" : "retina4", "filename" :"Default-568h@2x.png", "minimum-system-version" :"7.0", "orientation" : "portrait","scale" : "2x" }, 

        { "orientation" :"portrait", "idiom" : "iphone","extent" : "full-screen", "filename" :"Default.png", "scale" : "1x" }, 

        {"orientation" : "portrait", "idiom" :"iphone", "extent" : "full-screen","filename" : "Default@2x.png", "scale" :"2x" }, 

        { "orientation" : "portrait","idiom" : "iphone", "extent" :"full-screen", "filename" :"Default-568h@2x.png", "subtype" : "retina4","scale" : "2x" } 

    ], 

    "info" : {"version" : 1, "author" : "xcode" } 

}

        12. 分别选中下方的"Default@2x-1.png"和"Default-568h@2x-1.png",按删除键删除这两个文件,删除之后的效果如下图所示:

        删除之后Finder中的内容如下所示:

        13. 接下来我们新建一个图像试试看如何操作,开始之前我们仍然需要准备一下素材,如下图所示:

        说明:为了方便在运行时看出不同分辨率的设备使用的背景图片不同,我在素材图片中增加了文字标示。

         14. 将准备好的三个Background直接拖拽到Xcode中,完成之后如下图所示:

        15. 单击右侧Devices中的Universal,并选择Device Specific,然后在下方勾选iPhone和Retina 4-inch,同时取消勾选iPad,完成之后如下图所示:

        16. 将下方Unassigned中的图片直接拖拽到右上角R4位置,设置视网膜屏使用的背景图片,如下图所示:

        17. 单击并打开Main.storyboard,选中左侧的View Controller,然后在右侧File Inspector中,取消勾选Use Autolayout选项,如下图所示:

        18. 从右侧工具栏中拖拽一个UIImageView至View Controller主视图中,并处于其他控件的最底层,同时调整该UIImageView的尺寸属性,如下图所示:

        29. 设置该UIImageView使用的图像,如下图所示:

        20. 在不同屏幕的模拟器上运行HelloWorld应用,可以看到如下三张图示。


        OK!Images.xcassets的初体验一文至此算是告一段落,现做一下简单的小节:

    1. 有过Xcode以前版本使用经验的朋友应该会发现,从Xcode 5开始已经无需再去记住Icon.png和Default.png针对不同分辨率使用的文件名了;

    2. Xcode 5针对4存视网膜屏的图像提供了单独的支持,解决了以往在兼容四存屏时,有时不得不需要编写专门的代码加载不同的图片;

    3. Image.xcassets更加便于管理和维护;

    4. 注意:启动图片的PNG图片不要使用透明图片,有兴趣的朋友不妨可以试试看,很丑的,呵呵。

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

推荐阅读更多精彩内容