亚洲欧美999,日韩另类在线,亚洲精品欧美

提高設計還原度！寫給設計師的IOS前端教程（四）

@小乖乖老爸：想提高設計還原度，盡可能縮小設計稿與完成品之間的差距嗎？來學編程吧！這個系列的文章忽略了很多設計師用不上的技能，直接給出UI設計師工作中能用上的編程知識，簡單易懂，一起來收！

往期回顧：

一，點語法 vs Set方法

能看到第四篇的，說明前面的你都能消化了。在開始進入今天的正題之前，先講兩個簡單的概念，「點語法」與「Set方法」。

舉個例子：

Lily.hair = [UIColor RedColor];
[Lily setHair:[UIColor RedColor]];

第一行是「點語法」，第二行是「Set方法」，這兩行代碼意思是一樣的，都是把Lily的頭發染成紅色。要是咱們不僅要染頭發，還要把指甲涂成藍色呢？

//點語法得用兩行
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 了，咱們來解釋解釋吧。按鈕有六種狀態，最常見的有四種：

普通：UIControlStateNormal
高亮：UIControlStateHighlighted，就是被點中的狀態，類似網頁里的Hover
不可用：UIControlStateDisabled
被選中：UIControlStateSelected

上面兩行代碼意思是：設置按鈕在普通和高亮狀態下，文字都是白色的。如果不寫第二句，系統會在按鈕被點擊時，蓋上一層淡淡的黑色。

5、背景色或背景圖

    [myButton setBackgroundColor:[UIColor blueColor]];

這是設置背景顏色。

    [myButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal];
    [myButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted];

這是設置背景圖片。

需要注意的是，背景色是不支持按鈕狀態的，如果你不提前告訴工程師按鈕還有高亮狀態，他們就會用簡單的setBackgroundColor來做了。

在扁平風橫行的今天，按鈕大多是純色的了，很少再用漸變或者紋理什么的，本沒必要用圖片的。設計師要的效果，無非是普通狀態一個顏色，高亮狀態一個顏色。但要支持不同狀態，就得用setBackgroundImage，就非得用圖片才行。

從一個按鈕來看，工作量不大，但你考慮到整個app，多少按鈕，多少種尺寸啊！那得做多少套圖片啊？

方法肯定比問題多，我摸索出兩個比較簡單的方法：

可拉伸的圖片做背景，圖片再小都無所謂，反正是平鋪的；
用代碼來生成一張虛擬的圖片，如下面的代碼；

    [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這種方法不是系統自帶的，需要另外寫一些擴展的代碼，這里就不贅述了。

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括號里四個數字，分別對應「上、左、下、右」，也就是逆時針方向啦。

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就是設置圖標的圖片地址啦，要分別設置普通和高亮時候的狀態。

六、后記

UIButton里有幾個屬性很相似的，setImage、setBackgroundImage與setBackgroundColor，還有setTitleEdgeInsets與setContentEdgeInsets，大家用的時候要注意區分啊。

「優設八月份人氣最高的好文」

提高設計還原度！寫給設計師的IOS前端教程（四）

【優設網原創文章投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com