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

2018/03/23更新 カテゴリー:開発奮闘記 タグ: ,
SPONSOR
  • このエントリーをはてなブックマークに追加

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

SPONSOR

参考リンク

公式:Interface Builder Object and Media Help

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

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

iPhoneアプリ開発のTips一覧はこちら

効率のいいiOSプログラミング習得法

独学でプログラミングをはじめてもう16年。
なかなか勉強が進まない人のために記事を書きました。

フリーランスエンジニアの稼ぎ方

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

PRODUCT

イリテクで開発したプロダクト

PROFILE

プロフィール

入江 慎吾/イリテク代表
「死ぬ気でやれよ、死なないから」をモットーに体当たりでWEBサービスをつくってます🔥 収入もないのに受託開発をやめて好きなサービスだけをつくることに決めました。資金がつきるか、ヒットするのが先か...見守ってください。 (詳しいプロフィール)
WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす