記事

ビューの構成

ビュー修飾子を適用してビューの特性を調整します。

概観

SwiftUI では、ビューを階層構造に組み立て、アプリのユーザーインターフェースを記述します。アプリのビューの外観と動作をカスタマイズするには、ビュー修飾子 を使用します。例えば、修飾子を使用すると以下のようなことができます。

ビューにアクセシビリティ機能を追加します。

ビューのスタイル、レイアウト、その他の外観特性を調整します。

コピー＆ペーストなどのイベントに応答します。

ポップオーバーなどのモーダルビューを条件に応じて表示します。

ツールバーなどのサポートビューを設定します。

ビュー修飾子は View プロトコルによって提供される動作を持つ Swif tメソッドであるため、View プロトコルに準拠する、あらゆる型に適用できます。これには、Text、Image、Button などの組み込みビューだけでなく、独自に定義したビューも含まれます。

修飾子を使用してビューを構成する

他の Swift のメソッドと同様に、修飾子はインスタンス（この場合は何らかのビュー）に対して動作し、必要に応じて入力パラメータを受け取ることができます。例えば、 Text ビューの色を設定するには、foregroundColor(_:) 修飾子を適用できます。

Text("Hello, World!")
.foregroundColor(.red) // Display red text.

修飾子は、元のビューを包み込み、ビュー階層内でそれを置き換えるビューを返します。上記の例の 2 行は、赤いテキストを表示する単一のビューに解決されると考えることができます。

上記のコードは Swift のルールに従っていますが、SwiftUI を初めて使用する開発者にとってはコード構造が馴染みにくいかもしれません。SwiftUI は宣言型のアプローチを採用しており、コード内のビュー階層内に対応する位置でビューを宣言および構成します。詳しくは、カスタムビューの宣言をご覧ください。

複雑な効果を実現するため修飾子を連鎖

一般的に、修飾子を連鎖させ、それぞれが前の修飾子の結果を包み込むように、次々にそれらを呼び出します。例えば、テキストビューを、与えられた幅を持つ非表示のボックスで包み込むには、frame(width:height:alignment:) 修飾子を使ってレイアウトを調整し、border(_:width:) 修飾子を使ってその周囲にアウトラインを描画します。

Text("Title")
.frame(width: 100)
.border(Color.gray)

修飾子を適用する順序は重要です。例えば、上記のコードで生成される境界線は、フレームの幅全体にわたって表示されます。

border 修飾子の後に frame 修飾子を指定すると、SwiftUI はテキストビューにのみ境界線 (border) を適用し、その内容をレンダリングするために必要な以上のスペースを占有することはありません。

Text("Title")
.border(Color.gray) // Apply the border first this time.
.frame(width: 100)

そのビューを固定幅 100 ポイントの非表示のビューで包み込むと、複合ビューのレイアウトに影響しますが、境界線 (border) には影響しません。

子ビューの構成

View プロトコルで定義された任意のビュー修飾子を、任意の具体的なビューに適用できます。修飾子がターゲットビューに直接効果を及ぼさない場合でも適用できます。修飾子の効果は、修飾子を明示的にオーバーライドしない子ビューにも伝播します。

例えば、VStack インスタンス自体は他のビューを垂直に積み重ねるだけで、表示するテキストはありません。そのため、スタックに font(_:) 修飾子を適用してもスタックには影響しません。しかし、font 修飾子はスタックの任意の子ビューに適用され、その中にはテキストを表示するものもあります。ただし、特定の子ビューに別の修飾子を追加することで、スタックの修飾子をローカルにオーバーライドすることは可能です。

VStack {
Text("Title")
.font(.title) // Override the font of this view.
Text("First body line.")
Text("Second body line.")
}
.font(.body) // Set a default font for text in the stack.

ビュー特有の修飾子を使用する

多くのビューの型はカスタマイズと制御のために標準のビュー修飾子に依存していますが、一部のビューではそのビューの型特有の修飾子が定義されています。このような修飾子は、適切な種類のビュー以外では使用できません。例えば、Text では、ビューのテキストに太字効果を追加するための便利な方法として、bold() 修飾子が定義されています。font(_:) は View プロトコルの一部であるため、どのビューでも使用できますが、bold() は Text ビューでのみ使用できます。そのため、コンテナビューでは使用できません。