開始之前，首先回顧一下iOS7初體驗(1)——第一個應用程序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文件內容：
{
"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圖片不要使用透明圖片，有興趣的朋友不妨可以試試看，很丑的，呵呵。
著作權聲明：本文由http://blog.csdn.net/liufan321或者http://www.cnblogs.com/liufan9原創，歡迎轉載分享。請尊重作者勞動，轉載時保留該聲明和作者博客鏈接，謝謝！