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

bridge-192982_1280

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

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

動作環境

Xcode 7.3.1
iOS 9.3.2

角丸のボタンを配置する

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

ボタンの配置

ボタンを一つ配置します

20160726_001

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

Buttonクラスを作る

20160726_002

New File…を選択

20160726_003

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

20160726_004

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

20160726_005

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

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

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

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

BorderButton.h

BorderButton.m

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

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

20160726_007

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

それ修正します。

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

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

– (void)setHighlighted:(BOOL)highlighted

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

BorderButton.m

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

角丸枠付ボタンの完成。

角丸のラベルを配置する

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

Labelの配置

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

20160726_008

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

Labelクラスを作る

20160726_009

New File…を選択

20160726_010

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

20160726_011

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

20160726_012

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

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

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

BorderLabel.h

BorderLabel.m

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

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

20160726_014

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

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

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

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

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

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

サンプル

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

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク