[原文：http://blog.csdn.net/liufan321/article/details/9121241]
開始之前，首先回顧一下XCode5?iOS7初體驗——第一個應用程序HelloWorld中的一張圖，如下所示：
本文分享一下Images.xcassets的體驗~_~
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文件內容：
[html]?view plaincopy
{?? ?"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文件，內容如下：
[html]?view plaincopy
{?? ?"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內容如下：
[html]?view plaincopy
{?? ?"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的尺寸屬性，如下圖所示：
?
19. 設置該UIImageView使用的圖像，如下圖所示：
?
20. 在不同屏幕的模擬器上運行HelloWorld應用，可以看到如下三張圖示。
?
OK！Images.xcassets的初體驗一文至此算是告一段落，現做一下簡單的小節：
1. 有過Xcode以前版本使用經驗的朋友應該會發現，從Xcode 5開始已經無需再去記住Icon.png和Default.png針對不同分辨率使用的文件名了；
2. Xcode 5針對4存視網膜屏的圖像提供了單獨的支持，解決了以往在兼容四存屏時，有時不得不需要編寫專門的代碼加載不同的圖片；
3. Image.xcassets更加便于管理和維護；
4.?注意：啟動圖片的PNG圖片不要使用透明圖片，有興趣的朋友不妨可以試試看，很丑的，呵呵。
總結
以上是生活随笔為你收集整理的iOS7(+) 图像资源Images Assets使用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
