Xcode|Storyboardで角丸のボタンやラベルを配置する

StoryBoardで角丸のボタンやラベルを配置するにはコードで書くしかないのか？機能の少ないStoryboardだなと思っていました。

実つは実現する方法があったのです。その方法を紹介します。

動作環境

Xcode 7.3.1
iOS 9.3.2

角丸のボタンを配置する

ボタンからの方から説明していきます。

ボタンの配置

ボタンを一つ配置します

次にこのボタンにクラスを設定するのでボタンクラスを作ります。

Buttonクラスを作る

New File…を選択

Cocoa Touch Classを選択してNextを押す

Class名にBorderButton、Subclass ofにUIButtonを入力しNextを押してクラスを作ります。

先ほど配置したボタンを選択してClassにBorderButtonを選択します。

これで準備が完了しました。

ボタンにボーダーライン、角丸、カラーの設定する。

BorderButtonクラスにコードを書いていきます。

BorderButton.h

IB_DESIGNABLE
@interface BorderButton : UIButton
@property (nonatomic) IBInspectable CGFloat cornerRadius;
@property (nonatomic) IBInspectable UIColor *borderColor;
@property (nonatomic) IBInspectable CGFloat borderWidth;
@end

BorderButton.m

@implementation BorderButton
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    self.clipsToBounds = YES;
    self.layer.cornerRadius = self.cornerRadius;
    self.layer.borderColor = self.borderColor.CGColor;
    self.layer.borderWidth = self.borderWidth;
}
@end

Storyboardに戻りボタンの項目を見ると項目が増えていませんか？

今回は、Radius：5、BorderColorに青色、Border Width：1を入力しました。

StoryBoard上でもボタンに角丸と枠がつきました。
では、シミュレーターでボタンを動作させてみましょう。
何か変ですよね？
ボタンを押すと枠だけくっきりと残っていませんか？

それ修正します。

ボタンを押した時の動作を変える

ボタンクラスを継承しています。BorderButton.mにメソッドを追記します。

– (void)setHighlighted:(BOOL)highlighted

ボタンをのalphaの値を変化させて枠も変化させます。

BorderButton.m

- (void)setHighlighted:(BOOL)highlighted {
    [super setHighlighted:highlighted];
    
    if (highlighted) {
        super.alpha = 0.2;
    } else {
        super.alpha = 1.0;
    }
}

ボタンを押すと枠も色が薄くなるようになりました。これで少しは違和感が無くなったと思います。他色々と出来ますので挑戦してみてください。

角丸枠付ボタンの完成。

角丸のラベルを配置する

次は角丸ラベルを作成していきます。

Labelの配置

ボタンの下にラベルを一つ配置します

次に配置したラベルにクラスを設定するのでラベルクラス作っていきます。

Labelクラスを作る

New File…を選択

Cocoa Touch Classを選んでNextを押す。

ClassにBorderLabel、Subclass ofにUILabelを入力しNextを押してクラスを作成します。

配置したラベルを選択してClassにBorderLabelを選択します。

ラベルにボーダーライン、角丸、カラーの設定をする

BorderLabelクラスにコードを書いていきます。

BorderLabel.h

IB_DESIGNABLE
@interface BorderLabel : UILabel
@property (nonatomic) IBInspectable CGFloat cornerRadius;
@property (nonatomic) IBInspectable UIColor *borderColor;
@property (nonatomic) IBInspectable CGFloat borderWidth;
@end

BorderLabel.m

@implementation BorderLabel
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    self.clipsToBounds = YES;
    self.layer.cornerRadius = self.cornerRadius;
    self.layer.borderColor = self.borderColor.CGColor;
    self.layer.borderWidth = self.borderWidth;
    
}
@end

先ほど設置したラベルを選択してみると設定項目が増えています。

Radius：5、BorderColorに水色、Border Width：1を入力しました。

StoryBoardに配置したラベルにも角丸の枠がついています。

角丸枠つきのラベル完成です。

まとめ｜結局クラス作ってコード書いています。

クラスを作成はちょっとルール違反というかズルいというか、なんか面倒くさいですよね。
でもボタンクラスを作ってしまえばボタンが増えても流用すればいいしStoryboard上で終了するので管理が楽です。ですが、数が多くなるとマシンパワーが必要になるのが厳しいですね。

ま、できたのでよしとしましょう！

今回作成したサンプルコードgithubにあげておきますので参考にしてください。

サンプル

プロジェクトファイル — github