2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

PaintCode?是一個(gè)能夠讓你像Photoshop一樣去設(shè)計(jì)你的用戶界面的軟件 – 但是它并不是僅僅保存一張圖片當(dāng)作資源讓你來(lái)使用，它能夠?yàn)槟闵?CoreGraphic 源碼直接使用到View的繪制中.
可以簡(jiǎn)單地說(shuō)，我們看重的是下面幾點(diǎn)：

• 節(jié)省了開(kāi)發(fā)時(shí)間。?如果一行一行的去寫(xiě) Core Graphics 代碼，絕對(duì)會(huì)比用 PaintCode多很多時(shí)間。 而時(shí)間就是金錢(qián)！
• 減少了程序包大小。?用代碼去繪制各種view，可以讓你不再去添加圖片資源，減少了資源包大小。
• 讓它能做更動(dòng)態(tài)的改變。.?最后，我們可以做更多相比于使用圖片做不到的事情，比如：可以在程序運(yùn)行時(shí)輕松的改變控件的顏色。

深入： 這篇教程實(shí)際基于我們收到的一些 PaintCode 的使用反饋來(lái)寫(xiě)的。 但是， 教程里的的所有意見(jiàn)和建議絕對(duì)沒(méi)有一點(diǎn)瞎掰，絕對(duì)原創(chuàng)。
想要盡可能的利用學(xué)習(xí)這篇教程，大家至少知道一點(diǎn)iOS開(kāi)發(fā)。 并且，懂一些 Core Graphics知識(shí)會(huì)更好（不是100%要求）。 如果大家從來(lái)沒(méi)聽(tīng)說(shuō)過(guò) Core Graphics，真心推薦去看看?Core Graphics系列教程?。
廢話不多說(shuō)，切入正題吧！

準(zhǔn)備開(kāi)始

要學(xué)習(xí)這一系列的PaintCode 教程， 首先我們需要有個(gè) PaintCode 軟件。大家可以在這里下載?試用版，?或者從?Mac App Store購(gòu)買(mǎi)完整版。

盡管這個(gè)app還是算比較貴的，但是就我看來(lái)，他在生產(chǎn)中的能發(fā)揮的價(jià)值完全能物超所值。 如果大家還不確定， 下載一個(gè)試用版在這個(gè)教程里試試吧！

創(chuàng)建第一個(gè)動(dòng)態(tài)按鈕

在敲任何代碼之前，我們將會(huì)使用 PaintCode 來(lái)設(shè)計(jì)一個(gè)全新的按鈕。
打開(kāi) PaintCode，選擇?FileSave，然后把這個(gè)項(xiàng)目命名為?DynamicButton.。這樣的話我們就可以在進(jìn)行這個(gè)教程的時(shí)候時(shí)時(shí)的保存了。
點(diǎn)擊屏幕右下的Canvas?按鈕， 然后把畫(huà)布大小設(shè)置為寬?480?高?150?pixels，如下圖所示：

然后通過(guò)設(shè)置?Underlay color?的RGB值為?50 50 50來(lái)吧畫(huà)布的顏色改為淺灰色，如下：

注意:?我們默認(rèn)是在非高清畫(huà)布上工作，如果大家想看高清的效果，點(diǎn)擊Canvas按鈕邊上的?Retina按鈕。這個(gè)按鈕可以讓你在高清和非高清之間切換。

現(xiàn)在選中工具欄里的Round Rect?按鈕，然后在畫(huà)布里拖出一個(gè)方形來(lái)。
我們能看到，當(dāng)我們?cè)诋?huà)布里選中一個(gè)形狀的時(shí)候，左邊會(huì)出現(xiàn)這個(gè)形狀的所有屬性。確保選中了剛才的這個(gè)方形，然后把它的屬性修改為如下：

• X: 4
• Y: 4
• Width: 473
• Height: 41

接下來(lái)，為了改變按鈕的顏色，我們需要設(shè)置它的Fill值。
在左邊的屬性欄里， 點(diǎn)擊?Fill,，在彈出的選項(xiàng)里選擇?Add New Gradient，然后命名為?ButtonGradient?，F(xiàn)在， 點(diǎn)擊?左下的 color stop。?這些在顏色區(qū)域底部圓形的顏色選取點(diǎn)是用來(lái)給漸變提供所需參數(shù)的。
接著，選著右下方的調(diào)色盤(pán)，然后RGB輸入255 0 0，如下所示：

再次點(diǎn)擊調(diào)色盤(pán)按鈕來(lái)關(guān)掉它。
現(xiàn)在， 用同樣的辦法把右邊的顏色選取點(diǎn)的 RGB 改為?112 1 0?，如下：

PaintCode 讓你能夠去給每個(gè)使用在形狀上的顏色命名，因?yàn)樗鼈円酝瑯拥拿殖霈F(xiàn)在代碼里。 如果界面下方?jīng)]有代碼窗口，選擇?View > Code?來(lái)打開(kāi)它。 下面圖片里高亮的那兩行應(yīng)該就是剛才我們創(chuàng)建的2個(gè)顏色。

為了更好的找到這些顏色，我們最好給他們一個(gè)描述性較高的名字。
選中?Colors?選擇欄，在左邊欄下面找到并雙擊?Fill Color。在彈窗里把它的名字改為?ButtonColorDark，如下所示：

同理把Stroke Color?名字改為?ButtonColorLight。
現(xiàn)在回到位于中間的形狀屬性欄，選擇?Stroke?下來(lái)框里的?System Colors > Common Colors > BlackColor，如下圖所示，把描邊顏色改為黑色。

Increase the?Width?parameter to?2?under the?Stroke?sub-section, as so:

現(xiàn)在，我們要給按鈕加一個(gè)為發(fā)光 ，選擇?Add New Shadow…?在Fill的下拉框里選擇?Outer Shadow,如下所示：

像上面的按鈕一樣給這個(gè)陰影一個(gè)好的名字，把它名字改為?OuterGlow。?接下來(lái)， 選中?Color邊上的下拉框，然后在顏色選取框里選著白色框，?打開(kāi)邊上的那個(gè)顏色調(diào)整按鈕
把陰影偏移和陰影大小調(diào)整為下圖一樣：

切換到?Colors?選項(xiàng)卡下面然后把?Glow?改為?InnerGlowColor。
接著，在Add New Shadow的下拉框里面給?Inner Shadow?加一個(gè)內(nèi)高光。把這個(gè)高光命名為Highlight，?顏色設(shè)置為?白色，透明度為?130，?然后把offsets?和?blur radius設(shè)置為如下所示：

根據(jù)前面的教程。這個(gè)顏色的名字可能已經(jīng)是默認(rèn)的?Shadow Color 2?，如果不一樣，就把它改成這個(gè)名字。
現(xiàn)在，我們的按鈕應(yīng)該和下面一樣了：

到這個(gè)時(shí)候，我們的按鈕已經(jīng)看起來(lái)挺不錯(cuò)的了，但是他的大小是定死了的。要讓它可以隨意的改變大小，我們需要給他加一個(gè)frame。 我們會(huì)在代碼里改變它的大小，接下來(lái)我們會(huì)在PaintCode里面設(shè)置frame，這樣可以讓里面的所有東西都是可變大小的。

給按鈕加Frame

在頂部工具欄里選擇?Frame?，然后畫(huà)一個(gè)框包住按鈕。把這個(gè)frame的屬性設(shè)置為如下：

同時(shí)選中Frame?和?Rounded Rectangle，?按下?Option-Command-G?組合鍵來(lái)把它們放在一個(gè)group里。 或者， 我們可以選擇去按菜單里的?Selection >?Group來(lái)達(dá)到同樣的效果。?最后吧這個(gè)group米命名為Button。
我們現(xiàn)在可以看到在左邊的邊欄最頂上，可能看到button group 和它包括2個(gè)元素，如下所示：

在左邊面板里選中?Rounded Rectangle。?找到設(shè)置這個(gè)形狀大小限定的區(qū)域 – 它是在坐標(biāo)設(shè)置左邊的一個(gè)方框， 里面包含了幾個(gè)桿狀，彈簧狀的橫條。

我們現(xiàn)在需要這個(gè)按鈕能夠水平的豎直的去改變大小，同時(shí)又能保持水平中心不變。 所以我們就要吧外部的約束設(shè)置為直的(固定了大小)， 然后底部應(yīng)該設(shè)置為彈簧條(能夠隨意的改變大小)。 這樣就能讓按鈕保持在水平中心對(duì)齊了。
但是，為了能讓按鈕能隨意的改變大小和frame一樣，我們需要吧方框里面的桿都改成彈簧。
我們僅僅需要點(diǎn)一下這些桿，就可以讓他們?cè)谥睏U和彈簧之間切換。
當(dāng)大家完成了修改約束，樣子應(yīng)該如下所示：

到這里，已經(jīng)完成了大部分工作了！ 現(xiàn)在我們選中按鈕邊上的?Frame，然后隨便把這個(gè)按鈕左右上下拖動(dòng)試試，它的樣子大概如下圖：

現(xiàn)在PaintCode里的畫(huà)圖這部分的工作已經(jīng)完成 —我們接下來(lái)要開(kāi)始把它加入xcode里了。

加入iOS項(xiàng)目里

在完成了我們項(xiàng)目所用到的按鈕以后— 當(dāng)然，我們沒(méi)有寫(xiě)一行代碼！別急，現(xiàn)在卷起袖口準(zhǔn)備開(kāi)始擼代碼吧！
我已經(jīng)為大家準(zhǔn)備了一個(gè)用開(kāi)測(cè)試這個(gè)按鈕的起始項(xiàng)目。下載這個(gè)起始項(xiàng)目，?解壓，然后在xcode里打開(kāi)。看看里面有什么吧。

注意：?這個(gè)項(xiàng)目里的storyboard是關(guān)掉了Autolayout的。并不是每個(gè)項(xiàng)目都需要這樣，但是在這里，我們更偏向于使用springs和struts約束。

這是一個(gè)Tabbar 應(yīng)用，里面包含了3個(gè)view controller，他們分別是為這個(gè)系列教程每次創(chuàng)建的控件準(zhǔn)備的。 在這次的 PaintCode 教程里，我們將會(huì)使用?ButtonViewController?來(lái)展示我們的按鈕。
在?Classes > Views下面有一個(gè)空文件夾。這次，?我們?cè)谶@里面創(chuàng)建自己的類(lèi)。我們會(huì)繼承一個(gè)現(xiàn)有的控件，然后去改變他的繪制代碼，而不是完全的用一個(gè)空UIView來(lái)實(shí)現(xiàn)。
而在這個(gè)教程里，我們繼承UIButton。讓我們開(kāi)始吧！

創(chuàng)建按鈕

在?Classes?組下面， 右鍵?Views?組。選擇?NewFile…?然后創(chuàng)建一個(gè)?iOSCocoa TouchObjective-C class模板，把這個(gè)類(lèi)命名為?ButtonView，然后繼承自?UIButton。
這個(gè)類(lèi)將會(huì)使用我們?cè)?PaintCode里創(chuàng)建的繪制代碼。
現(xiàn)在我們做一些準(zhǔn)備工作， 打開(kāi)?ButtonView.m，刪除?initWithFrame:?方法，然后反注釋?drawRect:。如下所示：

[objc]? view plain copy

#import?"ButtonView.h"??

@implementation?ButtonView??

-?(void)drawRect:(CGRect)rect??

{??

????//?Drawing?code??

}??

@end ??

drawRect:?這里就是我們施展魔法的地方 – 這里我們會(huì)把PaintCode生成的代碼加上。 如果你不熟悉?drawRect:甚至不知道它是做什么的，最好先去看看我們的?Core Graphics 系列教程吧。
回到 PaintCode 然后找到?Code View。如果沒(méi)有找到， 選擇?View > Code?來(lái)打開(kāi)這個(gè)面板。找到代碼生成配置模塊：

把平臺(tái)設(shè)置為?iOS > Objective-C，系統(tǒng)版本設(shè)置為?iOS 5+，?默認(rèn)原點(diǎn)為Default Origin，內(nèi)存管理為?ARC。如果這是你第一次使用 PaintCode — 或者你從來(lái)沒(méi)弄過(guò)這些東西 — PaintCode已經(jīng)幫你做了完好的內(nèi)存管理了。
復(fù)制并且把這些代碼從 PaintCode里粘貼到?drawRect:里面。這個(gè)方法應(yīng)該和下圖一樣了：

[objc]? view plain copy

-?(void)drawRect:(CGRect)rect??

{??

?????General?Declarations??

????CGColorSpaceRef?colorSpace?=?CGColorSpaceCreateDeviceRGB();??

????CGContextRef?context?=?UIGraphicsGetCurrentContext();??

???

?????Color?Declarations??

????UIColor*?buttonColorDark?=?[UIColor?colorWithRed:?0.439?green:?0.004?blue:?0?alpha:?1];??

????UIColor*?buttonColorLight?=?[UIColor?colorWithRed:?1?green:?0?blue:?0?alpha:?1];??

????UIColor*?innerGlowColor?=?[UIColor?colorWithRed:?1?green:?1?blue:?1?alpha:?0.502];??

????UIColor*?shadowColor2?=?[UIColor?colorWithRed:?1?green:?1?blue:?1?alpha:?0.51];??

???

?????Gradient?Declarations??

????NSArray*?buttonGradientColors?=?[NSArray?arrayWithObjects:??

?????????????????????????????????????(id)buttonColorLight.CGColor,??

?????????????????????????????????????(id)buttonColorDark.CGColor,?nil?nil];??

????CGFloat?buttonGradientLocations[]?=?{0,?1};??

????CGGradientRef?buttonGradient?=?CGGradientCreateWithColors(colorSpace,?(__bridge?CFArrayRef)buttonGradientColors,?buttonGradientLocations);??

???

?????Shadow?Declarations??

????UIColor*?outerGlow?=?innerGlowColor;??

????CGSize?outerGlowOffset?=?CGSizeMake(0.1,?-0.1);??

????CGFloat?outerGlowBlurRadius?=?3;??

????UIColor*?highlight?=?shadowColor2;??

????CGSize?highlightOffset?=?CGSizeMake(0.1,?2.1);??

????CGFloat?highlightBlurRadius?=?2;??

???

?????Frames??

????CGRect?frame?=?CGRectMake(0,?0,?480,?49);??

???

?????Button??

????{??

?????????Rounded?Rectangle?Drawing??

????????CGRect?roundedRectangleRect?=?CGRectMake(CGRectGetMinX(frame)?+?4,?CGRectGetMinY(frame)?+?4,?CGRectGetWidth(frame)?-?7,?41);??

????????UIBezierPath*?roundedRectanglePath?=?[UIBezierPath?bezierPathWithRoundedRect:?roundedRectangleRect?cornerRadius:?6];??

????????CGContextSaveGState(context);??

????????CGContextSetShadowWithColor(context,?outerGlowOffset,?outerGlowBlurRadius,?outerGlow.CGColor);??

????????CGContextBeginTransparencyLayer(context,?NULL);??

????????[roundedRectanglePath?addClip];??

????????CGContextDrawLinearGradient(context,?buttonGradient,??

????????????????????????????????????CGPointMake(CGRectGetMidX(roundedRectangleRect),?CGRectGetMinY(roundedRectangleRect)),??

????????????????????????????????????CGPointMake(CGRectGetMidX(roundedRectangleRect),?CGRectGetMaxY(roundedRectangleRect)),??

????????????????????????????????????0);??

????????CGContextEndTransparencyLayer(context);??

???

????????//?Rounded?Rectangle?Inner?Shadow??

????????CGRect?roundedRectangleBorderRect?=?CGRectInset([roundedRectanglePath?bounds],?-highlightBlurRadius,?-highlightBlurRadius);??

????????roundedRectangleBorderRect?=?CGRectOffset(roundedRectangleBorderRect,?-highlightOffset.width,?-highlightOffset.height);??

????????roundedRectangleBorderRect?=?CGRectInset(CGRectUnion(roundedRectangleBorderRect,?[roundedRectanglePath?bounds]),?-1,?-1);??

???

????????UIBezierPath*?roundedRectangleNegativePath?=?[UIBezierPath?bezierPathWithRect:?roundedRectangleBorderRect];??

????????[roundedRectangleNegativePath?appendPath:?roundedRectanglePath];??

????????roundedRectangleNegativePath.usesEvenOddFillRule?=?YES;??

???

????????CGContextSaveGState(context);??

????????{??

????????????CGFloat?xOffset?=?highlightOffset.width?+?round(roundedRectangleBorderRect.size.width);??

????????????CGFloat?yOffset?=?highlightOffset.height;??

????????????CGContextSetShadowWithColor(context,??

????????????????????????????????????????CGSizeMake(xOffset?+?copysign(0.1,?xOffset),?yOffset?+?copysign(0.1,?yOffset)),??

????????????????????????????????????????highlightBlurRadius,??

????????????????????????????????????????highlight.CGColor);??

???

????????????[roundedRectanglePath?addClip];??

????????????CGAffineTransform?transform?=?CGAffineTransformMakeTranslation(-round(roundedRectangleBorderRect.size.width),?0);??

????????????[roundedRectangleNegativePath?applyTransform:?transform];??

????????????[[UIColor?grayColor]?setFill];??

????????????[roundedRectangleNegativePath?fill];??

????????}??

????????CGContextRestoreGState(context);??

???

????????CGContextRestoreGState(context);??

???

????????[[UIColor?blackColor]?setStroke];??

????????roundedRectanglePath.lineWidth?=?2;??

????????[roundedRectanglePath?stroke];??

????}??

???

?????Cleanup??

????CGGradientRelease(buttonGradient);??

????CGColorSpaceRelease(colorSpace);??????

}??

如果大家仔細(xì)的瀏覽了代碼，會(huì)發(fā)現(xiàn)它是用Core Graphics來(lái)繪制的。 或多或少的方法大家可能都沒(méi)見(jiàn)過(guò)，但是它們并不難于去理解。 并且，這也是我們使用 PaintCode 的原因之一；為了省掉學(xué)習(xí) Core Graphics并且花更少的時(shí)間去在那里慢慢的調(diào)試?yán)L制代碼！ :]

注意：?大家暫時(shí)不用去太擔(dān)心?drawRect:?里面代碼的縮進(jìn)和語(yǔ)法。我們等會(huì)兒會(huì)再回來(lái)，并且做一些修改 ，包括把語(yǔ)法改為 moden Objective-C。

現(xiàn)在該來(lái)測(cè)試我們的按鈕了。
在 Project Navigator 找到我們的storyboard 然后選中?ButtonViewController。在Object?Library里拖出來(lái)一個(gè)View?然后把它的?X?和?Y坐標(biāo)為?20，?35。然后， 把它的?Width?和?Height?設(shè)置為?280，41。
最后， 把它的?Autosizing?設(shè)置 修改為只能水平擴(kuò)張，如下所示：

切換到Identity?Inspector?然后把它的類(lèi)名設(shè)置為?ButtonView。

注意：大家可能有疑問(wèn)為什么在storyboard里面是一個(gè)?UIView?， 但是?ButtonView又繼承與UIButton。?原因很簡(jiǎn)單?UIButton?它繼承于?UIView因此一個(gè)按鈕任然是一個(gè)?view。

在這次 PaintCode 教程的后部分 ，我們會(huì)讓它和真正的按鈕一樣起作用。畢竟 —他繼承了UIButton。

是時(shí)候檢測(cè)我們漂亮的新按鈕了！
點(diǎn)擊?Run?看看我們的按鈕什么樣的吧：

額…按鈕貌似被砍掉了一塊，怎么回事兒？
現(xiàn)在找到ButtonView.m里的?drawRect:：

[objc]? view plain copy

-?(void)drawRect:(CGRect)rect??

{??

????...??

?????Frames??

????CGRect?frame?=?CGRectMake(0,?0,?480,?49);??

???

????...??

}??

原來(lái)！！！！這個(gè)按鈕的frame是定死了的。我們想要的是一個(gè)可以動(dòng)態(tài)改變大小的按鈕 — 并且能夠適應(yīng)我們給它設(shè)置的大小。
這個(gè)問(wèn)題很簡(jiǎn)單，修改設(shè)置?frame的那行代碼為如下：

[objc]? view plain copy

-?(void)drawRect:(CGRect)rect??

{??

????...??

?????Frames??

????CGRect?frame?=?rect;??

???

????...??

}??

上面那段代碼是把view的frame設(shè)置為繪制的frame的大小。
點(diǎn)擊Run，讓我們?cè)賮?lái)一發(fā)！

耶！按鈕的繪制終于和我們想要的一樣了。旋轉(zhuǎn)模擬器(或者設(shè)備) 我們會(huì)看到按鈕和我們期望的一樣保持水平位置，改變著寬。
我們已經(jīng)完成了大部分了 — 但是我們?cè)踝尣拍茏屗兊酶鼊?dòng)態(tài)呢？

動(dòng)態(tài)的設(shè)置按鈕屬性

動(dòng)態(tài)的控制按鈕大小是挺不錯(cuò)的 —但是現(xiàn)在，我們要做一件更神奇的事情；在?ButtonViewController?里面加一些滑動(dòng)條來(lái)控制按鈕的RGB值。
回到storyboard，拖3個(gè)Slider 并且把它們放在按鈕下面。 在?Size Inspector里面，?把3個(gè)slider的?Autosizingwidget 設(shè)置為如下所示：

大家還可以把按鈕往下移一點(diǎn)，然后放一個(gè)label 寫(xiě)著?“Tap Me”，這樣的話可以讓你的用戶知道按鈕是可以點(diǎn)擊的。Storyboard應(yīng)該如下圖一樣的：

找到Attributes?Inspector，把slider的?Min Track Tint?的顏色設(shè)置為如下的RGB值：

• Top slider:?R:255 G:0 B:0
• Middle slider:?R:0 G:255 B:0
• Bottom slider:?R:0 G:0 B:255

我們的slider應(yīng)該和下面的差不多了：

注意:?有的時(shí)候slider的背景色也會(huì)隨著Min Tint color 的改變而改變。這是一個(gè)xcode的bug，我們可以直接吧slider的背景色設(shè)置為默認(rèn)的。

然后找到?ButtonViewController.m，在頂部加入下面的代碼：

[objc]? view plain copy

#import?"ButtonView.h"??

@interface ?ButtonViewController?()??

@property?(weak,?nonatomic)?IBOutlet?UISlider?*blueSlider;??

@property?(weak,?nonatomic)?IBOutlet?ButtonView?*buttonView;??

@property?(weak,?nonatomic)?IBOutlet?UISlider?*greenSlider;??

@property?(weak,?nonatomic)?IBOutlet?UISlider?*redSlider;??

@end??

把?buttonView?連接到我們?cè)O(shè)置的那個(gè)?UIView?上，然后把3個(gè)?UISlider?和storyboard里面各自對(duì)應(yīng)的連接上。如果大家還不知道怎么連接view和outlet，可以去看看我們的?How To Create a Simple iPhone App?系列教程。
為了能讓按鈕的顏色隨著slider的拖動(dòng)而改變， 我們的?ButtonView?需要隨著slider 去更新。
找到?ButtonView.h?然后把下面3行加入 @interface 和 @end 之間：

[objc]? view plain copy

@property?(assign,?nonatomic)?CGFloat?blueColor;??

@property?(assign,?nonatomic)?CGFloat?greenColor;??

@property?(assign,?nonatomic)?CGFloat?redColor;??

這些是儲(chǔ)存按鈕RGB值的變量。
然后切換到?ButtonView.m?，找到?drawRect:。我們會(huì)注意到這段?Gradient Declarations?用的是舊的NSArray代碼。為了保持良好的代碼風(fēng)格，把?Gradient Declarations?那行替換成如下：

[objc]? view plain copy

NSArray?*buttonGradientColors?=?@[(id)buttonColorLight.CGColor,?(id)buttonColorDark.CGColor];??

然后，把所有帶 “Color Declarations” 注釋的代碼替換成如下：

[objc]? view plain copy

-(void)drawRect:(CGRect)rect?{??

????...??

????//?1??

????UIColor?*buttonColorLight?=?[UIColor?colorWithRed:self.redColor?green:self.greenColor?blue:self.blueColor?alpha:?1];??

???

????//?2??

????if?(self.state?==?UIControlStateHighlighted)?{??

????????buttonColorLight?=?[UIColor?colorWithRed:self.redColor?green:self.greenColor?blue:self.blueColor?alpha:0.5];??

????}??

???

????//?3??

????CGFloat?buttonColorLightRGBA[4];??

????[buttonColorLight?getRed:&buttonColorLightRGBA[0]??

???????????????????????green:&buttonColorLightRGBA[1]??

????????????????????????blue:&buttonColorLightRGBA[2]??

???????????????????????alpha:&buttonColorLightRGBA[3]];??

???

????//?4??

????UIColor?*buttonColorDark?=?[UIColor?colorWithRed:(buttonColorLightRGBA[0]?*?0.5)??

???????????????????????????????????????????????green:(buttonColorLightRGBA[1]?*?0.5)??

????????????????????????????????????????????????blue:(buttonColorLightRGBA[2]?*?0.5)??

???????????????????????????????????????????????alpha:(buttonColorLightRGBA[3]?*?0.5?+?0.5)];??

????//?5??

????UIColor?*innerGlowColor?=?[UIColor?colorWithRed:1?green:1?blue:1?alpha:0.53];??

????UIColor?*shadowColor2?=?[UIColor?colorWithRed:1?green:1?blue:1?alpha:0.51];??

???

????...??

}??

我們?cè)谶@里具體做了：

申明一個(gè)局部?UIColor?變量作為按鈕的淺色 (記住，我們?cè)跐u變編輯器里設(shè)置的那個(gè))，但是現(xiàn)在我們使用的是來(lái)自slider的RGB值。

如果用戶安下了按鈕，把按鈕的顏色的alpha降低50%， 這時(shí)候按鈕的狀態(tài)是?UIControlStateHighlighted。這能在按下按鈕時(shí)提供用戶一些視覺(jué)上的反饋。

把按鈕的rgb值儲(chǔ)存到一個(gè)CGFloat的數(shù)組里。

基于淺色創(chuàng)建按鈕的深色 (記住，我們?cè)跐u變編輯器里設(shè)置的那個(gè)) 。

基于一些固定值創(chuàng)建內(nèi)發(fā)光和陰影。

在這里我們最好給按鈕一個(gè)初始顏色。 因?yàn)槲覀冇玫氖荢toryboard，所以我們需要重載?initWithCoder:?(在ButtonView.m) 來(lái)實(shí)現(xiàn)：

[objc]? view plain copy

-(id)initWithCoder:(NSCoder?*)coder?{??

????if?(self?=?[super?initWithCoder:coder])?{??

????????self.redColor?=?1.0f;??

????????self.greenColor?=?0.0f;??

????????self.blueColor?=?0.0f;??

????????self.contentMode?=?UIViewContentModeRedraw;??

????}??

???

????return?self;??

}??

這個(gè)設(shè)置把view的內(nèi)容模式設(shè)置為了?UIViewContentModeRedraw，并且讓按鈕初始的時(shí)候是紅色的。

注意：?如果大家好奇為什么重載?initWithCoder:?而不是?initWithFrame:，?這是因?yàn)閕nitWithFrame:是用來(lái)在代碼里手動(dòng)生成view的， 然而?initWithCoder:?是用來(lái)初始化一個(gè)從Nib或者Storyboard里面生成的view的。

在我們開(kāi)始測(cè)試之前，還有最后一件事做。找到?ButtonViewController.m?然后吧?viewDidLoad?替換成如下：

[objc]? view plain copy

-(void)viewDidLoad?{??

????[super?viewDidLoad];??

???

????[self.redSlider?setValue:self.buttonView.redColor];??

????[self.greenSlider?setValue:self.buttonView.greenColor];??

????[self.blueSlider?setValue:self.buttonView.blueColor];??

}??

上面的代碼把每個(gè)slider的顏色設(shè)置為按鈕各個(gè)RGB通道的值。
編譯運(yùn)行， 試試滑動(dòng)這些slider，如下所示：

等下！！為什么沒(méi)有反應(yīng)！
我們確實(shí)連接了slider， 但是現(xiàn)在在?ButtonViewController?沒(méi)有任何方法去響應(yīng)slider值的改變。我們需要加一些?IBAction?代碼來(lái)處理這些值。

響應(yīng)事件

響應(yīng)按鈕和slider的事件其實(shí)很簡(jiǎn)單。
在ButtonViewController.m里加入如下代碼：

[objc]? view plain copy

-(IBAction)sliderValueChanged:(UISlider?*)slider?{??

????if?(slider?==?self.redSlider)?{??

????????self.buttonView.redColor?=?self.redSlider.value;??

????}?else?if?(slider?==?self.greenSlider)?{??

????????self.buttonView.greenColor?=?self.greenSlider.value;??

????}?else?if?(slider?==?self.blueSlider)?{??

????????self.buttonView.blueColor?=?self.blueSlider.value;??

????}??

???

????[self.buttonView?setNeedsDisplay];??

}??

上面的能收到一個(gè)值改變了的slider的指針。 我們通過(guò)和屬性里聲明的slider比較來(lái)確定具體修改哪個(gè)slider的值。
我們可以注意到，在代碼的最后我們調(diào)用了setNeedsDisplay?來(lái)讓按鈕能夠更新到最新的顏色。
現(xiàn)在回到Storyboard， 依次把slider的?Value Changed?event 和ButtonViewController里的?sliderValueChanged:?連接起來(lái)，如下所示：

Build and run your project again, and try once more to move the sliders around to change the button’s color, as below:

叼炫酷！現(xiàn)在我們的按鈕，不經(jīng)能任意改變大小！還能隨便的改變顏色了！
現(xiàn)在我們來(lái)試試按鈕按下有啥反應(yīng)。
額~~~ 啥都沒(méi)發(fā)生！ 按鈕并沒(méi)有高亮來(lái)表示按下，也沒(méi)有任何提示你的信用卡剛被劃掉了99.99$. (開(kāi)個(gè)玩笑！ :])
我們還沒(méi)有給按鈕連接事件 — 接下來(lái)我們就開(kāi)始吧！

最后的點(diǎn)擊

回到?ButtonView.m?然后加入下面的方法：

[objc]? view plain copy

-(void)setEnabled:(BOOL)enabled?{??

????[super?setEnabled:enabled];??

????[self?setNeedsDisplay];??

}??

-(void)setHighlighted:(BOOL)value?{??

????[super?setHighlighted:value];??

????[self?setNeedsDisplay];??

}??

-(void)setSelected:(BOOL)value?{??

????[super?setSelected:value];??

????[self?setNeedsDisplay];??

}??

上面的代碼是讓按鈕在 enabled 和 disabled，selected 和 unselected，highlighted 或者 unhighlighted?的時(shí)候能夠重新繪制一次。 這是為了讓我們能看到具體的改變，當(dāng)我們按下按鈕時(shí)候。
接著，把下面的代碼加進(jìn)ButtonViewController.m：

[objc]? view plain copy

-(IBAction)buttonTapped:(UIButton?*)button?{??

????ButtonView?*buttonView?=?(ButtonView?*)button;??

???

????NSString?*messageString?=?[NSString?stringWithFormat:@"Red:?%fnGreen:?%fnBlue:?%fn?Alpha:?%f",??

???????????????????????????????buttonView.redColor,??

???????????????????????????????buttonView.greenColor,??

???????????????????????????????buttonView.blueColor,??

???????????????????????????????buttonView.alpha];??

???

????UIAlertView?*alertView?=?[[UIAlertView?alloc]?initWithTitle:@"Button?Colors"??

????????????????????????????????????????????????????????message:messageString??

???????????????????????????????????????????????????????delegate:nil??

??????????????????????????????????????????????cancelButtonTitle:@"Dismiss"??

??????????????????????????????????????????????otherButtonTitles:nil];??

????[alertView?show];??

}??

這個(gè)方法的作用是在按鈕按下以后，彈出一個(gè)提醒框，顯示當(dāng)前的RGB和Alpha值。
在Storyboard里，把?Touch Up Inside?和這個(gè)方法聯(lián)系在一起。
最后在運(yùn)行一次程序，按下按鈕看看結(jié)果吧！ 應(yīng)該出現(xiàn)和下面一樣的畫(huà)面：

太棒了！ -一切都正常工作。

何去何從？

大家可以在這里下載所需的PaintCode文件，和相關(guān)的Xcode項(xiàng)目。
恭喜大家現(xiàn)在已經(jīng)掌握了大部分的PaintCode功能了。它能極大的縮短設(shè)計(jì)app調(diào)試UI的時(shí)間。
這個(gè)系列教程還剩下2部分；第二部分是教大家如何去創(chuàng)建一個(gè)自定義進(jìn)度條，第三部分是使用貝塞爾曲線繪制箭頭。
現(xiàn)在，我們還可以再給這個(gè)項(xiàng)目增加一下功能讓錦上添花：

• 自己慢慢的熟悉 PaintCode 的其他功能和特性。
• 增加字符串，陰影，以及更多的其他特效。
• 重寫(xiě)B(tài)uttonView里的?initWithFrame:?，這樣能讓你使用代碼生成動(dòng)態(tài)按鈕。
• 給?ButtonView?創(chuàng)建自己的初始化方法，讓我們能初始按鈕的顏色參數(shù)。

希望大家能喜歡這個(gè) PaintCode 教程，并且希望大家能繼續(xù)關(guān)注我們接下來(lái)的2部。接下來(lái)的加成將會(huì)越來(lái)越深入，并且會(huì)有一點(diǎn)的難度 — 但是我知道這對(duì)大家來(lái)說(shuō)是小菜一碟。

http://www.raywenderlich.com/36341/paintcode-tutorial-dynamic-buttons

轉(zhuǎn)載于:https://my.oschina.net/u/1244672/blog/602364

總結(jié)

以上是生活随笔為你收集整理的PaintCode 教程1：动态绘制按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。