【Swift3】@IBDesignableと@IBInspectableを使って枠線あり角丸なUIButtonをStoryboardで設定する
はじめに
枠線を付けて角丸なボタンをアプリで使う場合にコード上から設定する方法と、@IBDesignableと@IBInspectableを使ってStoryboardから設定してリアルタイムに描画を確認する方法を解説します。
コードで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から設定できてどのように描画されるかも分かるようになりました。
今回のサンプルは以下に置いています。