Xcode
iOS
Swift

UIButtonの角丸とか枠線とかをInterfaceBuilderで設定&確認できるようにする。

More than 3 years have passed since last update.

UIButtonに角丸とか枠線とか付けたいことがちょくちょくある。

でもIBで普通にボタンを置いても設定できない。

コード上で設定はできるけど、見た目の問題なのでIBでやりたい。


@IBDesignable / @IBInspectable

@IBDesignable@IBInspectableを使えば実現できる!



  • @IBDesignable


    • クラスに付ける(UIViewのサブクラス)

    • IBでリアルタイムでプロパティが反映されるようになる




  • @IBInspectable


    • プロパティに付ける

    • IBで設定できるようになる



以下サンプルコード


CustomClass.swift

@IBDesignable class CustomButton: UIButton {

// 角丸の半径(0で四角形)
@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)
}
}



使ってみる

ボタンを置く。

スクリーンショット 2015-09-30 18.13.31.png

作ったクラスを設定する

Designablesの項目が "Up to date" になればOK

スクリーンショット 2015-09-30 18.11.56.png

@IBInspectableをつけたプロパティが設定できるようになっている!

スクリーンショット 2015-09-30 18.12.07.png

なので設定してみる

スクリーンショット 2015-09-30 18.14.16.png

するとボタンの見た目が変わる!

スクリーンショット 2015-09-30 18.14.02.png


まとめ

これでデザインのためのプログラム書かなくていいし、いちいち実行して確認しなくてよくなる!

もちろんボタンに限らず、例えばラベルのインデントを設定できるようにするなど、

いろいろ便利になるはずなので是非お試しあれ。