もくじ
どうもこんにちは。iOSをメインに開発しているロッキーカナイです。
今回のちょい足しレシピは、StoryboardでUIButtonを丸くしてみるお話です。UIButtonだけでなくUIViewを継承しているオブジェクトであれば可能なのです。プログラムでも可能ですが、Storyboard上でできるのであればやらない手はないでしょう!
それではさっそくやってみましょう!
UIButtonの配置
StroyboardにUIViewControllerを配置し、UIButtonを中央に配置します。
![](http://www.egao-inc.co.jp/wp-content/uploads/2017/12/db34251acf841767ed616cc2df411667.49.png)
UIButtonのサイズ変更
サイズをwidth 100、height 100に変更します。
![](http://www.egao-inc.co.jp/wp-content/uploads/2017/12/8dd9a1c98519f1a8b9d277bb3990a7f0.33.png)
UIButtonに制約の追加
UIButtonの制約をwidth、heightと水平、垂直の追加します
![](http://www.egao-inc.co.jp/wp-content/uploads/2017/12/9df6f626a9bf7d64b8b348f066861ca5.04.png)
![](http://www.egao-inc.co.jp/wp-content/uploads/2017/12/9ed4a0dbe04aa73ac0be6bcefe93bed2.24.png)
UIButtonにパラメータを追加
user defined runtime attiributesに以下パラメータの追加をします。
- Key path: layer.maskToBounds Type: Boolean Value: true
- Key path: layer.cornerRadius Type: Number Value: 50
完了!
![](http://www.egao-inc.co.jp/wp-content/uploads/2017/12/simulator-screen-shot-iphone-se-2017-12-18-at-20.46.47.png)
UIButtonが丸くファンシーになりましたね。
注意なのですが、Storyboard上では元の四角いボタンのままですが、実機やシュミレータで実行して初めて丸くなります。
ちなみにNumber Valueを小さくすると角丸ボタンになります。なんだかStoryboardでもっといろんな事が出来そうですね!
今日はStoryboardでUIButtonを丸くファンシーにしてみる話でした!