[iOS] [Swift] 通常StoryBoard上で編集できないプロパティ（cornerRadius, border）をリアルタイムで見た目に反映させる方法

# 目的
UIView,UIButtonなどの角丸、枠線やUITextFieldのPlaceholderの色などは通常Storyboardから値を設定することができず、コードで書くことが多いと思いますが、できることならStoryboard上で見た目を確認しながら設定できると、いちいちビルドしなくてもいいし楽。
そこで、今回は通常Storyboardから編集できないものを@IBDesignable,@IBInspectableを使って編集できる、かつリアルタイムで見た目を確認できる方法をメモしたいと思います

# @IBDesignable,@IBInspectableとは
| @IBDesignable | @IBInspectable | 
|:-----------|:-----------|
|クラスの前に付ける修飾子|プロパティの前に付ける修飾子|
|IBInspectableが指定されているプロパティに変化があった場合、それを反映させる|Storyboard上から値を変更できるようにする|

- @IBInspectableを使用できる型
    - Bool
    - Int
    - CGFloat
    - Double
    - String
    - CGPoint
    - CGSize
    - CGRect
    - UIColor
    - UIImage

UIFontが指定できないのが残念。


# 方法
UIView, UIButtonなどを継承したカスタムクラスを作成します。

```swift:CustomView
import UIKit

@IBDesignable class CustomView: UIView {
    
    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            self.layer.cornerRadius = self.cornerRadius
            self.clipsToBounds = (self.cornerRadius > 0)
        }
    }

    @IBInspectable var borderColor: UIColor = UIColor.clearColor() {
        didSet {
            self.layer.borderColor = self.borderColor.CGColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0.0 {
        didSet {
            self.layer.borderWidth = self.borderWidth
        }
    }
}
```
下記のようにも書ける

```swift:CustomView
import UIKit

@IBDesignable class CustomView: UIView {
    
    @IBInspectable var cornerRadius: CGFloat = 0.0
    @IBInspectable var borderColor: UIColor = UIColor.clearColor()
    @IBInspectable var borderWidth: CGFloat = 0.0
    
    override func drawRect(rect: CGRect) {
        self.layer.cornerRadius = cornerRadius
        self.clipsToBounds = (cornerRadius > 0)

        self.layer.borderColor = borderColor.CGColor
        self.layer.borderWidth = borderWidth
        
        super.drawRect(rect)
    }
}
```

UIViewを配置して、CustomViewと結びつける
Designablesが"Up to date"になればOK
<img width="265" alt="スクリーンショット 2016-07-03 12.45.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/111677/7af5928b-54b9-1682-6773-8e33c44868ad.png">

後は、Storyboard上から編集できるようになっているので適当に値を入れる。
するとリアルタイムで見た目が更新されていく！
<img width="872" alt="スクリーンショット 2016-07-03 12.45.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/111677/e021f4e9-e597-1458-88bd-94195f241b59.png">

次は、UITextFieldのPlaceholderの色を変えてみる

```swift:CustomTextField 
import UIKit

@IBDesignable class CustomTextField: UITextField {

    @IBInspectable var placeholderColor: UIColor = UIColor(red: 199/255, green: 199/255, blue: 205/255, alpha: 1)
    
    override func drawRect(rect: CGRect) {
        
        if self.placeholderColor != UIColor(red: 199/255, green: 199/255, blue: 205/255, alpha: 1), let placeholder = self.placeholder {
            let attributesColor = [NSForegroundColorAttributeName: self.placeholderColor]
            self.attributedPlaceholder = NSAttributedString.init(string: placeholder, attributes: attributesColor)
        }
        
        super.drawRect(rect)
    }
}
```

<img width="693" alt="スクリーンショット 2016-07-03 12.54.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/111677/2179cf6c-0498-0004-aca0-3b899c80c6dc.png">

# 最後に

- 惜しいのは、カスタムクラスを作らないといけないところ。extensionで@IBDesignable,@IBInspectableが設定できると嬉しいんだけれど。
- 使い方次第では色々なことができそうで面白い。