起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識PaintCode 用戶操作指南（樣式表和代碼生成）
代碼生成（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）
點擊 樣式表 選項卡，添加一個新的樣式表，它位于工具欄的左側、窗口的下方。
這就是選項卡目錄。這是一個設計師希望生成樣式表類的地方。當設計師滾動到目錄地步，就會發現畫布。每一個畫布都有樣式表目錄，并且在樣式表類中生成一個特殊的繪制方法。
樣式表目錄也包含顏色，漸變，陰影和圖片。
往樣式表中添加顏色和庫項目（Adding colors and other library items to StyleKit）
從庫中單擊拖放目錄，就能夠向樣式表目錄中添加庫項目。
或者，設計師可以點擊 添加顏色 占位符，選擇菜單中的顏色、漸變、陰影和圖片，用同樣的方法，就能夠向樣式表目錄中添加響應的項目。
在設計師向樣式表目錄添加庫項目后，一個具有享用名稱的類方法會添加到生成的代碼中。在生成的代碼中調用樣式表方法，設計師可以輕松的訪問庫項目。
從樣式表中移除顏色和庫項目（Removing colors and other library items from StyleKit）
在樣式表目錄中單擊庫項目，之后點擊 Delete 或者 Backspace，就能夠在樣式表目錄中移除顏色和庫項目。
或者，設計師可以從樣式表目錄中將庫項目拖出。
重要的是，從樣式表目錄中移除庫項目，不會從庫中移除該項目。當設計師從樣式表目錄中移除庫項目的時候，這只意味著生成樣式表代碼，并不是在庫項目中生成公共的類方法。
向樣式表中添加畫布（Adding canvases to StyleKit）
向樣式表中添加畫布，與向樣式表中添加庫項目（比如顏色）略有不同。默認情況下，所有新創建的畫布都會被添加到樣式表目錄中。
然而，設計師能夠容易地移除和添加它們，甚至在樣式表類中精確的調整每個畫布的生成代碼。
為了在樣式表目錄中添加畫布，設計師必須對畫布進行設置。設計師在工作區域中點擊畫布的標題后，就能夠在檢查器中看到畫布設置?；蛘?，設計師可以點擊畫布中的圖形和組瀏覽器，它總是在該項目的頂端。注意，這么做，設計師必須離開樣式表選項卡，之后激活畫布中的選項卡。
樣式表彈出按鈕指定為選擇的畫布生成代碼。
默認情況下，會生成繪制方法。然而，設計師也可以選擇 圖像方法（Image Method）生成一個方法，返回畫布中的一個 UIImage 內容。
當這個方法被調用的時候，UIImage 會通過代碼繪制。通常，非參數畫布（畫布不使用任何變量），UIImage 會通過樣式表類自動緩存。這意味著，當調用 UIImage的時候，設計師不必擔心性能。首先調用 UIImage 來繪制并緩存圖片的方法，隨后調用之返回緩存的圖片，這是非?？斓?。
當使用 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 的調整行為（特別是，是否通過定義中心區來平鋪活著拉伸 UIImage）。
設計師也可以設置 UIImage 渲染模式。一些 iOS 系統控制如 UITabBarItem 使用 UIImages 來繪制圖表，但這也只把 UIImages 當模版來用，在其應用系統中具有廣泛的影響。這種行為通常可以防止通過切換到 原始（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。
重要：請注意所有的樣式表方法都是類方法。這就意味著設計師通常不需要將樣式表變為實例后在使用。事實上，設計師只需要創建一個實例就能夠使用IBOutletCollection。
樣式表設置（StyleKit Setting）
點擊樣式表選項卡下面的工具欄，就能夠進入樣式表設置。在右邊的檢查器中會出出現樣式表設置。設計師可以指定：
生成樣式表類的名稱
- 項目名稱
- 設計師名稱
- 企業名稱
這些信息被用來生成每個樣式表文件頂部的評論。當樣式表選項卡處于活動狀態的時候，樣式表設置能夠在檢查器中找到。
PaintCode 用戶操作指南系列文章
文章已經完結，敬請期待下一部《Sketch 3用戶操作指南及實戰案例全解》
本作品由人人都是產品經理特邀專欄作家@鄭幾塊 翻譯并獨家授權發布，未經許可禁止轉載
- 目前還沒評論，等你發揮！
