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

開始以前，首先回顧一下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原創，歡迎轉載分享。請尊重做者勞動，轉載時保留該聲明和做者博客連接，謝謝！