###### tags: `第13屆IT邦鐵人賽文章`
# 【在 iOS 開發路上的大小事－Day10】為你的 UIButton 進行客製化吧！
一般在設定 UIButton 的時候，可能會設定文字顏色、背景色、陰影顏色等屬性
那如果要設定按鈕外觀、按鈕框線顏色、按鈕框線寬度等其他屬性的話，可能就要透過 Code 來處理

假設只有一個按鈕的話，那可能只要設定一次就好
那如果有很多按鈕都要這樣做的話，有點太花時間了

所以我們可以透過寫一次 Code，然後套用在每個有這種需求的 Button 上，所以下面就開始吧～
# 開始實作囉
先新增一個 Swift 檔案，選 Cocoa Touch Class

class 就自己取就可以了，Subclass 選 UIButton

目前應該會長這樣

import Foundation
import UIKit

class CustomButton: UIButton {

}

接著我們可以透過 **@IBInspectable** 這個屬性的定義來讓按鈕可以在介面建構器裡進行客製化設定
像是 cornerRadius、borderWidth、borderColor 等這些沒有出現在介面建構器上的選項
都可以透過這個方式來新增出來，讓我們可以方便設定

但要注意一下，只有下面這幾種屬性可以透過 @IBInspectable 的方式新增喔
* Int
* Double
* String
* Bool
* CGFloat
* CGPoint
* CGSize
* CGRect
* UIColor
* UIImage

下面會以 cornerRadius、borderWidth、borderColor 這三個來做示範

class CustomButton: UIButton {
    // MARK:- UIButton 圓角設定
    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    
    // MARK:- UIButton 框線設定
    // 框線寬度
    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        } set {
            layer.borderWidth = newValue
        }
    }
    
    // 框線顏色
    @IBInspectable var borderColor: UIColor {
        get {
            return UIColor(cgColor: layer.borderColor!)
        } set {
            layer.borderColor = newValue.cgColor
        }
    }
}

接著，點想要套用的 Button，將他的 class 改為剛剛新增的 Swift 檔案裡面的 class 名稱
以我的為例的話就是 CustomButton

接著就可以看到剛剛新增的 cornerRadius、borderWidth、borderColor 這三個選項了

雖然現在算是用好了，但如果要看到實際變化的話，還是得 Build 到模擬器或是手機/平板上才可以

這時候我們可以透過 **@IBDesignable** 這個屬性的定義，將其加在 class 的前面
就可以讓我們可以在不執行的情況下，就看到按鈕的改變

下面是本篇的完整程式碼

import Foundation
import UIKit

@IBDesignable class CustomButton: UIButton {
    // MARK:- UIButton 圓角設定
    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    
    // MARK:- UIButton 框線設定
    // 框線寬度
    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        } set {
            layer.borderWidth = newValue
        }
    }
    
    // 框線顏色
    @IBInspectable var borderColor: UIColor {
        get {
            return UIColor(cgColor: layer.borderColor!)
        } set {
            layer.borderColor = newValue.cgColor
        }
    }
}

好的，今天介紹的是比較偏向可以重複使用的小技巧，明天見～