Skip to content →

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でストーリーボード上に表示されるビューをつくる

[sc name=”ios”][sc name=”engeneer”]

SHARE

PROFILE

入江 慎吾
Webサービスを作るのが大好きです。制作会社10年→フリーランス→受託をやめサービス開発に専念。プログラミングのメンターサービスMENTAは月間流通額約1,300万を突破🚀 YouTubeでは個人開発について語ってます / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)

Published in 開発奮闘記