[SwiftUI][iOS]Buttonの使い方（３）〜角丸ボタンの作り方〜

2021/6/4

「角丸ボタンの作り方を知りたい」

「角丸のボタンってどうやって作るの？」

と言う人に向けて、この記事は書かれています。

どうも、ちょげ（@chogetarou）です。

この記事では、前回の記事「[SwiftUI]Buttonの使い方（２）〜ラベルとは〜」に引き続き、角丸のButtonについて解説します。

角丸ボタンの作り方
まとめ
補足
Buttonシリーズ
終わりに

角丸ボタンの作り方

角丸ボタンは、overlay修飾子を使うことによって作れます。

overlay修飾子は、Viewの上にビューを重ねる修飾子です。

やり方は以下のようになります。

overlay修飾子をつける
角丸の四角形RoundedRectangleビューを重ねる
RoundedRectangleを枠線だけにする

1.overlay修飾子

Buttonビューにoverlay修飾子を付けます。

Button(action: {}) {
    Text("Button")
}
.overlay()

2.RoundedRectangleビューを重ねる

RoundedRectangleビューをButtonビューに重ねます。

            Button(action: {} ) {
                Text("ボタン")
            }
            .padding()
            .overlay(
                RoundedRectangle(cornerRadius: 15)
            )

この時点では黒い角丸の四角形が表示されているだけの状態です。

3.RoundedRectangleを枠線のみにする

最後にRoundedRectangleを枠線のみにします。

.stroke修飾子を使うことによって、枠線のみにすることが出来ます。

            Button(action: {}) {
                Text("ボタン")
            }
            .padding()
            .overlay(
                RoundedRectangle(cornerRadius: 15)
                    .stroke(Color.red, lineWidth: 5)
            )

これで角丸ボタンの完成です。

ボタンを塗りつぶしたい場合は、Buttonビューの背景色をbackgroundColor修飾子で変更してください。

strokeで指定した色と同じであれば、塗りつぶされたボタンが出来ます。

stroke(_: Color, lineWidth: CGFloat )
第１引数：色を指定
第２引数：枠線の太さを指定

まとめ

overlay修飾子
RoundedRectangleで角丸の四角形を重ねる
strokeで枠線だけにする

の手順で角丸ボタンを作ることが出来ます。

補足

            Button(action: {}) {
                Text("ボタン")
            }
            .padding()
            .border(Color.black)
            .cornerRadius(10.0)

Buttonにborderで枠線をつけて、cornerRadiusで角を丸めれば同じように角丸ボタンは作れそうです。

しかし、borderとcornerRadiusの場合は、角が表示されなくなってしまいます。

なので、この記事で紹介したoverlay修飾子が最も使われる角丸ボタンの実装方法となります。