Viewの背景を指定、またはViewの背後に別のViewを配置するbackgroundモディファイアについて解説します。
本モディファイアはiOS15.0以降で呼び出し方が変わりました。iOS14以前の使い方は、（アーカイブ）【SwiftUI】Viewの背景設定と重ね合わせを参照してください。
環境
この記事の情報は次のバージョンで動作確認しています。
【Swift】5.6
【iOS】15.4
【macOS】Monterey バージョン 12.3
backgroundモディファイアの概要
backgroundモディファイアは用途によって、次の３つの使い方があります。
以降の章で各々の使い方を解説します。
- Viewの後ろに別のViewを配置する
- Viewの後ろに塗りつぶし図形を配置する。
- Viewの背景を指定する
尚、本モディファイアは複数重ねが可能です。
Viewの後ろに別のViewを配置する
|
1 2 3 |
.background(alignment: Alignment) { 背景View } |
Viewの後ろに別のViewを配置する際に使うイニシャライザです。
過去のバージョンで使用していたイニシャライザ.background(View, alignment:)は、iOS15.0以降こちらに置き換わりました。
【引数】
alignment（省略可）
元Viewに対する背景Viewの配置位置をAlignmentで指定します。
省略した場合は.centerが適用されます。
背景View
背景に描画するViewを記述します。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
struct ContentView: View { var body: some View { Text("カピ通信") .foregroundColor(.white) .padding() .background { Text("🍎") } .background(alignment: .topLeading) { Text("⭐️") } .background(alignment: .bottomTrailing) { Text("💚") } .font(.largeTitle) .background(Color.blue) } } |
Viewの後ろに塗りつぶし図形を配置する。
|
1 2 3 |
.background(スタイル, in: 図形, fillStyle: FillStyle) |
Viewの後ろに塗りつぶし図形を配置する際に使うイニシャライザです。
【引数】
スタイル（省略可）
背後に配置する図形を塗りつぶすViewを指定します。
指定できるのはColorやグラデーション、Image等、ShapeStyleプロトコルに準拠したViewのみです。
引数無しの場合は、現在のモード（ダーク/ライト）に応じたシステムデフォルトの背景が適用されます。（注：引数無しの別イニシャライザとして実装されている）
in
背後に配置する図形の形状を、組み込み図形やカスタムShapeで指定します。
指定できるのはShapeプロトコルまたはInsettabeleShapeプロトコルに準拠した図形です。（注：プロトコルの異なる別イニシャライザとして実装されている）
fillStyle（省略可）
塗りつぶしのレンダリングスタイルをFillStyle構造体で指定します。省略した場合は引数無しの"FillStyle()"が指定されます。
使用例
|
1 2 3 4 5 6 7 8 9 10 |
struct ContentView: View { var body: some View { Text("カピ通信") .font(.largeTitle) .padding() .background(Color.blue, in: Capsule()) } } |
Viewの背景を指定する
|
1 2 3 |
.background(背景スタイル, ignoresSafeAreaEdged: Edge.Set) |
Viewの後ろにShapeStyle（Colorやグラデーション、Image等の塗りつぶしView）を配置するイニシャライザです。
ShapeStyleを背後に配置するのは、前途のイニシャライザでもできますが、こちらはセーフエリア外への拡張可否を制御できるのがポイントです。
コンテンツはセーフエリア内に収めつつ背景は画面全体に適用、等の制御ができます。
【引数】
背景スタイル（省略可）
背景に描画するViewを指定します。
指定できるのはColorやグラデーション、Image等、ShapeStyleプロトコルに準拠したViewのみです。
引数無しの場合は、現在のモード（ダーク/ライト）に応じたシステムデフォルトの背景が適用されます。（注：引数無しの別イニシャライザとして実装されている）
ignoresSafeAreaEdged（省略可）
セーフエリアを拡張するエッジをEdge.Setで指定します。
引数無しの場合、.all（全方向に拡張） と同じになります。
複数の方向をコレクション形式で[.top, .trailing]のように指定可能です。
使用例
このモディファイアを使用するとデフォルトでセーフエリアが拡張されます。
拡張無しにする場合は次のように空のコレクション"[]"を指定します。
|
1 2 3 4 5 6 7 8 9 |
struct ContentView: View { var body: some View { Capsule() .fill(Color.primary.opacity(0.5)) .background(Color.blue, ignoresSafeAreaEdges: []) } } |
あわせて読みたい記事
