Storyboard上だけでUIButtonを角丸に!カスタムクラスで設定項目を拡張する!

iOSアプリで使うボタン。画像で作ると様々なサイズが必要だったり、容量も増えるし、デバイスによって幅を広げたりする際には管理が面倒です。できれば、今風のボタンをXcodeだけで作れればいいと思いませんか?
例えば、以下のようなUIButtonをStoryBoard上の設定だけで作れるようにします。通常、UIButtonの背景色、文字色まではStoryBoardで設定できますが、角丸、ボーダーの幅、ボーダーの色はコードでしか設定できません。
IB_DESIGNABLEを使えば、StoryBoard上でこれらの設定を自由にカスタムできるようになります。StoryBoard上で見た目を整形して確認するほうが、コードで設定するよりもやりやすいですね。
上のように新しく設定項目をIB上に追加できます。それでは、これらの追加方法を見ていきましょう。
目次
1.カスタムクラスを作る
まず、新しくクラスファイルを作成します。例えば、UIButtonをカスタムするクラスとしてButton_Custom.swiftを作ります。
import UIKit @IBDesignable class Button_Custom: UIButton { @IBInspectable var textColor: UIColor? @IBInspectable var cornerRadius: CGFloat = 0 { didSet { layer.cornerRadius = cornerRadius } } @IBInspectable var borderWidth: CGFloat = 0 { didSet { layer.borderWidth = borderWidth } } @IBInspectable var borderColor: UIColor = UIColor.clearColor() { didSet { layer.borderColor = borderColor.CGColor } } }
IBInspectableで設定項目を追加していきます。
2.クラスを設定
StoryboardでUIButtonを選択して、作成したクラスファイルをカスタムクラスで指定します。
そうすると、さきほどIBInspectableで追加した設定項目が出てきます。
下のように設定を変更すると、ライブで見た目もプレビューできます。
参考リンク
公式:Interface Builder Object and Media Help
【iOS】IBInspectableを使って自作Viewの値を設定しやすくする
@IBDesignableと@IBInspectableでストーリーボード上に表示されるビューをつくる
[sc name=”ios”][sc name=”engeneer”]
SHARE
スキルアップにMENTA
MENTAはいろんなプロに相談できるNo1メンターサービスです。
YouTubeでも発信中!
PROFILE

あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)