Viewの重ね合わせに使うovarlayモディファイアについて解説します。
本モディファイアはiOS15.0以降で呼び出し方が変わりました。iOS14以前の使い方は、（アーカイブ）【SwiftUI】Viewの背景設定と重ね合わせを参照してください。
環境
この記事の情報は次のバージョンで動作確認しています。
【Swift】5.6
【iOS】15.4
【macOS】Monterey バージョン 12.3
overlayモディファイアの概要
overlayモディファイアは用途によって、次の３つの使い方があります。
以降の章で各々の使い方を解説します。
- Viewの上に別のViewを重ねる
- Viewの上に塗りつぶし図形を重ねる
- Viewの上にスタイルを重ねる
尚、本モディファイアは複数重ねが可能です。
Viewの上に別のViewを重ねる
|
1 2 3 4 5 |
.overlay(alignment: Alignment) { content } |
Viewの上に別のViewを重ねる際に使うイニシャライザです。
過去のバージョンで使用していたイニシャライザ.overlay(View, alignment:)は、iOS15以降こちらに置き換わりました。
【引数】
alignment（省略可）
元Viewに対する重ね合わせViewの配置位置をAlignmentで指定します。
省略した場合は.centerが適用されます。
content
重ね合わせるViewを記述します。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
struct ContentView: View { var body: some View { /// 円形描画 Circle() .fill(Color.blue) // 青で塗りつぶし .frame(width: 200, height: 200) // フレームサイズ /// 文字を重ね合わせ .overlay { Text("カピ通信") // テキスト文字 .font(.largeTitle) // フォント指定 .foregroundColor(.white) // 文字色を白に } /// 外枠を重ね合わせ .overlay{ Circle() // 円形部品 .stroke(Color.white, lineWidth: 4) // 白い輪郭 .shadow(radius:4) // 影を付ける } /// スターを重ね合わせ .overlay(alignment: .bottom) { // 配置位置を下部に指定 Text("⭐⭐⭐") // 三ツ星表示 .font(.system(size: 50)) // フォントサイズ指定 } } } |
Viewの上に塗りつぶし図形を重ねる
|
1 2 3 |
.overlay(style, in: Shape, fillStyle: FillStyle) |
Viewの上に塗りつぶし図形を重ねる際に使うモディファイアです。
【引数】
style
重ね合わせる図形を塗りつぶすViewを指定します。
指定できるのはColorやグラデーション、Image等、ShapeStyleプロトコルに準拠したViewのみです。
in
重ね合わせる図形の形状を、組み込み図形やカスタムShapeなどのShapeプロトコルに準拠したViewで指定します。
fillStyle（省略可）
塗りつぶしのレンダリングスタイルをFillStyle構造体で指定します。省略した場合は引数無しの"FillStyle()"が指定されます。
使用例
fillStyleオプションを使わない場合は、前途のイニシャライザ「Viewの上に別のViewを重ねる」を使ったほうが使い勝手が良いように思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
struct ContentView: View { var body: some View { /// 四角形描画 Rectangle() .fill(Color.orange) // オレンジで塗りつぶし .frame(width: 200, height: 200) // フレームサイズ指定 /// 塗りつぶし図形を重ね合わせ .overlay(Color.blue, // 青色指定 in: ThreeCircles(), // ３つの円のカスタムShape fillStyle: FillStyle(eoFill: true) // レンダリングスタイル指定 ) /// 文字を重ね合わせ .overlay { Text("カピ通信") // テキスト文字 .font(.largeTitle) // フォント指定 .foregroundColor(.white) // 文字色を白に } } } /// ３つの円を描くカスタムShape struct ThreeCircles: Shape { func path(in rect: CGRect) -> Path { let sizeX = rect.width * (2 / 3) // 円の高さ let sizeY = rect.height * (2 / 3) // 円の幅 let point1 = rect.minX + rect.width / 6 // 円1の描画開始位置（X軸） let point2 = rect.minY + rect.height / 3 // 円2,円3の描画開始位置（Y軸） let point3 = rect.minX + rect.width / 3 // 円3の描画開始位置（X軸） return Path { path in /// 円1描画 path.addEllipse(in: CGRect(x: point1, y: rect.minY, width: sizeX, height: sizeY)) /// 円2描画 path.addEllipse(in: CGRect(x: rect.minX, y: point2, width: sizeX, height: sizeY)) /// 円3描画 path.addEllipse(in: CGRect(x: point3, y: point2, width: sizeX, height: sizeY)) } } } |
Viewの上にスタイルを重ねる
|
1 2 3 |
.overlay(style, ignoresSafeAreaEdges: Edge.Set) |
Viewの上にShapeStyle（Colorやグラデーション、Image等の塗りつぶしView）を配置するモディファイアです。
ShapeStyleを重ね合わせるのは、前途のイニシャライザでもできますが、こちらはセーフエリア外への拡張可否を制御できるのがポイントです。
コンテンツはセーフエリア内に収めつつカバーシートを画面全体に適用、等の制御ができます。
【引数】
style
重ね合わせるViewを指定します。
指定できるのはColorやグラデーション、Image等、ShapeStyleプロトコルに準拠したViewのみです。
ignoresSafeAreaEdged（省略可）
セーフエリアを拡張するエッジをEdge.Setで指定します。
引数無しの場合、.all（全方向に拡張） と同じになります。
複数の方向をコレクション形式で[.top, .trailing]のように指定可能です。
拡張無しにするには空のコレクション"[]"を指定します。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
struct ContentView: View { var body: some View { /// カプセル型描画 Capsule() /// 塗りつぶし指定 .fill( /// 円すい状グラデーション AngularGradient( gradient: Gradient(colors: [.green, .black, .green]), // 緑→黒→緑 center: .center) // 円すいの中心位置 ) /// 半透明の灰色シートを重ね合わせ .overlay( Color.gray.opacity(0.5), // 半透明の灰色指定 ignoresSafeAreaEdges: [.bottom] // 下方向のエッジを拡張 ) } } |
あわせて読みたい記事
