iOS映像資源Images Assets，iosassets

iOS映像資源Images Assets，iosassets

1. 在工程中單擊並開啟導航地區中的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圖片不要使用透明圖片，有興趣的朋友不妨可以試試看，很醜的，呵呵。