Interface Builderだけで見栄えのいい角丸ボタンを作る

Interface Builderだけで見栄えのいいボタンを作る

Interface Builderの設定だけで、角丸のボタンを作る方法です

まずはボタンを普通に配置して、サイズと位置を設定します

ボタンが配置できたら背景色を設定します
Interface Builderだけで見栄えのいいボタンを作る

次はフォントの色。フォントや文字サイズを変えてもいいですね。
Interface Builderだけで見栄えのいいボタンを作る

最後に角丸の設定。
User Defined Runtime Attributesの+ボタンを押して、「layer.cornerRadius」というKey Pathを新たに作成します。次にTypeをNumberに変更してValueに10を入力します。(ここでは10にしていますが、値を小さくすると角の丸みが小さくなります。その辺は好みで)

Interface Builderだけで見栄えのいいボタンを作る

Interface Builderでは角丸が反映されませんが、実行するとちゃんと丸くなります。

関連コンテンツ
ブログランキング
  • にほんブログ村 教育ブログ プログラミング教育へ
  • にほんブログ村 子育てブログ 子供の習い事(教室・業者)へ

  • スポンサーリンク
    Google336 記事下
    Google336 記事下

    シェアする

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

    フォローする

    スポンサーリンク
    Google336 記事下
    トップへ戻る