ボタンに角丸をつけてみよう

Blog

 

今回、紹介するのは、ボタンに角丸をつける方法を紹介します。

通常のボタンは、角丸は無く、正方形、長方形の形をしています。

今回は、その少し丸びを帯びたボタンと円のボタンの方法を紹介します。

 

 

 

 

  1. ボタンを選択し、画面中央へ配置。
  2. Titleを空欄にします。
  3. バックグラウンドカラーに「Moss」を選択。

 

次は、ボタンのサイズを変更します。

 

 

 

 

  1. ものさしのアイコンをクリック。
  2. Widthに「120」、Heightに「120」を記入。

 

これでボタンの大きさが、120に変更されました。

 

次は、いよいよ角丸をつけていきます。

 

 

 

  1. 左から3番目のアイコンをクリック。
  2. 「+」をクリックし、Key Pathに「layer.cornerRadius」を記入。Typeに「Number」を選択、Valueに「20」を記入。

 

ストーリーボート上は、変化はないですがシュミレーターで見ると角丸がついています。

 

実際にRunしてみましょう。

 

 

実行結果

 

 

 

角丸が付きました。

 

さらに、次は円にしてみたいと思います。

 

方法は、とても簡単で高さと横幅の半分の値をValueに記入するだけです。

今回だと、高さ、横幅が120なのでその半分、「60」を記入します。

 

 

 

  1. Valueに「60」を記入。

 

 

実行結果

 

 

 

 

円になりました。

 

ボタンはよく角丸をつけたりするので覚えておくと便利です。

 

以上で「ボタンに角丸をつけてみよう」の説明を終わります。

 

🤗

 

コメント