コンテンツへスキップ →

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

スキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも発信中!

PROFILE

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

カテゴリー: 開発奮闘記