[SwiftUI]ViewにContinuousカーブを付ける

iOS7以降、Appleはアイコンデザインを変更し、アイコンの形状をcontinuousカーブに変えました。Continuousカーブとは、滑らかな曲線で構成された形状のことで、iOS7以降のアプリアイコンに使われています。

Continuousカーブは、アイコンの形状をより自然なものにするために使われます。従来の角ばったデザインよりも、より滑らかで美しいデザインとなります。また、カーブの形状によって、アイコンの見た目が大幅に変わることができます。

SwiftUIでContinuousカーブを付ける

SwiftUIでは、ViewのcornerRadiusを使用して角丸を実装できます。しかし、このcornerRadiusはContinuousカーブを作成することができません。

Color.black.cornerRadius(.infinity)

つまり、角が丸くなっているように見えるが、実際には多角形であるということです。

この問題はmaskメソッドを使用してcupsuleシェイプでマスクすることで解決できます。

Color.red.mask {
  Capsule(style: .continuous)
}

下のコードは、cornerRadiusを使用してViewを描画した場合と、maskメソッドを使用してcupsuleシェイプでマスクした場合を比較したものです。

ZStack {
    Color.black
        .cornerRadius(.infinity)
    Color.red
        .mask {
            Capsule(style: .continuous)
        }
}.frame(width: 240, height: 88)

cornerRadiusを使用した場合、角が丸くなっているように見えますが、黒い部分を見ると分かるように、実際には角があることがわかります。
一方、maskメソッドを使用した場合、Continuousなカーブが作成され、より滑らかな印象を与えます。

Continuousカーブは、デザインにおいて重要な要素の一つとなっています。iOS7以降の多くのアプリが、このデザインを採用しているため、UIデザインに興味のある方は、ぜひ学んでみることをおすすめします。