代碼生成（Code Generation）

當設計師設計的時候，PaintCode 會即時生成圖像代碼。有幾個設置影響著代碼生成。設計師可以使用中間工具欄中的這些功能，直接生成所需要的代碼。注意，設計師能夠拖動中間工具欄或上或下，按照設計師想要的方式生成代碼。

目標（Target）

首先，設計師必須在 5 個目標中任選其一：

• OS X ? Objective-C
• iOS ? Objective-C
• OS X ? Swift
• iOS ? Swift
• iOS ? C# Xamarin

設計師能夠使用中間工具欄中的目標彈出按鈕來確定目標。

目標設置只會影響生成代碼，不會影響到設計。

最低限度支持 OS 版本（Minimum supported OS version）

第二個選項允許設計師最低限度支持 OS 版本。例如，如果設計師選擇 iOS 6 以及以上版本，這就意味著生成的代碼將只使用 iOS 6 的接口（APIs）。通常情況下，設計師應該為他們的應用選擇最低限度支持的 OS 版本。

內存管理（Memory Management）

目標生成代碼使用了 Objective-C，將會有一個可選的內存管理。這將允許設計師在 ARC（自動引用計數 Automatic Reference Counting）和 保存／釋放（手動操作內存管理）選項中進行切換。

繪畫起點（Drawing Origin）

最后，設計師可以指定繪畫的起點。這是每一個畫布都會有的設置。如果設計師移動繪畫的起點，（0，0）點位置也將會有不同。例如，默認的繪制起點在 OS X 中是左下角，而在 iOS 中缺失左上角。

注意，設計師可以在畫布中拖動繪制起點符號，調整繪畫起點。

樣式表（StyleKits）

當設計師集成生成代碼到他們的 Xcode 項目中的時候，樣式表是一個非常好用的工具。

樣式表：

• 在使用代碼到 Xcode 項目中之前，手動排除需要來生成代碼
• 允許設計師調整 PaintCode 文檔，然后重新集成調整后的代碼到 Xcode 項目中
• 快速生成設計原型

什么是樣式表？（What is StyleKit？）

樣式表是 Objective-C，Swift 或者 C# 的特殊類，它包含設計師的繪畫，顏色，漸變，陰影和其他設計資源。所有的這樣允許設計師通過樣式表的類方法使用。

在 PaintCode 中，設計師能夠在單一文檔中有多個繪制畫布，并且每一個畫布能夠在樣式表類中獨立生成繪制方法。當設計師在代碼中使用這些方法的時候，就會在畫布中繪制內容。

把所有的 PaintCode 設計放入一個單獨的樣式表類中（通過類的公共界面使用這些代碼），PaintCode 將代碼集成過程變得更加順暢。無論設計師什么時候調整 PaintCode 中的設計，都能夠輕易的向 Xcode 項目重新導入樣式表類（2 個文件）。設計師無需手動修改生成代碼，事實上，甚至不需要設計師查看生成的代碼！

樣式表目錄（StyleKit Catalog）

點擊 樣式表 選項卡，添加一個新的樣式表，它位于工具欄的左側、窗口的下方。

這就是選項卡目錄。這是一個設計師希望生成樣式表類的地方。當設計師滾動到目錄地步，就會發(fā)現畫布。每一個畫布都有樣式表目錄，并且在樣式表類中生成一個特殊的繪制方法。

樣式表目錄也包含顏色，漸變，陰影和圖片。

往樣式表中添加顏色和庫項目（Adding colors and other library items to StyleKit）

從庫中單擊拖放目錄，就能夠向樣式表目錄中添加庫項目。

或者，設計師可以點擊 添加顏色 占位符，選擇菜單中的顏色、漸變、陰影和圖片，用同樣的方法，就能夠向樣式表目錄中添加響應的項目。

在設計師向樣式表目錄添加庫項目后，一個具有享用名稱的類方法會添加到生成的代碼中。在生成的代碼中調用樣式表方法，設計師可以輕松的訪問庫項目。

從樣式表中移除顏色和庫項目（Removing colors and other library items from StyleKit）

在樣式表目錄中單擊庫項目，之后點擊 Delete 或者 Backspace，就能夠在樣式表目錄中移除顏色和庫項目。

或者，設計師可以從樣式表目錄中將庫項目拖出。

重要的是，從樣式表目錄中移除庫項目，不會從庫中移除該項目。當設計師從樣式表目錄中移除庫項目的時候，這只意味著生成樣式表代碼，并不是在庫項目中生成公共的類方法。

向樣式表中添加畫布（Adding canvases to StyleKit）

向樣式表中添加畫布，與向樣式表中添加庫項目（比如顏色）略有不同。默認情況下，所有新創(chuàng)建的畫布都會被添加到樣式表目錄中。

然而，設計師能夠容易地移除和添加它們，甚至在樣式表類中精確的調整每個畫布的生成代碼。

為了在樣式表目錄中添加畫布，設計師必須對畫布進行設置。設計師在工作區(qū)域中點擊畫布的標題后，就能夠在檢查器中看到畫布設置。或者，設計師可以點擊畫布中的圖形和組瀏覽器，它總是在該項目的頂端。注意，這么做，設計師必須離開樣式表選項卡，之后激活畫布中的選項卡。

樣式表彈出按鈕指定為選擇的畫布生成代碼。

默認情況下，會生成繪制方法。然而，設計師也可以選擇 圖像方法（Image Method）生成一個方法，返回畫布中的一個 UIImage 內容。

當這個方法被調用的時候，UIImage 會通過代碼繪制。通常，非參數畫布（畫布不使用任何變量），UIImage 會通過樣式表類自動緩存。這意味著，當調用 UIImage的時候，設計師不必擔心性能。首先調用 UIImage 來繪制并緩存圖片的方法，隨后調用之返回緩存的圖片，這是非?？斓摹?/p>

當使用 UIImage 生成方法的時候，設計師會經常使用到兩個最好的方法：一個是設計師的設計是獨立的，設計師不必使用光柵圖片，但是性能和使用 PNG 資源是一樣的。此外，設計師還可以很容易的使用應用樣式接口，來預計 UIImages。

在上圖中，選擇 繪制和圖片方法 選項。這意味著兩個 UIImage 生成方法和避免返回繪制方法將會和公共類方法一樣，存在在樣式表類中。

從 PaintCode 中導出樣式表類（Exporting StyleKit class from PaintCode）

在檢查器中，選擇樣式表選項卡并且點擊大藍色導出按鈕，就能夠從 PaintCode 中導出樣式表類。

之后一個導出表單將會出現。設計師也可以使用 Command + E 快捷鍵使表單顯示出來。在導出表達中，確保選擇樣式表選項卡的同時，點擊 導出 按鈕。然后，選擇要導出的樣式表類。通常，將會導出兩個文件夾：一個是實現文件，一個是頭部文件。如果 PaintCode 文檔使用了光柵圖片，設計師也能夠選擇并導出這些圖片。

一旦樣式表曾經被導出過，再導出就會變得非常容易了。單擊 Command + R 或者從主菜單中選擇 文件 ? 再次導出，就能夠再次導出了。然而，當設計師退出 PaintCode 后重新啟動的時候，會再次提供給設計師導出文件夾。

在 Xcode 中使用樣式表類（Using StyleKit class in Xcode）

在 Xcode 中使用樣式表是非常容易的。首先，在 Xcode 項目中增加已導出的樣式表類（.m 和 .h 文件）。然后，使用直接導入，將這些樣式表類導入到源代碼中：

#import?“YourStyleKitName.h”

或者，設計師可以把要導入的命令放到預編輯的頭部（.pch 擴展的一種）。這樣，設計師就可以在所有源文件中使用樣式表了，并且不需要在其中加入導入命令。

最后，簡單調用這些類方法，來使用樣式表，像這樣：

[YourStyleKitName?drawYourCanvas];

通常，設計師可以在 overridden drawRect 中這么做：一些 UIView 方法?？吹礁鄻邮奖淼幕A教程。訪問樣式表顏色，可以這么做：

UIColor*?color?= YourStyleKitName.yourColor;

其他庫項目與漸變和陰影行為的展現方式一致。

注意當程序化地使用樣式表的時候，設計師不需要實例化樣式表類，訪問設計以及庫項目的所有方法都是類方法，這意味著設計師調用的這些方法，不是類的實例。

注意，如果設計師的畫布使用框架活著變量，生成的類方法可以帶參數，這樣能夠讓設計師輕松繪制參數圖。

UIImage 生成畫布（UIImage-generating canvases）

UIImage 生成畫布的列子，在畫布設置中有很多選項。例如，可以指定拉伸的上限。

設計師也可以指定 UIImage 的調整行為（特別是，是否通過定義中心區(qū)來平鋪活著拉伸 UIImage）。

設計師也可以設置 UIImage 渲染模式。一些 iOS 系統(tǒng)控制如 UITabBarItem 使用 UIImages 來繪制圖表，但這也只把 UIImages 當模版來用，在其應用系統(tǒng)中具有廣泛的影響。這種行為通?？梢苑乐雇ㄟ^切換到 原始（Orginal）渲染模式。

以下是如何在一個帶有樣式表的單一畫布中，設置生成繪制方法和圖像生成方法，像這樣：

在 XIBs 和 Storyboards 中使用 UIImage生成畫布（Using UIImage-generating canvases in XIBs and Storyboards）

在上面的代碼中，設計師能夠看到一個畫布，在畫布中設置生成 UIImage 方法，也生成特殊的 IBoutletCollection。

如果設計師在 XIBs 或者 Storyboards 中產生實例對象，可以連接通過畫布到其他對象生成的 IBoutletCollection。

在 XIB 或者 Storyboard 中添加實例對象后，不要忘記調整他們的類到樣式表類中。

樣式表將會自動調用設計師添加到 IBOutletCollection（又稱為目標） 中的 setImage 方法，并利用畫布生成帶參數的 UIImage。

設計師通過它們的 setImage 方法，能夠把這些應用到將在 PaintCode 中設計的圖片，分配到對象中。在畫布設置中，依然能夠指定 setSelectedImage 方法替代前面的方法。

當設計師想自定義像 UITabBarItem 一樣可視界面對象的時候，IBOutletCollection 是非常有用的。

這是在模擬器中鏈接畫布中 IBOutletCollection 和 UITabBarItem 的結果：

注：用 UITabBarItem 進行設計，設計師必須設置它的標識符來“定制”在 Xcode中的 Interface Builder。

重要：請注意所有的樣式表方法都是類方法。這就意味著設計師通常不需要將樣式表變?yōu)閷嵗笤谑褂?。事實上，設計師只需要創(chuàng)建一個實例就能夠使用IBOutletCollection。

樣式表設置（StyleKit Setting）

點擊樣式表選項卡下面的工具欄，就能夠進入樣式表設置。在右邊的檢查器中會出出現樣式表設置。設計師可以指定：

生成樣式表類的名稱

• 項目名稱
• 設計師名稱
• 企業(yè)名稱

這些信息被用來生成每個樣式表文件頂部的評論。當樣式表選項卡處于活動狀態(tài)的時候，樣式表設置能夠在檢查器中找到。

PaintCode 用戶操作指南系列文章

PaintCode 用戶操作指南（概述篇）

PaintCode 用戶操作指南（庫篇）

PaintCode 用戶操作指南（繪制篇）

PaintCode 用戶操作指南（畫布和選項卡）

PaintCode 用戶操作指南（樣式表和代碼生成）

PaintCode 用戶操作指南（變量篇）

PaintCode 用戶操作指南（動態(tài)圖形篇）

PaintCode 用戶操作指南（符號篇）

文章已經完結，敬請期待下一部《Sketch 3用戶操作指南及實戰(zhàn)案例全解》

本作品由人人都是產品經理特邀專欄作家@鄭幾塊 翻譯并獨家授權發(fā)布，未經許可禁止轉載