iOS7初體驗(3)——映像資源Images Assets

標籤：

開始之前，首先回顧一下iOS7初體驗(1)——第一個應用程式HelloWorld中的一張圖，如下所示：

本文分享一下Images.xcassets的體驗~_~

1. 開啟此前使用過的HelloWorld項目，然後單擊並開啟導航地區中的Images.xcassets，看看都有些什麼東東:]：

 

2. 在圖中可以看到中間位置有兩個虛線框，感覺應該可以直接拖檔案進來。OK，那就先準備一下資源檔，如所示：

說明：為方便起見，除Icon7.png之外，其他表徵圖的檔案名稱均沿襲了以往iOS表徵圖的命名規則。

3. 將[email protected]拖拽到第一個虛線框中，將Icon7.png拖拽到第二個虛線框中，如所示：

 

說明：[email protected]的尺寸是58*58像素的，而Icon7.png的尺寸是120*120像素的。另外，如果拖入的圖片尺寸不正確，Xcode會提示警告資訊。

4. 中單擊工具 + 生產力地區的最右側Show the Attributes inspector（顯示內容檢查器）表徵圖，能夠看到映像集的屬性，勾選一下iOS 6.1 and Prior Sizes看看會發生什麼變化？

 

5. 分別將Icon-Small.png、Icon.png和[email protected]順序拖拽到三個空白的虛線框中，完成之後的效果如所示：

 

6. 右擊左側的AppIcon，在彈出的輔助菜單中選擇Show in Finder，看看剛才拖拽都做了哪些工作：

 

7. 圖中除了Contents.json這個檔案陌生之外，其他檔案都是剛剛拖拽進Xcode的，雙擊查看一下Contents.json檔案內容：

 

[html] view plain copy

1. {  
2.  "images" : [  
3.     {  
4.      "size" : "29x29",  
5.      "idiom" : "iphone",  
6.      "filename" : "Icon-Small.png",  
7.      "scale" : "1x"  
8.    },  
9.     {  
10.      "size" : "29x29",  
11.      "idiom" : "iphone",  
12.      "filename" : "[email protected]",  
13.      "scale" : "2x"  
14.    },  
15.     {  
16.      "size" : "57x57",  
17.      "idiom" : "iphone",  
18.      "filename" : "Icon.png",  
19.      "scale" : "1x"  
20.    },  
21.     {  
22.      "size" : "57x57",  
23.      "idiom" : "iphone",  
24.      "filename" : "[email protected]",  
25.      "scale" : "2x"  
26.    },  
27.     {  
28.      "size" : "60x60",  
29.      "idiom" : "iphone",  
30.      "filename" : "Icon7.png",  
31.      "scale" : "2x"  
32.     }  
33.   ],  
34.  "info" : {  
35.    "version" : 1,  
36.    "author" : "xcode"  
37.   }  
38. }  

 

內容一目瞭然啊，哈哈，以後再也不用去特意記住每個尺寸的表徵圖分別應該叫什麼名字了，不知道您會不會，反正我每次都是粘貼複製的，呵呵。以後，只要通過拖拖拽拽就搞定了~_~

8. 表徵圖搞定了，啟動圖片照做就OK了，具體操作差別不大，完成之後的如下：

 

9. 再看一下Finder中的內容，如下所示： 

 

10. 在Finder中不難發現多出了兩個檔案，分別是：[email protected]和[email protected]，雙擊開啟對應的Contents.json檔案，內容如下：

 

[html] view plain copy

1. {  
2.  "images" : [  
3.     {  
4.      "orientation" : "portrait",  
5.      "idiom" : "iphone",  
6.      "extent" : "full-screen",  
7.      "minimum-system-version" : "7.0",  
8.      "filename" : "[email protected]",  
9.      "scale" : "2x"  
10.    },  
11.     {  
12.      "extent" : "full-screen",  
13.      "idiom" : "iphone",  
14.      "subtype" : "retina4",  
15.      "filename" : "[email protected]",  
16.      "minimum-system-version" : "7.0",  
17.      "orientation" : "portrait",  
18.      "scale" : "2x"  
19.    },  
20.     {  
21.      "orientation" : "portrait",  
22.       "idiom" : "iphone",  
23.      "extent" : "full-screen",  
24.      "filename" : "Default.png",  
25.      "scale" : "1x"  
26.    },  
27.     {  
28.      "orientation" : "portrait",  
29.      "idiom" : "iphone",  
30.      "extent" : "full-screen",  
31.      "filename" : "[email protected]",  
32.       "scale" : "2x"  
33.    },  
34.     {  
35.      "orientation" : "portrait",  
36.      "idiom" : "iphone",  
37.      "extent" : "full-screen",  
38.      "filename" : "[email protected]",  
39.      "subtype" : "retina4",  
40.      "scale" : "2x"  
41.     }  
42.   ],  
43.  "info" : {  
44.    "version" : 1,  
45.    "author" : "xcode"  
46.   }  
47. }  

 

11. 將其中的"filename": "[email protected]"和"filename" : "[email protected]"分別改為"filename": "[email protected]"和"filename" : "[email protected]"，儲存並返回Xcode看看會發生什嗎？

修改後的Contents.json內容如下：

 

[html] view plain copy

1. {  
2.  "images" : [  
3.     {  
4.      "orientation" : "portrait",  
5.      "idiom" : "iphone",  
6.      "extent" : "full-screen",  
7.      "minimum-system-version" : "7.0",  
8.      "filename" : "[email protected]",  
9.      "scale" : "2x"  
10.    },  
11.     {  
12.      "extent" : "full-screen",  
13.      "idiom" : "iphone",  
14.      "subtype" : "retina4",  
15.      "filename" : "[email protected]",  
16.      "minimum-system-version" : "7.0",  
17.      "orientation" : "portrait",  
18.      "scale" : "2x"  
19.    },  
20.     {  
21.      "orientation" : "portrait",  
22.       "idiom" : "iphone",  
23.      "extent" : "full-screen",  
24.      "filename" : "Default.png",  
25.      "scale" : "1x"  
26.    },  
27.     {  
28.      "orientation" : "portrait",  
29.      "idiom" : "iphone",  
30.      "extent" : "full-screen",  
31.      "filename" : "[email protected]",  
32.       "scale" : "2x"  
33.    },  
34.     {  
35.      "orientation" : "portrait",  
36.      "idiom" : "iphone",  
37.      "extent" : "full-screen",  
38.      "filename" : "[email protected]",  
39.      "subtype" : "retina4",  
40.      "scale" : "2x"  
41.     }  
42.   ],  
43.  "info" : {  
44.    "version" : 1,  
45.    "author" : "xcode"  
46.   }  
47. }  

 

12. 分別選中下方的"[email protected]"和"[email protected]"，按刪除鍵刪除這兩個檔案，刪除之後的效果如所示：

刪除之後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圖片不要使用透明圖片，有興趣的朋友不妨可以試試看，很醜的，呵呵。

 

著作權聲明：本文由http://blog.csdn.net/liufan321或者http://www.cnblogs.com/liufan9原創，歡迎轉載分享。請尊重作者勞動，轉載時保留該聲明和作者部落格連結，謝謝！

 

iOS7初體驗(3)——映像資源Images Assets