PaintCode 教程1:动态绘制按钮
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:。如下所示:
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)該和下圖一樣了:
如果大家仔細(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::
原來(lái)!!!!這個(gè)按鈕的frame是定死了的。我們想要的是一個(gè)可以動(dòng)態(tài)改變大小的按鈕 — 并且能夠適應(yīng)我們給它設(shè)置的大小。
這個(gè)問(wèn)題很簡(jiǎn)單,修改設(shè)置?frame的那行代碼為如下:
上面那段代碼是把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 把?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 之間:
這些是儲(chǔ)存按鈕RGB值的變量。
然后切換到?ButtonView.m?,找到?drawRect:。我們會(huì)注意到這段?Gradient Declarations?用的是舊的NSArray代碼。為了保持良好的代碼風(fēng)格,把?Gradient Declarations?那行替換成如下:
然后,把所有帶 “Color Declarations” 注釋的代碼替換成如下:
[objc]? view plain copy我們?cè)谶@里具體做了:
在這里我們最好給按鈕一個(gè)初始顏色。 因?yàn)槲覀冇玫氖荢toryboard,所以我們需要重載?initWithCoder:?(在ButtonView.m) 來(lái)實(shí)現(xiàn):
[objc]? view plain copy這個(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 上面的代碼把每個(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里加入如下代碼:
上面的能收到一個(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 上面的代碼是讓按鈕在 enabled 和 disabled,selected 和 unselected,highlighted 或者 unhighlighted?的時(shí)候能夠重新繪制一次。 這是為了讓我們能看到具體的改變,當(dāng)我們按下按鈕時(shí)候。
接著,把下面的代碼加進(jìn)ButtonViewController.m:
這個(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)題。
- 上一篇: spring 的MAVEN配置
- 下一篇: “#”的迷雾