iOS在Assets.xcassets中提供的便捷功能

蚊香醬發表於2017-12-21
iOS

我們常常利用Assets.xcassets來管理專案中用到的icon和各種圖片素材, 但其除了提供為不同裝置和Size Classes新增不同的圖片這種基礎使用方式以外, 還提供了一些非常便捷的小功能, 下面我們將簡單介紹一下

在Assets.xcassets中使用向量圖

我們在進行應用程式開發過程中, 常常會在專案中放置大量的圖片素材, 且每一張圖片都需要準備@1x、@2x和@3x三種以便在不同的裝置中使用. 並且最可怕的是現在iOS裝置的PPI有逐年增大的趨勢, 未來很可能會有@4x和@5x等等, 這對設計人員和開發人員維護圖片素材都帶來了不小的麻煩

蘋果在Xcode6中便允許我們在專案中使用向量圖來代替傳統的點陣圖, 該種方式在iOS平臺上實際上只是一個障眼法, Xcode只是在編譯的時候根據向量圖來自動生成對應的@1x、@2x和@3x格式的點陣圖. 雖然不夠完美, 但是也足以讓我們省去很多維護不同格式圖片素材的麻煩. 其使用方式如下:

  1. 通過AI和Sketch等設計工具將向量圖輸出成一個PDF檔案
  2. 在Images.xcassets / Assets.xcassets中新建一個Image Set
    1. 如果是在Xcode6中, 在Attributes Inspector中將Types改為Vectors
    2. 如果是在Xcode6.3中, 在Attributes Inspector中將Scale Factor改為Single Vector
    3. 如果是在Xcode8中, 在Attributes Inspector中將Scales改為Single Scale
  3. 將PDF檔案新增到Image Set中

自此, 當編譯時會根據PDF檔案自動生成對應的@1x、@2x和@3x格式的PNG檔案

Xcode9中使用向量圖

在Xcode9中, 該功能得到再次增強, 我們可以在Attributes Inspector中將Preserve Vector Data選項勾選. 此時在編譯時會將PDF檔案拷貝到二進位制檔案中, 以便我們可以在執行時任意縮放圖片而不會失真

Preserve Vector Data

注: 對於iOS10及以下系統, 仍然會生成對應的@1x、@2x和@3x格式的PNG檔案, 此時無法保證在執行時任意縮放圖片而不會失真

在使用該圖片時, 我們讓像平時一樣使用即可, 比如在IB中直接選取圖片名稱, 或在Code中直接設定

UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:@"Main_button"];
複製程式碼

在Assets.xcassets中新增顏色

我們在進行應用程式開發過程中, 常常會專門定義一個類用於定義整個應用程式都需要使用到的顏色, 而在IB中卻無法使用統一定義好的顏色

蘋果在Xcode9中便允許我們在Assets.xcassets中新增顏色. 其使用方式如下:

  1. 在Assets.xcassets中新建一個Image Color Set
  2. 在Attributes Inspector中為顏色設定名字和色值

Xcode9中新增顏色

注: 可以新建一個Colors.xcassets檔案單獨用於新增顏色

在使用該顏色時, 我們可以在Code中使用iOS11新加入的API, 或者讓像平時一樣在IB中直接選取顏色名稱

UIColor *color = [UIColor colorNamed:@"TitleColor"];
複製程式碼

Xcode9中使用顏色

在Assets.xcassets中拉伸圖片

我們在進行應用程式開發過程中, 常常會遇到需要拉伸圖片的需求, 平時我們都會使用UIImage的如下方法生成一張拉伸後的圖片

// 如果拉伸區域為1*1區域, 則採用拉伸模式, 此時效能最高
// 如果拉伸區域大於1*1區域, 且capInsets為UIEdgeInsetsZero, 則採用平鋪模式, 此時效能略差
// 如果拉伸區域大於1*1區域, 且capInsets不為UIEdgeInsetsZero, 則採用平鋪模式, 此時效能最差
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets NS_AVAILABLE_IOS(5_0);
// 指定拉伸模式
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0);
複製程式碼

其實, 在Assets.xcassets中可以直接對圖片進行拉伸操作

我們可以通過點選Show Slicing通過拖拽的方式確定capInsets的值

點選Show Slicing拖拽

也可以直接在Attributes Inspector中設定capInsets的值

在Attributes Inspector中設定

在Assets.xcassets中渲染圖片

我們在進行應用程式開發過程中, 常常被系統強制將圖片進行渲染, 一般我們都會使用UIImage的如下方法生成一張指定渲染模式的圖片

// UIImageRenderingModeAlwaysOriginal是按照原圖渲染
// UIImageRenderingModeAlwaysTemplate是按照模板渲染
// 預設渲染模式為UIImageRenderingModeAutomatic, 基於上下文決定具體的渲染模式. 如果是在navigation bars, tab bars, toolbars, 和segmented controls中則為Template, 其餘上下文則為Original
- (UIImage *)imageWithRenderingMode:(UIImageRenderingMode)renderingMode NS_AVAILABLE_IOS(7_0);
複製程式碼

其實, 在Assets.xcassets中可以直接設定圖片的渲染模式

設定圖片的渲染模式

相關文章