? 隕石小故事

無論是什麼類型的開發方式，當然都是希望開發速度能夠越快越好。當然，在隕石開發中速度也是個關鍵（因為一直在重做 ?），而身為一個前端最常在做的就是在刻畫各種畫面 UI，有時都會希望有快速的方式能夠調整 UI，或者當之後要微調的時候能夠馬上更新。這時如果有像個 Stroyboard 的視覺化方式能夠快速調整 UI 的話，那麼配合上 Auto Layout 就能在畫面刻畫上減少大量的時間。

Overview

如果你是採用 Storyboard 或是 Xib(nib) 的開發者，在這種使用 Interface Builder 視覺化的方式來建構畫面時，常常會使用 Xcode 右側視窗的 Attributes inspect 來對畫面元件的部分屬性進行調整。但是，有時候某些屬性是沒有辦法在 Attributes inspect 裏頭進行調整的，這時候我們可能還是需要使用程式碼來撰寫來輔助它實現。

而我們剛好也有特定的方式可以解決這個問題，在這邊會透過將 IBInspectable 與 IBDesignable 這兩個屬性定義到我們特定的 class 上，讓我們可以在 Interface Builder 來調整我們特定 class 中的屬性，並且將調整後的內容顯示在畫面上。

實作 IBInspectable & IBDesignable

｜使用 @IBInspectable

我們簡單示範一個圓角按鈕的範例。首先定義一個 class 叫做 CustomizedButton 並且繼承 UIButton，並且在其中添加一個稱為 cornerRadius 的屬性，我們之後會透過它對按鈕圓角做調整。

這邊我們先在 cornerRadius 前面添加 @IBInspectable 屬性。接著，我們添加一個 didSet 觀察者來觀察這個 cornerRadius 的變化，來調整自身 layer.cornerRadius 以及 layer.masksToBounds 的值。

接著讓我們回到 Inter Builder 上，我們在畫面上添加一個按鈕，並且在該按鈕的 Identity inspector 中調整該按鈕的 Custom class 為剛剛所新增的 CustomizedButton：

完成之後我們就會發現我們 Attributes inspect 上多出了剛剛所定義的cornerRadius 可以調整。而當我運行之後會發現按鈕有圓角的效果了。

你可以在 Identity inspector 中的 User Defined Runtime Attributes 看見更動的項目。

⚠️ 這邊要注意，並不是所有類型在 Attributes inspect 上調整，以下是支持的類型：

• Int
• CGFloat
• Double
• String
• Bool
• CGPoint
• CGSize
• CGRect
• UIColor
• UIImage

｜使用 @IBDesignable

剛剛我們使用 @IBInspectable 讓我們可以在 Attributes inspect 中直接調整屬性，但是我們但是我們需要在運行之後才能看到結果。在這邊我們可以直接使用 @IBDesignable 來將我們調整的結果直接顯示在畫面上。

我們打開剛剛的 CustomizedButton 文件，在該 class 關鍵字前面加上 @IBDesignable 屬性，接著讓我們回到 Interface Builder 上調整我們的按鈕。這時候你會發現我們調整的結果會直接顯示在畫面上。

如此一來我們在建構 UI 畫面時能夠更明確的瞭解結果，並且不需運行在模擬器上。

? 來點樂子吧？！

因為這篇文章篇幅好像有點短...，所以只好來介紹一些你想不到的 IBInspectable 和 IBDesignable 的技巧，請小心服用 ?

｜客製化各種角度的漸層

漸層需求可能開發中比較常見，但是如果使用 IBInspectable 的方式來建構 UI，在顏色多於 2 個時其實蠻痛苦的，因為你必須設定一堆顏色屬性，除非他能夠計算。

在這邊我們簡單示範一個雙色的漸層範例。我們一樣建立一個新文件，定義一個 class 叫做 GradientView 並且繼承 UIView，接著我們會在裡頭新增幾個可調整的屬性，並標記為 @IBInspectable。最後程式碼如下：

接著我們就可以到我們畫面中進行各種的調整：

｜使用變形效果實現變形元件

在實作 IBInspectable 的時候，想說有沒有什麼也是 Attributes inspect 支持的類型，可以透過它來做些好玩的事情呢？結果我找到了，就是 CGAffineTransform。在 CGAffineTransform 中有許多效果都是帶入一個 CGFloat 類型的值來實現變形效果，這邊我們簡單示範幾個。

首先先看我們程式碼：

這邊我們可以透過調整值來做到旋轉跟縮放我們的元件，在這邊使用 concatenating 來做變形的原因是變形效果一次只能實現一種，因此，我必須使用這種方式讓它在做完一次變形效果之後接著另一個變形效果。

讓我們來做一個旋轉 90 度，並且縮放的按鈕吧！

Summary

身為一個前端工程師，はやく！もっとはやく！（快！還要更快！）

對我來說使用 IBInspectable 配合 IBDesignable 來開發是非常快速的，而同時他也減少了許多在刻畫畫面上的程式碼，並且還能夠將調整後的結果即時渲染在畫面上，這種視覺化的開發方式對於採用 Interface Builder 的開發者是一大福音。