天天看點

iOS7—Day by day—Day2:Asset Catalog

這篇文章是天天品嘗iOS7甜點系列的一部分,你可以檢視完整的系列目錄:天天品嘗iOS7甜點

介紹

過去,我們在Xcode中會花費很多的時間來管理我們的圖像資産,我們不确定需要retina版本的圖檔,或者不同icon版本的圖示。在以前這些圖像都沒有很多的關聯管理,但是在Xcode5和iOS7中,Apple已經介紹了一個新的概念

Asset Catalogs(資産分類)

,它可以管理實體圖像檔案和這些檔案的上下文資訊。

完成的代碼已經在github可供下載下傳使用:github.com/ShinobiControls/iOS7-day-by-day

Asset Catalog – 資産分類

一個資産分類的目錄由一些圖像的集合,app圖示和app啟動頁構成。當我們在Xcode5中建立一個工程的時候,Xcode會自動為我們建立一個名為Images的資産分類檔案夾,并且它會事先準備好一些app圖示和app啟動頁,同時Xcode提供舊應用程式遷移到使用資産目錄。

在iOS7中的目錄中會編譯成一個二進制的檔案,來減少釋出應用程式的大小。

Asset catalogs是存在在硬碟上面的一個目錄,由Xcode進行管理。它以特定的方式進行檔案的排列,包含一個json檔案存儲目錄相關聯的中繼資料:

iOS7—Day by day—Day2:Asset Catalog

App icons and launch images

Asset catalog(資産分類)預設被Xcode5中自動建立,名為

Images.xcassets

,包含了

AppIcon

LaunchImage

的入口。提供了建構應用的所有需要的圖示的尺寸:

iOS7—Day by day—Day2:Asset Catalog

可以通過簡單的拖拽圖檔填充到對應的分類中,如果你圖檔的尺寸不符合,Xcode就會産生警告資訊:

iOS7—Day by day—Day2:Asset Catalog

Custom imagesets – 自定義圖像集

和标準的集合一樣,你可以使用asset catalogs來管理你自己的圖檔,圖檔都是包含在

ImageSet

中的,并且可以使用管理對應的retina和非retina圖像.

iOS7—Day by day—Day2:Asset Catalog

使用Xcode建立一個圖檔的集合(image set), 你就可以在導航攔裡面很輕松的管理圖像,同樣使用這些圖像也是十分簡單的,使用

UIImage:imageNamed:

:

UIImage *image = [UIImage imageNamed:@"Australia"];

           

Slicing images – 切片圖像

Asset catalogs的另外一個主要的特性就是能夠讓圖像進行切片工作,自從iOS2開始程式就能夠使用切片的圖像了,但是Xcode中的這個新特性會變得非常的簡單。

變換圖像使用切片是一個基本的技術來建立一個虛拟的元素,例如按鈕,需要拉伸這個按鈕圖檔的大小達到一個新的大小,并且要設定邊緣不被拉伸,隻拉伸中間的部分。

在Asset catalog中就可以使用Xcode提供的功能進行切片操作了,開啟切片功能,隻需要點選

Show Slicing

按鈕,你可以選擇水準、豎直或者兩者都拉伸的方式,如果你選擇之後,圖像将會重新加載并且上面會出現拉伸輔助線,你可以通過拖拽輔助線,來實作自己需要拉伸的效果。

iOS7—Day by day—Day2:Asset Catalog

使用這些切片圖像程式設計非常的簡單,和之前一樣建立一個

UIImage

對象,然後當你調整

UIImageView

的大小,内部的image就會自動根據切片的圖像來變換大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
      
UIImage *btnImage = [UIImage imageNamed:@"ButtonSlice"];

// Let's make 2
UIImageView *iv = [[UIImageView alloc] initWithImage:btnImage];
iv.bounds = CGRectMake(0, 0, 150, CGRectGetHeight(iv.bounds));
iv.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2, 300);
[self.view addSubview:iv];

// And a stretched version
iv = [[UIImageView alloc] initWithImage:btnImage];
iv.bounds = CGRectMake(0, 0, 300, CGRectGetHeight(iv.bounds));
iv.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2, 350);
[self.view addSubview:iv];

           
iOS7—Day by day—Day2:Asset Catalog

總結

Asset catalog 并不是一個突破性的iOS開發者工具包,但是它确實能夠為iOS開發者節約很多的時間,能夠從繁雜的工作中解脫出來,此功能包含在Xcode5中。

本文翻譯自:iOS7 Day-by-Day :: Day 2 :: Asset Catalog

Posted by kingiol 2014-01-07 Tue  iOS7, iOS7 Day-by-Day, 翻譯