LoginSignup
31
23

More than 5 years have passed since last update.

UIButton, UILabelをXcodeでサクッと角丸にする方法

Last updated at Posted at 2017-11-13

XcodeのStoryboardを使用してアイテムを角丸にする方法

角丸にする方法はカスタムクラスを作ったり、Extentionで実装したりと色々とありますが、
ここではXcodeで特定のパーツのみサクッと角丸にする方法をご紹介します。

  1. Xcode で角丸にしたいアイテム(UIButton等)を選択し、Utilitiesエリア(右側) の Identity Inspector(左から3つ目)を開く
  2. User Defined Runtime Attributedsの「Key Path, Type, Value」を追加
Key Path Type Value
layer.cornerRadius Number 10

Valueの値で角丸の半径が決まりますので調整します。

UILabelの場合

UILabelの場合はもう一行必要です。
(コメントでご指摘いただきましたが、)UILabelの場合はUtilitiesエリア(右側) の Attributes Inspector(右から3つ目) にて Clip to Bounds のチェックを入れればOKです。

シミュレータまたは実機で確認

この方法では、Xcode上のプレビューでは角丸は反映されません。
シミュレータまたは実機で実行すれば反映されています。

31
23
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
23