#25 純程式碼客製化按鈕研究

模仿 Facebook 活動頁的三個按鈕

・可以用 Immediately Invoked Closures 的語法讓 programmatic UI 的 code 更乾淨，本程式採用此方式。

・設定 UIView 屬性translatesAutoresizingMaskIntoConstraints = false，才能使用 AutoLayout。

・Colors & Fonts：

・ButtonViewModel：

ViewController 內

myButton1

先透過 ButtonViewModel 生出 viewModel，再將它傳進 PlusButton 的 initializer 初始化，然後 return 給 myButton1。

myButton2、myButton3 同理。

接著把 myButton1 ~ myButton3 傳進 UIStackView 的 convenience init(arrangedSubviews views: [UIView])，生出 v。

設定 v 的translatesAutoresizingMaskIntoConstraints = false，還要設定 axis、distribution 和 spacing，最後 return 給 buttonStack。

buttonStack 必須是 lazy var，可以看最下面參考資料。

buttonStack 被加進 view；呼叫 setupConstraints 做 Auto layout

setupConstraints 函式內用到 AutoLayout Programmatically表示。

PlusButton 內

iconImageView / buttonLabel / subStack

initializer

super.init(frame: .zero) 初始化父類別 UIButton，frame 定在 .zero。

利用傳入的 viewModel 設定 iconImageView 的圖片、buttonLabel 的文字。

用 addSubview 把 subStack 作為子視圖顯示。呼叫 setupConstraints 設定 subStack 的 Auto Layout。

最後設定背景色和角半徑。

setupConstraints 函式

AvatarButton 和 BellButton 同理

GitHub - musasyncs/CustomButton

參考資料

Swift - Immediately Invoked Closures

讓屬性變懶的 swift lazy 咒語

AutoLayout Programmatically表示

・Swift 4: Introduction to Auto Layout Programmatically (Ep 1)

・Custom Reusable Buttons (Frame-based)

1. 在 override init(frame: CGRect) 加入子視圖、設定屬性，在 configure 函式以傳入的 viewModel 設定元件資料。

override init(frame: CGRect){
    super.init(frame: frame)
    
    // addSubviews, setup properties
}
func configure(with viewModel: TwoLineButtonViewModel) {
    // 設定元件資料
}

2. 再於 override func layoutSubviews 設定每個 subview 的 frame。