【SwiftUI】角丸ボタンの作り方

今回はよくある角を丸くしたデザインのボタンを SwiftUI で作ってみます。

下記のイメージのように、塗り潰しタイプと縁タイプの２種類を紹介します。

SwiftUI で角丸ボタンを作る

A. 塗り潰しタイプ

Button(action: {
    doSomething()
}) {
    Text("角丸塗り潰し")
        .fontWeight(.semibold)
        .frame(width: 160, height: 48)
        .foregroundColor(Color(.white))
        .background(Color(.blue))
        .cornerRadius(24)
}

Button を丸くしているというよりかは、Button の要素である Text に対して設定を施しています。

塗り潰しタイプは簡単で、cornerRadius(radius: CGFloat) を設定し背景色を指定するだけでそれっぽくなります。

また、横長のボタンの場合は高さの半分の値を cornerRadius に指定するとカプセルの様な形になります。縦長にする場合はその逆です。

なお、cornerRadius は frame や foregroundColor・background の後に指定しないと適用されないので注意してください。

B. 縁タイプ

Button(action: {
    doSomething()
}) {
    Text("角丸縁あり")
        .fontWeight(.semibold)
        .frame(width: 160, height: 48)
        .foregroundColor(Color(.red))
        .background(Color(.white))
        .cornerRadius(24)
        .overlay(
            RoundedRectangle(cornerRadius: 24)
                .stroke(Color(.red), lineWidth: 1.0)
        )
}

縁タイプの場合は、cornerRadius の後に overlay(overlay: View) で RoundedRectangle を重ねます（overlay についてはこちらの記事をご覧下さい）。

縁を表現するには、stroke(content: ShapeStyle, lineWidth: CGFloat) を使います。

content: に Color を指定し、lineWidth: には線の太さを指定します。

なお、border という View の境界線を表示できるプロパティがありますが、SwiftUI の初期の頃では、border(cornerRadius: CGFloat) という指定ができたのですが、現在は cornerRadius の引数が削除されていますので今回の様な表現には使えません。

以上

【関連記事】