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

0 評(píng)論 10503 瀏覽 2 收藏 17 分鐘

代碼生成（Code Generation）

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

目標(biāo)（Target）

首先，設(shè)計(jì)師必須在 5 個(gè)目標(biāo)中任選其一：

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

設(shè)計(jì)師能夠使用中間工具欄中的目標(biāo)彈出按鈕來(lái)確定目標(biāo)。

目標(biāo)設(shè)置只會(huì)影響生成代碼，不會(huì)影響到設(shè)計(jì)。

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

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

內(nèi)存管理（Memory Management）

目標(biāo)生成代碼使用了 Objective-C，將會(huì)有一個(gè)可選的內(nèi)存管理。這將允許設(shè)計(jì)師在 ARC（自動(dòng)引用計(jì)數(shù) Automatic Reference Counting）和 保存／釋放（手動(dòng)操作內(nèi)存管理）選項(xiàng)中進(jìn)行切換。

繪畫起點(diǎn)（Drawing Origin）

最后，設(shè)計(jì)師可以指定繪畫的起點(diǎn)。這是每一個(gè)畫布都會(huì)有的設(shè)置。如果設(shè)計(jì)師移動(dòng)繪畫的起點(diǎn)，（0，0）點(diǎn)位置也將會(huì)有不同。例如，默認(rèn)的繪制起點(diǎn)在 OS X 中是左下角，而在 iOS 中缺失左上角。

注意，設(shè)計(jì)師可以在畫布中拖動(dòng)繪制起點(diǎn)符號(hào)，調(diào)整繪畫起點(diǎn)。

樣式表（StyleKits）

當(dāng)設(shè)計(jì)師集成生成代碼到他們的 Xcode 項(xiàng)目中的時(shí)候，樣式表是一個(gè)非常好用的工具。

樣式表：

  • 在使用代碼到 Xcode 項(xiàng)目中之前，手動(dòng)排除需要來(lái)生成代碼
  • 允許設(shè)計(jì)師調(diào)整 PaintCode 文檔，然后重新集成調(diào)整后的代碼到 Xcode 項(xiàng)目中
  • 快速生成設(shè)計(jì)原型

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

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

002

在 PaintCode 中，設(shè)計(jì)師能夠在單一文檔中有多個(gè)繪制畫布，并且每一個(gè)畫布能夠在樣式表類中獨(dú)立生成繪制方法。當(dāng)設(shè)計(jì)師在代碼中使用這些方法的時(shí)候，就會(huì)在畫布中繪制內(nèi)容。

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

樣式表目錄（StyleKit Catalog）

點(diǎn)擊 樣式表 選項(xiàng)卡，添加一個(gè)新的樣式表，它位于工具欄的左側(cè)、窗口的下方。

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

003

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

004

往樣式表中添加顏色和庫(kù)項(xiàng)目（Adding colors and other library items to StyleKit）

從庫(kù)中單擊拖放目錄，就能夠向樣式表目錄中添加庫(kù)項(xiàng)目。

005

或者，設(shè)計(jì)師可以點(diǎn)擊 添加顏色 占位符，選擇菜單中的顏色、漸變、陰影和圖片，用同樣的方法，就能夠向樣式表目錄中添加響應(yīng)的項(xiàng)目。

006

在設(shè)計(jì)師向樣式表目錄添加庫(kù)項(xiàng)目后，一個(gè)具有享用名稱的類方法會(huì)添加到生成的代碼中。在生成的代碼中調(diào)用樣式表方法，設(shè)計(jì)師可以輕松的訪問(wèn)庫(kù)項(xiàng)目。

從樣式表中移除顏色和庫(kù)項(xiàng)目（Removing colors and other library items from StyleKit）

在樣式表目錄中單擊庫(kù)項(xiàng)目，之后點(diǎn)擊 Delete 或者 Backspace，就能夠在樣式表目錄中移除顏色和庫(kù)項(xiàng)目。

或者，設(shè)計(jì)師可以從樣式表目錄中將庫(kù)項(xiàng)目拖出。

重要的是，從樣式表目錄中移除庫(kù)項(xiàng)目，不會(huì)從庫(kù)中移除該項(xiàng)目。當(dāng)設(shè)計(jì)師從樣式表目錄中移除庫(kù)項(xiàng)目的時(shí)候，這只意味著生成樣式表代碼，并不是在庫(kù)項(xiàng)目中生成公共的類方法。

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

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

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

為了在樣式表目錄中添加畫布，設(shè)計(jì)師必須對(duì)畫布進(jìn)行設(shè)置。設(shè)計(jì)師在工作區(qū)域中點(diǎn)擊畫布的標(biāo)題后，就能夠在檢查器中看到畫布設(shè)置?；蛘?，設(shè)計(jì)師可以點(diǎn)擊畫布中的圖形和組瀏覽器，它總是在該項(xiàng)目的頂端。注意，這么做，設(shè)計(jì)師必須離開(kāi)樣式表選項(xiàng)卡，之后激活畫布中的選項(xiàng)卡。

0071

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

008

默認(rèn)情況下，會(huì)生成繪制方法。然而，設(shè)計(jì)師也可以選擇 圖像方法（Image Method）生成一個(gè)方法，返回畫布中的一個(gè) UIImage 內(nèi)容。

當(dāng)這個(gè)方法被調(diào)用的時(shí)候，UIImage 會(huì)通過(guò)代碼繪制。通常，非參數(shù)畫布（畫布不使用任何變量），UIImage 會(huì)通過(guò)樣式表類自動(dòng)緩存。這意味著，當(dāng)調(diào)用 UIImage的時(shí)候，設(shè)計(jì)師不必?fù)?dān)心性能。首先調(diào)用 UIImage 來(lái)繪制并緩存圖片的方法，隨后調(diào)用之返回緩存的圖片，這是非?？斓摹?/p>

當(dāng)使用 UIImage 生成方法的時(shí)候，設(shè)計(jì)師會(huì)經(jīng)常使用到兩個(gè)最好的方法：一個(gè)是設(shè)計(jì)師的設(shè)計(jì)是獨(dú)立的，設(shè)計(jì)師不必使用光柵圖片，但是性能和使用 PNG 資源是一樣的。此外，設(shè)計(jì)師還可以很容易的使用應(yīng)用樣式接口，來(lái)預(yù)計(jì) UIImages。

009

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

從 PaintCode 中導(dǎo)出樣式表類（Exporting StyleKit class from PaintCode）

在檢查器中，選擇樣式表選項(xiàng)卡并且點(diǎn)擊大藍(lán)色導(dǎo)出按鈕，就能夠從 PaintCode 中導(dǎo)出樣式表類。

010

之后一個(gè)導(dǎo)出表單將會(huì)出現(xiàn)。設(shè)計(jì)師也可以使用 Command + E 快捷鍵使表單顯示出來(lái)。在導(dǎo)出表達(dá)中，確保選擇樣式表選項(xiàng)卡的同時(shí)，點(diǎn)擊 導(dǎo)出 按鈕。然后，選擇要導(dǎo)出的樣式表類。通常，將會(huì)導(dǎo)出兩個(gè)文件夾：一個(gè)是實(shí)現(xiàn)文件，一個(gè)是頭部文件。如果 PaintCode 文檔使用了光柵圖片，設(shè)計(jì)師也能夠選擇并導(dǎo)出這些圖片。

011

一旦樣式表曾經(jīng)被導(dǎo)出過(guò)，再導(dǎo)出就會(huì)變得非常容易了。單擊 Command + R 或者從主菜單中選擇 文件 ? 再次導(dǎo)出，就能夠再次導(dǎo)出了。然而，當(dāng)設(shè)計(jì)師退出 PaintCode 后重新啟動(dòng)的時(shí)候，會(huì)再次提供給設(shè)計(jì)師導(dǎo)出文件夾。

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

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

#import?“YourStyleKitName.h”

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

最后，簡(jiǎn)單調(diào)用這些類方法，來(lái)使用樣式表，像這樣：

[YourStyleKitName?drawYourCanvas];

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

UIColor*?color?= YourStyleKitName.yourColor;

其他庫(kù)項(xiàng)目與漸變和陰影行為的展現(xiàn)方式一致。

注意當(dāng)程序化地使用樣式表的時(shí)候，設(shè)計(jì)師不需要實(shí)例化樣式表類，訪問(wèn)設(shè)計(jì)以及庫(kù)項(xiàng)目的所有方法都是類方法，這意味著設(shè)計(jì)師調(diào)用的這些方法，不是類的實(shí)例。

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

UIImage 生成畫布（UIImage-generating canvases）

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

012

設(shè)計(jì)師也可以指定 UIImage 的調(diào)整行為（特別是，是否通過(guò)定義中心區(qū)來(lái)平鋪活著拉伸 UIImage）。

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

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

013

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

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

如果設(shè)計(jì)師在 XIBs 或者 Storyboards 中產(chǎn)生實(shí)例對(duì)象，可以連接通過(guò)畫布到其他對(duì)象生成的 IBoutletCollection。

014

在 XIB 或者 Storyboard 中添加實(shí)例對(duì)象后，不要忘記調(diào)整他們的類到樣式表類中。

015

樣式表將會(huì)自動(dòng)調(diào)用設(shè)計(jì)師添加到 IBOutletCollection（又稱為目標(biāo)） 中的 setImage 方法，并利用畫布生成帶參數(shù)的 UIImage。

設(shè)計(jì)師通過(guò)它們的 setImage 方法，能夠把這些應(yīng)用到將在 PaintCode 中設(shè)計(jì)的圖片，分配到對(duì)象中。在畫布設(shè)置中，依然能夠指定 setSelectedImage 方法替代前面的方法。

當(dāng)設(shè)計(jì)師想自定義像 UITabBarItem 一樣可視界面對(duì)象的時(shí)候，IBOutletCollection 是非常有用的。

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

016

注：用 UITabBarItem 進(jìn)行設(shè)計(jì)，設(shè)計(jì)師必須設(shè)置它的標(biāo)識(shí)符來(lái)“定制”在 Xcode中的 Interface Builder。

重要：請(qǐng)注意所有的樣式表方法都是類方法。這就意味著設(shè)計(jì)師通常不需要將樣式表變?yōu)閷?shí)例后在使用。事實(shí)上，設(shè)計(jì)師只需要?jiǎng)?chuàng)建一個(gè)實(shí)例就能夠使用IBOutletCollection。

樣式表設(shè)置（StyleKit Setting）

點(diǎn)擊樣式表選項(xiàng)卡下面的工具欄，就能夠進(jìn)入樣式表設(shè)置。在右邊的檢查器中會(huì)出出現(xiàn)樣式表設(shè)置。設(shè)計(jì)師可以指定：

生成樣式表類的名稱

  • 項(xiàng)目名稱
  • 設(shè)計(jì)師名稱
  • 企業(yè)名稱

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

017

PaintCode 用戶操作指南系列文章

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

PaintCode 用戶操作指南（庫(kù)篇）

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

PaintCode 用戶操作指南（畫布和選項(xiàng)卡）

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

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

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

PaintCode 用戶操作指南（符號(hào)篇）

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

 

本作品由人人都是產(chǎn)品經(jīng)理特邀專欄作家@鄭幾塊 翻譯并獨(dú)家授權(quán)發(fā)布，未經(jīng)許可禁止轉(zhuǎn)載

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
鄭幾塊Yechiel
一個(gè)pm
125篇作品 1295948總閱讀量
01-043654 瀏覽
業(yè)績(jī)下滑、客源減少，零售商超如何借會(huì)員營(yíng)銷翻盤？丨專題研究
06-193933 瀏覽
上億網(wǎng)友轟轟烈烈參與抵制“美國(guó)貼吧”的資本家，然后失敗
01-094983 瀏覽
干貨！2023營(yíng)銷應(yīng)該提前避開(kāi)哪些坑？
05-205244 瀏覽
Billboard再改榜單規(guī)則，“捆綁銷售”為何取締后又回歸？
07-313404 瀏覽
我又掉進(jìn)了“自動(dòng)續(xù)費(fèi)”的陷阱
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論，等你發(fā)揮！