SwfftUIのOverlayに関してまとめます。
TextFieldに枠線を使う際になんとなく使っていたのですが、自分の勉強を兼ねてまとめました。
Viewの上に別のViewを重ねられるOverlayについて簡単にまとめます！
Oberlayとは？
Viewの上にViewを重ねる方法の一つです。
ZStackのようなものと思って使用しても問題ないです。
（ただし、こちらはモディファイアの一種なのでVStackのようなビュー全体を囲むようなレイアウト形式とは役割やpaddingなどの当たり方が異なります。）
使い方
.overlay(alignment: Alignment) {
Content
}alignment（省略可）
重ねるViewの配置位置を決めます。
Alignmentで指定している位置で配置することが可能です。
デフォルトでは、.centerが指定されています。
【！注意点】
注意点として位置は重ねるViewの位置を変更します。
重ねるビューの中身の要素位置は別で指定する必要があります。
Content
重ねる要素を指定します。
要素の上にViewを重ねる
TextFieldに角丸をつけてみます。
overlayで角丸の四角形をTextFieldに重ねることで枠線をつけます。
枠線を柔軟に変えることができるので重宝します。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
TextField("Sample",text: .constant(""))
.padding()
.overlay(alignment: .center){
// borderを表示する
RoundedRectangle(cornerRadius: 5)
.stroke(Color.black, lineWidth: 2)
}
}
.padding()
}
}
Viewの上に図形を重ねる（中央配置）
Viewの上に図形を重ねてみましょう
四角形の上に円を重ねます。
青い四角形の上にオレンジ色の丸を乗せました。今回はoverlayにalignmentを指定していないので中央に配置されています。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Rectangle()
.fill(.blue)
// overlayで正方形に丸を重ねる
.overlay {
Circle()
.fill(.orange)
}
}
.padding()
}
}
Viewの上に画像を重ねる
画像も重ねられます。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Rectangle()
.fill(Color.blue)
.padding()
.overlay(alignment: .center) {
// 画像を表示する
Image("SampleImage1")
.resizable()
.frame(width: 200, height: 200)
.background(Color.blue)
}
}
.padding()
}
}
コメント