CrossBridge Lab

技術ネタ、デバイスネタを...

【Swift3】@IBDesignableと@IBInspectableを使って枠線あり角丸なUIButtonをStoryboardで設定する

はじめに

 枠線を付けて角丸なボタンをアプリで使う場合にコード上から設定する方法と、@IBDesignableと@IBInspectableを使ってStoryboardから設定してリアルタイムに描画を確認する方法を解説します。

f:id:crossbridge-lab:20161130124944p:plain

コードでUIButtonに枠線を付けて角丸にする

 まずはコードで角丸にするにはUIButtonクラスのlayerプロパティのcornerRadiusに値を設定します。値が大きいほど角丸が大きくなります。背景色を設定して角丸にする場面も多いですね。わざわざ画像を用意するまでもないような場合に便利です。

button.layer.cornerRadius = 2.0

 次に枠線を付けるにはlayerプロパティのborderWidthで線の幅、borderColorで色を指定します。

button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.blue.cgColor

 このようにOutletを設定してコードから指定するのもよいですが、Storyboardでは見た目が反映されません。ということで・・・

@IBDesignableと@IBInspectableを使ってStoryboardから枠線、角丸を指定する

 @IBDesignableと@IBInspectableを使うことでStroyboardからプロパティを設定し、即座にStoryboard上で描画に反映させることができるようになります。

 UIButtonクラスを継承したクラスを作成してclassの前に@IBDesignableを付けます。IBDesignableを付けたカスタムViewはStoryboard上でリアルタイムにレンダリングされます。次にStoryboardから設定したいプロパティに@IBInspectableを付けます。

@IBDesignable class BorderButton: UIButton {

    @IBInspectable var cornerRadius: CGFloat = 0.0
    @IBInspectable var borderWidth: CGFloat = 0.0
    @IBInspectable var borderColor: UIColor = UIColor.clear
    
    override func draw(_ rect: CGRect) {
        layer.cornerRadius = cornerRadius
        layer.borderWidth = borderWidth
        layer.borderColor = borderColor.cgColor
    }
}

 あとはStoryboardでUIViewを配置したのちクラスを先程作成したクラスに変更します。角丸の半径、枠線の幅、色がStoryboardから設定できてどのように描画されるかも分かるようになりました。

f:id:crossbridge-lab:20161130124904p:plain

 今回のサンプルは以下に置いています。

github.com