先介紹下Asset Catalog,Asset Catalog是Xcode5引入的一個新的圖片管理方式,有幾個好處:
1.自動管理圖片,如@1x,@2x圖片,使用的時候使用Asset 名字即可
2.管理應用的Icon和Default圖片,這個挺方便的,可以完全拋開以前規范命名如Icon.png,Icon@2x.png,Xcode會自動識別尺寸然后匹配進去
3.個人覺得方便模塊圖片管理,可以針對模塊建立Component1.xcassets,在這個Category中去建立新的Image set
4.可以可視化管理圖片拉伸,從而拋棄到處使用resizeImage...來獲取拉伸圖片
示例代碼如下:
- // 使用原比例圖片
- UIImage *image = [UIImage imageNamed:@"darc_component_golden_egg"];
- UIImageView *imageview = [[UIImageView alloc] initWithImage:image];
- imageview.frame = CGRectMake(50, 50, image.size.width, image.size.height);
- [self.view addSubview:imageview];
- [imageview release];
- // 使用拉伸圖片
- image = [UIImage imageNamed:@"darc_component_cell_bottom"];
- imageview = [[UIImageView alloc] initWithImage:image];
- imageview.frame = CGRectMake(50, 150, 200,200);
- [self.view addSubview:imageview];
- [imageview release];
得到的效果圖:
創建一個新的Asset Catalog:
方法:使用 File - new - File - Resource - Asset Catalog,會需要輸入名字和選擇Target
建立完畢后單擊,文檔會將整個操作區域從左到右分為三部分,SetList, Set Viewer, Set attributes inspector
在SetList區域左下角會有新增(+)和刪除(-)按鈕,實際在區域內右擊也會有對應選項,
New Image Set:圖片夾,這個常用
New App Icon:用於圖標管理
New Lauch Image: 啟動圖
New Folder:新文件夾,支持在文件夾嵌套,具體自己研究研究
使用New Image Set建立一個新的圖片夾,如下圖中的darc_component_temp,在屬性欄中可以選擇設備的類型,根據設備的不同,會有多個占位圖片
添加圖片的方式可以使用導入,如下圖
還可以更加簡潔的直接將圖片拖入到占位符位置,Xcode會自動根據圖片尺寸放入對應的占位符中.
配置拉伸圖片:
拉伸圖片支持水平,垂直,水平和垂直同時拉伸三種,操作步驟如下,單擊Image Set,選擇 Show Slice進入下一步
如下圖所示,切換水平或者垂直可以選擇對應的圖片,在屬性編輯欄中切換.
步驟如上圖所示,具體屬性解釋如下所示:總共三條線,左邊為左句柄,內句柄,右句柄(如果是垂直則為上,內,下切片句柄),
左邊到左句柄,右句柄到右邊部分為不變部分
左句柄到內句柄為填充樣式,將來就會用這部分去填充其他擴充部分
內句柄到片句柄部分為可擴充部分,隨着拉伸或者縮小,這部分將會被填充樣式填充
使用一個實際例子如下:我將重復區域變小,將拉伸區域變大,於是就得到了右圖,那就很直觀的知道結果了!
參考文檔:
https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/_index.html