|
@小乖乖老爸 ：想提高設計還原度，盡可能縮小設計稿與完成品之間的差距嗎？來學編程吧！這個系列的文章忽略了很多設計師用不上的技能，直接給出UI設計師工作中能用上的編程知識，簡單易懂，一起來收！ 往期回顧： 一，點語法 vs Set方法能看到第四篇的，說明前面的你都能消化了。在開始進入今天的正題之前，先講兩個簡單的概念，「點語法」與「Set方法」。 舉個例子： Lily.hair = [UIColor RedColor]; [Lily setHair:[UIColor RedColor]]; 第一行是「點語法」，第二行是「Set方法」，這兩行代碼意思是一樣的，都是把Lily的頭發(fā)染成紅色。要是咱們不僅要染頭發(fā)，還要把指甲涂成藍色呢？ //點語法得用兩行 Lily.hair = [UIColor RedColor]; Lily.fingernail = [UIColor BlueColor]; //Set語法只用一行 [Lily setHair:[UIColor RedColor] andFingernail:[UIColor BlueColor]]; 看到差異了吧？總結一下，點語法的好處是寫起來簡單，讀起來也簡單。Set方法的好處是效率高，適用面廣。點語法的代碼都可以轉成Set方法，而Set方法的代碼未必能轉成點語法。 臺下有位同學說「我會了」。那你來造個句子吧，她靈機一動，答道： [myDream SetMyFather:@"馬云" andMyHusband:@"王思聰"]; 嗯，非常好，會舉一反三了，這也是我的夢想，請坐吧。 二、UIButton出場有兩種按鈕比較常見：第一種是按鈕有個背景色，文字居中，再加個圓角；第二種是在前一種的基礎上，多了個圖標，圖標在文字的左邊；我們先從簡單的第一種說起吧： 例子一： UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(20, 380, 160, 44)];
[myButton setTitle:@"按鈕的文字" forState:UIControlStateNormal];
[myButton.titleLabel setFont:[UIFont systemFontOfSize:17]];
[myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
//[myButton setBackgroundColor:[UIColor blueColor]];
[myButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal];
[myButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted];
[myButton.layer setMasksToBounds:YES];
[myButton.layer setCornerRadius:6];
[self.view addSubview:myButton];
三、代碼詳解別看到一大段代碼就暈啊，我們一句句來解釋。 1、賦值、坐標、尺寸（必選） UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(20, 380, 160, 44)]; 看過前兩篇的應該都知道什么意思了，不解釋了。 2、文字 [myButton setTitle:@"按鈕的文字" forState:UIControlStateNormal]; 這行代碼是設置按鈕上顯示的文字。這句話只能用Set方法來寫，不能轉成點語法，UIbutton好多屬性都是這樣，所以干脆就全用Set方法來寫啦，美觀一些。forState:UIControlStateNormal 是什么鬼？別急啊，先放一放，稍后再解釋。 3、文字的字體 [myButton.titleLabel setFont:[UIFont systemFontOfSize:17]]; 這句話初學者很容易寫錯成： \\ 以下錯誤的示范
[myButton setFont:[UIFont systemFontOfSize:17]];
[myButton setTitleFont:[UIFont systemFontOfSize:17]];
4、文字的顏色 [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
剛才已經碰到過一回forState:xxx 了，咱們來解釋解釋吧。按鈕有六種狀態(tài)，最常見的有四種：
上面兩行代碼意思是：設置按鈕在普通和高亮狀態(tài)下，文字都是白色的。如果不寫第二句，系統(tǒng)會在按鈕被點擊時，蓋上一層淡淡的黑色。 5、背景色或背景圖 [myButton setBackgroundColor:[UIColor blueColor]]; 這是設置背景顏色。 [myButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal];
[myButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted];
這是設置背景圖片。 需要注意的是，背景色是不支持按鈕狀態(tài)的，如果你不提前告訴工程師按鈕還有高亮狀態(tài)，他們就會用簡單的setBackgroundColor來做了。 在扁平風橫行的今天，按鈕大多是純色的了，很少再用漸變或者紋理什么的，本沒必要用圖片的。設計師要的效果，無非是普通狀態(tài)一個顏色，高亮狀態(tài)一個顏色。但要支持不同狀態(tài)，就得用setBackgroundImage，就非得用圖片才行。 從一個按鈕來看，工作量不大，但你考慮到整個app，多少按鈕，多少種尺寸?。∧堑米龆嗌偬讏D片??？ 方法肯定比問題多，我摸索出兩個比較簡單的方法：
[button setBackgroundImage:[UIImage imageForColor:[UIColor px_tomatoRed] size:CGSizeMake(1, 1)] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageForColor:[UIColor px_orangeColor] size:CGSizeMake(1, 1)] forState:UIControlStateHighlighted];
其中imageForColor這種方法不是系統(tǒng)自帶的，需要另外寫一些擴展的代碼，這里就不贅述了。 6、圓角 [myButton.layer setMasksToBounds:YES];
[myButton.layer setCornerRadius:6];
之前說《提高設計還原度！寫給設計師的IOS前端教程（三）》的時候介紹過了。 7、顯示出來 [self.view addSubview:myButton]; 一回生，兩回熟。這都第三次見了，老相識就不客套了。 四、帶圖標的UIButton本文開頭時提到，有兩種常見的按鈕，第一種介紹過了，還有一種是帶圖標的按鈕。這位仁兄在后臺已經等很久了，終于輪到他上場啦。 UIButton *anotherButton = [[UIButton alloc] initWithFrame:CGRectMake(190, 380, 165, 44)];
[anotherButton setTitle:@"別點我" forState:UIControlStateNormal];
[anotherButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 8, 0, 0)];
[anotherButton setContentEdgeInsets:UIEdgeInsetsMake(0, -12, 0, 0)];
[anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateNormal];
[anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateHighlighted];
[anotherButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal];
[anotherButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted];
[anotherButton.layer setMasksToBounds:YES];
[anotherButton.layer setCornerRadius:6];
[self.view addSubview:anotherButton];
五、代碼再詳解別看代碼多，好多前面都已經講過了，只有三個看起來很面生。 1、文字的位移 [anotherButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 8, 0, 0)]; 圖標在左，文字在右，setTitleEdgeInsets可以調整圖標與文字之間的距離。UIEdgeInsetsMake括號里四個數(shù)字，分別對應「上、左、下、右」，也就是逆時針方向啦。 UIEdgeInsetsMake(0, 8, 0, 0)就是文字的左邊，增加8pt。換句話說，就是向右移動8pt（向左還是向右，有點繞腦子?。?。再換句話說，文字與圖標之間的距離拉大8pt。 2、文字+圖標的位移 [anotherButton setContentEdgeInsets:UIEdgeInsetsMake(0, -12, 0, 0)]; setContentEdgeInsets是文字+圖標一起移動。UIEdgeInsetsMake(0, -12, 0, 0)就是文字+圖標一起向左移動12pt。 3、圖標 [anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateNormal];
[anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateHighlighted];
setImage就是設置圖標的圖片地址啦，要分別設置普通和高亮時候的狀態(tài)。 六、后記UIButton里有幾個屬性很相似的，setImage、setBackgroundImage與setBackgroundColor，還有setTitleEdgeInsets與setContentEdgeInsets，大家用的時候要注意區(qū)分啊。 「優(yōu)設八月份人氣最高的好文」
【優(yōu)設網 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】 ================關于優(yōu)設網================
|
|
|
來自： 昵稱kb2t0 > 《2017-前端開發(fā)》
