邊緣人：我可以戳你一下嗎>///////<
UIButton：變...變態！！

------------------------------你什麼也沒看到------------------------------

那就先來認識一下UIButton吧～
UIButton是個非常重要的UI元件，許多使用者點擊後的回饋動作、或是與應用程式的互動，都是由UIButton所實現的。
在swift的api裡定義了創建button的5個步驟，跟把大象放進冰箱3步驟有87%像：

• 建立一個button，並設定他的類型。
• 設定button內的文字或圖片，並將大小調整至符合按鈕的內容。
• 為button連結一個或多個點擊後的回饋動作(action method)。
• 設定button的auto layout。
• 提供button一些輔助使用以及在地化等資訊。

關於第5點大家可能比較陌生。
判斷的依據是，我一開始看到覺得很陌生！因為我從沒設定過這些。
而且可能有人發現，其實就算不提供這些資訊，app還是會跑，動作還是會回饋。
那為什麼還需要設定這些資訊呢？這是apple的小貼心，之後會跟大家說明。

建立button

首先要建立一個UIButton的實體，可以直接從Library裡面拉button至storyboard

或是由程式碼建立

let newButton = UIButton()
let detailButton = UIButton(type: .detailDisclosure)
let constraintsButton = UIButton(frame: CGRect(x: UIScreen.main.bounds.width / 2, y: UIScreen.main.bounds.height / 2, width: 100, height: 30))

以上3種生成button的程式碼
第1種只初始化了一個button實體
第2種在初始化時指定了button的type
第3種則同時指定了button的位置及長寬

初始化並設定完botton之後，記得要將button加進view裡面才能顯示。

view.addSubview(newButton)

此時執行專案，畫面中應該會有一個很單純的button(如果用code建立，需要設定他的顯示位置)。
這時候不管你怎麼點，他都不會反抗，嘿嘿，因為我們還沒有設定他的回饋動作。
不過先別急，不覺得這個button看起來有點單調嗎？先做些設定讓他變成我的形狀吧～

Attributes of UIButton

接下來會介紹一些button有的特性，其實這些東西在attribute inspector裡設定是很快的，但我想趁機學一下純code，所以以下呈現幾乎都會用純code來完成。

Type

apple本身為UIButton提供了7種形式（roundedRect即將被淘汰，不建議使用，故沒有出現在attributr inspector的下拉式選單內），除了在attributes inspector裡選擇外，也可以像上述第2行程式碼一樣在初始化時指定。

System是系統為button預設提供的樣式（下圖左）。
Detail Disclosure, Info Light, Info Dark的外型是一樣的（下圖右），聽說iOS7以前長得不一樣，後來蘋果採用扁平化設計之後就長一樣了，但沒有從buttonType的enum裡移除case（晶晶體？），因此殘留到現在。
Add Contact則為下圖中間的樣式。

Title / Title Color / Image / Background Image

如果上述的type你都不喜歡，沒關係，swift還有一個類別是custom，就是專門對付你這種人。
custom完全客製化，可以是文字、圖片或2種同時存在的形式。有4個比較主要的attibutes，分別是image, title, title color和background image。

（圖片來源：UIButton）

下列程式碼分別設定了以上介紹的4種屬性，實作阿寶與老皮2個按鈕：

finnButton.setTitle("finn", for: .normal)
finnButton.setTitleColor(.black, for: .normal)
finnButton.setImage(UIImage(named: "finn"), for: .normal)
finnButton.setBackgroundImage(UIImage(named: "blue"), for: .normal)

jackButton.setTitle("jack", for: .normal)
jackButton.setTitleColor(.black, for: .normal)
jackButton.setImage(UIImage(named: "jack"), for: .normal)
jackButton.setBackgroundImage(UIImage(named: "yellow"), for: .normal)

Title Font and Attributes

而button中的title，還可以再額外設定字型、種類、大小、對齊位置等等⋯⋯

//字體italic、大小50、水平對齊靠左(預設置中)
finnButton.titleLabel?.font = UIFont.italicSystemFont(ofSize: 50)
finnButton.contentHorizontalAlignment = .leading

//預設字體、粗細(weight)為heavy、大小30，垂直對齊靠下(預設置中)
jackButton.titleLabel?.font = UIFont.systemFont(ofSize: 30, weight: .heavy)
jackButton.contentVerticalAlignment = .bottom

italic跟system都是內建的字體，如果你有import自己喜歡的字型的話，也可以將字型的family name設為font name來對字體進行指定。

看來button已經漸漸變成我的形狀了呢！很好很好～
下一回就來講講button state的應用和設定action吧！