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

  • 126
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

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

まとめ

これでデザインのためのプログラム書かなくていいし、いちいち実行して確認しなくてよくなる!
もちろんボタンに限らず、例えばラベルのインデントを設定できるようにするなど、
いろいろ便利になるはずなので是非お試しあれ。