ConcentricRectangleでiOS26の同心円を基調としたデザインに追従しよう

はじめに

Liquid Glassや同心円を基調としたデザインのiOS26がリリースされました iOSアプリの開発者は、アプリのデザインもこれらに追従していく必要があります

Liquid Glassに注目が集まっていますが、SheetやFormなどのSwiftUIから提供されるパーツが同心円を基調としたデザインになり、角の丸みの具合が変化している影響も大きいです。

iOS26のUI変更に追従するにあたって、SheetやFormの変化に追従するために必要なConcentricRectangleの使い方を備忘録的にまとめておきます。

環境

Liquid Glassや同心円レイアウトのためのコンポーネントが提供されるXcode 26.0を利用します

ConcentricRectangleとは

ConcentricRectangleは、iOS26から新しく提供されるコンポーネントです。

公式ドキュメントでは以下のように解説されています

A shape that is replaced by a concentric version of the current container shape. If the container shape is a rectangle derived shape with four corners, this shape could choose to respect corners individually.

説明の通り、Shapeに準拠しており、RectangleやCapsuleと同様の使い方が可能です

iOS26では、iPhone自体の画面とUIとで、角の丸み具合を同じにするような変更が入り、全体の統一感の向上が図られています。 この変更によって、sheetやFormの丸み具合も変更されました。

ConcentricRectangleを使うことで、自作のUIに関しても、自動的に角の丸み具合が調整され、アプリ全体に統一感を持たせることができます。

具体的な使い方

使い方は非常に簡単です。 ConcentricRectangleは、親のViewがコンテナシェイプを持つとき、必要に応じて角の丸め具合を調整することができます。

4つの角それぞれに対して、丸め具合を自動的に調整したり、固定値を利用したりできます。

各角に設定できる値を次の3種類です

• 数値
  • 特定の丸め具合に固定される
• .concentric
  • 親に合わせて丸め具合を自動的に変更する
  • 丸めが不要な場合には、0を設定した場合と同様の振る舞いをする
• .concentric(minimum:)
  • 親に合わせて丸め具合を自動的に変更する
  • 丸めが不要な場合にも、丸め具合がminimum以下の状態にはならない

ConcentricRectangle(
	topLeadingCorner: 0, // 左上を丸め具合を0に固定
	topTrailingCorner: 28, // 右上を丸め具合を28に固定
	bottomLeadingCorner: .concentric, // 左下の丸め具合を親に合わせて自動で変更
	bottomTrailingCorner: .concentric(minimum: 12) // 右下の丸め具合を親に合わせて自動で変更。ただし、12以下の値にはならない。
)

他にも、すべての角を同一のパラメタで設定できるイニシャライザもあります ifUniformをtrueとすることで、すべての角が、4つの角の内最も丸め具合が大きなものに揃えられます falseの場合には、各角が親の状態によって個別に丸め具合の設定を行います。

ConcentricRectangle(
    corners: .concentric(minimum: 8),
    isUniform: true
)

まとめ

アプリを対応なくXcode26でビルドした場合、Liquid Glassの影響以外に、これまでRoundedRectangleを利用していた箇所で角丸の具合が合わず、違和感が出る問題が発生します。 ConcentricRectangleを利用することで、SheetやFormのUIの変化に追従し、統一感のあるデザインにすることができます。

必要に応じてConcentricrectangleを利用して、アプリ全体に統一感のあるデザインにしていきましょう！