在 Xcode 6 中使用矢量圖( iPhone 6 置配 UI)

iOS應用程序是一個圖像主導的產品。在開發一個應用程序時,你需要各種尺寸的圖標,你需要爲每個圖像文件製作一個@1x尺寸和一個@2x尺寸。這樣你的應用看上去才足夠精美。但缺點是你必須單獨生成這些文件。隨着iPhone6和iPhone6 Plus的到來,這個問題變得更加讓人頭疼:@3x 資源。

幸運的是,蘋果在Xcode 6中提供了一些偉大的工具來管理這些資源。更好的是,這種方式也讓你的應用程序能夠運行在未來的iOS設備上打下了基礎。工具之一是Xcode6和iOS8支持以Storyboard(或xib)作爲Launch(啓動)界面,讓程序啓動界面脫離圖像的概念。另一個是Xcode 6具有了基於矢量圖像(PDF文件)的編譯能力。在這篇文章中,我們主要告訴你如何實現後者,以便節省你自己的時間。

在WWDC的411節的"什麼是新的Interface Builder"中,討論了-雖然很短-Xcode在構建時支持從量化的PDF構建PNG文件。我和大家分享一下這究竟怎麼做到。

步驟1:用Illustrator製作PDFs矢量文件

360桌面截圖20140923112044.jpg

首先,你要從Adobe Illustrator(或者其他你喜歡的矢量圖繪製工具)導出你的應用程序需要的@1x大小的PDF圖像,這很容易做:

1: 創建@1x資源規格的文檔。

2: 選擇一個路徑保存你的新文件。

3: 在文件菜單中選擇保存。

4: 記得保存時取消選中“保留Illustrator編輯功能”選項。

從Illustrator導出的PDF文件將是一個可縮放的矢量圖,完全可以擴展到@2x和@3x分辨率。接下來讓我們看看如何設置Xcode。

步驟2:設置你的Xcode項目

360桌面截圖20140923112101.jpg

爲了使用這個功能,你需要一個Xcode的資源目錄來管理你的圖片。不用擔心,你可以混合使用標準圖像和XCAssets(資源目錄)。請按照如下步驟設置Xcode使用矢量圖像:

1: 如果你沒有XCAsset文件,創建一個。如果你已經有一個XCAsset,那麼打開他。
2: 從編輯菜單(右鍵)中選擇“New Image Set”。
3: 在新出現的圖像集合中,選擇空白的圖像集合,然後打開Utilities(右側)面板。
4: 選擇屬性檢查器(右側面板中)。
5: 在類型的下拉菜單中,選擇“ Vectors”。
6: 這是圖像設置的位置將變成一個空位,標有"All - Universal"。
7: 拖放PDF文件到上面。

接下來,就如同使用xcode工程中的普通圖片圖像一樣簡單(在代碼或通過生成器)。例如,在代碼中使用 -imageNamed:,只需要使用圖像集合的字符串名字即可。

步驟3: 觀看奇蹟發生
當你編譯項目時,xcode會使用PDF格式的文件自動創建@1x,@2x和@3x的圖像。舉例來說,如果你有一個@1x的PDF格式文件,大小是150*150像素,則xcode會自動生成如下尺寸圖片並在程序中使用:
@1x.PNG   150px x 150px
@2x.PNG   300px x 300px
@3x.PNG   450px x 450px
當您運行程序時,ios會根據設備型號自動挑選合適的@1x,@2x或@3x尺寸來使用。請在AutoLayout(自動佈局)是務必限制圖像調整過 大,否則你的圖像最終會顯示模糊。xcode是基於@1x的PDF產生圖像而後使用,不是在運行時實時縮放。

注:關於xcode中支持PDF
關於添加矢量圖像到項目的注意事項:
1: 這並不是完全的支持矢量,只是在編譯時生成png圖像,並且過程無法控制。
2: 你在程序中使用矢量圖像後,不能選擇指定圖像大小。如果你想要更大的圖像,就要創建更大尺寸的@1x矢量圖像,否則,擴大圖像將會失真。
3: IOS8不是全矢量支持(而是在編譯時轉換),這和os x不同,在os x中,你可以擴展圖像而不會失真。
4: 與以前的ios版本向後兼容。//譯者:測試ios7可正常運行。此句原文“There is no backwards compatibility with previous iOS versions.”,大概是我理解的不對。讀者自己悟吧。
5: 如果你已經有了一個腳本或工具,能夠自動實現這種功能,那麼你可能體會不到自動生成png的好處。然而,如果你在os x和ios程序之間共享資源,這是一個方便的工具

更多信息和資源

WWDC ‘14 Session 411
Apple Developer Asset Catalog Guide
Apple Developer Interface Builder Guide


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章