HOME > 開発メモ > Storyboard上だけでUIButtonを角丸に!カスタムクラスで設定項目を拡張する!
2015/01/26 (2016/09/14更新) タグ: ,

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

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

タグ: ,
この記事をシェアする

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む

イリテクで開発したサービス

請求書作成業務をもっとかんたんに。見積請求書の作成だけでなく、郵送代行、メール送信、PDFダウンロードなどバックオフィスを効率化。

詳しくはこちら

こちらの記事もおすすめです

SPONSER

記事を書いている人
入江 慎吾
イリテク(株)代表。webシステム、デザイン、iOSアプリ開発に携わって15年目。ディレクションもデザインもやるプログラマ。複数の企業と専属エンジニア契約中。自社で見積請求CLOUD PAPER運営。iPhoneアプリ全国総合ランキング3位を記録。イリテクブログは月間約5万PV。(もっと詳しく
SPONSOR
最新記事
Facebook
Twitter