ヤプリで iOS エンジニアをしている三宅です！
最近業務で「アプリアイコン」をアプリ上に表示することがあったので、その時に気になった 角丸 について触れたいと思います。
iPhone のホーム画面に並ぶアイコンはご存知の方も多いと思いますが、単純に Corner Radius を設定しているだけではありません。Continuous Corner Curve と呼ばれる通常よりも滑らかでより丸みを感じるように設計されています。
実際に使われている App Icon のデザインテンプレートが以下から確認できるので見てみてください！
この Continuous Corner Curve は実は iOS 13 からプロパティを設定するだけで表現可能となっているため、検証してみたいと思います💪🏻
※この記事は ヤプリ Advent Calendar 2021 23日目の記事です！
実装といっても 1行 設定するレベルですが、シンプルな角丸ありの View を例にみていきたいと思います！
※ 詳細の実装は記事最後のリンクからご参照ください
https://gist.github.com/atsushi130/fa8cbf1520fbba52cd212541c4921f57
cornerCurve というプロパティに .continuous を設定しています。
この cornerCurve は iOS13 から提供されているプロパティで、CALayer に以下のように定義されています。デフォルトでは .circular が設定されています。
実際に View を見てみると、以下のような連続的なカーブを簡単に描くことができました。
とはいえデフォルトの circular と比較してみないとはっきりと違いが分からないので、差分を見て確認していきます。以下は、サンプルコードの RoundedView に circular を指定して生成した View を表示したものです。
