iOSアプリ・Webシステム開発のイリテク

HOME > iOS プログラミング > Storyboard上だけでUIButtonを角丸に!カスタムクラスで設定項目を拡張する!
2015.01.26

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

このエントリーをはてなブックマークに追加

iOSアプリで使うボタン。画像で作ると様々なサイズが必要だったり、容量も増えるし、デバイスによって幅を広げたりする際には管理が面倒です。できれば、今風のボタンをXcodeだけで作れればいいと思いませんか?

例えば、以下のようなUIButtonをStoryBoard上の設定だけで作れるようにします。通常、UIButtonの背景色、文字色まではStoryBoardで設定できますが、角丸、ボーダーの幅、ボーダーの色はコードでしか設定できません。

kansei

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を選択して、作成したクラスファイルをカスタムクラスで指定します。
class
そうすると、さきほどIBInspectableで追加した設定項目が出てきます。

下のように設定を変更すると、ライブで見た目もプレビューできます。
button

参考リンク

公式:Interface Builder Object and Media Help

【iOS】IBInspectableを使って自作Viewの値を設定しやすくする

@IBDesignableと@IBInspectableでストーリーボード上に表示されるビューをつくる

こちらの動画も参考になります。

タグ: ,
この記事をシェアする
このエントリーをはてなブックマークに追加

関連記事

イリテクはIT・経営に関する情報を発信しています!

  • follow us in feedly
    RSSで最新記事を取得

SPONSER

開発したWebサービス
記事を書いている人
入江 慎吾 イリテク(株)代表
Web/iOSエンジニア。単なる制作ではなく、お客さまの一員となって共に考え「攻めのIT投資」でビジネスを加速させます。
SPONSOR

最新記事
Facebook
Twitter
人気記事