SwiftUIでborderの角を丸くする方法(cornerRadius)

はじめに

どうもSwiftUI大好きエンジニアです
今回ご紹介するSwiftUI tipsはborderの角を丸くする方法です。
簡単なのですが、ちょっと素直にできなかったのでメモとして残しておきます

実行環境: Xcode12 iOS14

素直に実装してみる

サンプルのView

struct ContentView: View {
    var body: some View {
        Text("マリオ")
            .font(.largeTitle)
            .bold()
            .padding()
    }
}

マリオさんです。

borderを単純につけてみる

struct ContentView: View {
    var body: some View {
        Text("マリオ")
            .font(.largeTitle)
            .bold()
            .padding()
            .border(Color.red, width: 4)
    }
}

だいぶ角が尖っています。荒々しいですね

borderを丸めてみたい（失敗）

struct ContentView: View {
    var body: some View {
        Text("マリオ")
            .font(.largeTitle)
            .bold()
            .padding()
            .border(Color.red, width: 4)
            .cornerRadius(16) // ← failure
    }
}

borderごと削られてしまいました

角を丸める（結論）

以下のようにRoundedRectangleをoverlayしましてoverlayしたRoundedRectangleをstrokeメソッドを使ってborderにするとborderに角を丸くすることができます。

struct ContentView: View {
    var body: some View {
        Text("マリオ")
            .font(.largeTitle)
            .bold()
            .padding()
//            .border(Color.red, width: 4) 削除する
            .overlay(
                RoundedRectangle(cornerRadius: 16)
                    .stroke(Color.red, lineWidth: 4)
            )
    }
}

だいぶ角が取れて丸くなりましたね、もう怖くないです!

結論

borderの角を丸くしたい場合はborderを使わない

余談

Xcode11 beta6までは以下のようにborderメソッドでcornerRadiusを指定することができていたようですが、なぜかdeprecatedになったみたいです。
どうしてですかね？知っている方教えてください

.border(Color.purple, width: 5, cornerRadius: 20)

以下のように実装すると点線とかにできて面白いです

struct ContentView: View {
    var body: some View {
        Text("マリオ")
            .font(.largeTitle)
            .bold()
            .padding()
            .overlay(
                RoundedRectangle(cornerRadius: 16)
                    .stroke(Color.red, style: StrokeStyle(lineWidth: 4, dash: [8]))
            )
    }
}

参考

SwiftUI Tip: Drawing a Border with Rounded Corners for Buttons and Text

宣伝

SwiftUIで作ったアプリをたくさん公開しているので是非使ってみてください！
https://apps.apple.com/jp/developer/ryo-tsudukihashi/id1320583602?l
ツイッターやってますので、是非フォローしてください
https://twitter.com/tsuzuki817