1. 程式人生 > >[iOS]PDF格式的向量圖作為圖片資源自動適配

[iOS]PDF格式的向量圖作為圖片資源自動適配

在 iOS App 中,圖片一直是展現 App 細節的主要元素,它至關重要。當我們去開發一款 App 時,我們需要不同解析度的圖片以保證在不同解析度的螢幕下均可得到精緻的展示。隨著 iPhone 裝置迭代新品,越來越多不同尺寸的解析度需要適配,直到 iPhone 6 及 iPhone 6 Plus 釋出前單啟動時的 Default 圖片就已經有 @1x, @2x, [email protected] 三種尺寸需要適配了。iPhone 6 Plus 釋出後,又多了一種尺寸,即 @3x 圖片。

為了保證 App 的精緻,不斷為不同尺寸的螢幕提供相應的圖片是必不可少的,但是卻讓開發者頭疼。對於責任心稍稍差一點的程式設計師,很容易就出現因未新增相應尺寸圖片而導致的問題:

  • 因某個尺寸圖片為添加出現模糊
  • 因不確定圖片是否新增而導致的圖片模糊(因為每張圖有不同尺寸管理起來會很傷神)

索性,從 Xcode 6 開始,蘋果提供了一種更為優雅、高效、清晰的方式來管理工程內的圖片資源。那就是 向量化 PDF (vectorized PDF)。從此你不必再為單個解析度匯入 png 到你的工程內,而是通過匯入 PDF 的方式,Xcode 6 會在 編譯時 (build-time) 時根據 PDF 圖片產生不同解析度的 png 圖片。這樣既為開發者節省了時間,又讓開發者減少了犯錯的可能性。

設計師在設計時,只需要按照 @1x 的尺寸來設計便可。

工具 | Tools

現在可以匯出 vector PDF 的工具有

  • Photoshop
  • Illustrtor
  • Sketch 3

匯入 PDF 到工程 | Import PDF to project

為了能使用這一特性,你需要使用一個 Xcode Asset Catalog 來管理你的圖片。如下圖,你需要將 Type 設定為 Vectors, 然後將你的 PDF 檔案拖拽過去,Done!

project image

示例工程執行後的效果 | I see U

iPhone 6 PlusiPad RetinaiPhone 4s

更多資源 | More resources