[SwiftUI] ZStackの配置、余白、背景色等の設定

ZStackを使ってレイアウトをする上で、alignmet、background、frame等はどのように設定するのか確認してみます。

Xcode 13..14

ZStack

ZStackなどStackには他にVStack、HSTackやLazyVStack、LazyHStackがありました。
VStackはいわゆる平面的なY軸の垂直方向、HStackはX軸の水平方向ですが、
ZStackはZ軸の立体的な垂直方向になります。

[SwiftUI] VStack と HStack によるレイアウト

複数のアイテムを設定するために、VStack、HStack、ZStackを使ってレイアウトできます。またLazyVStack, La…

ここでは特にZStackについて細かく設定を確認します。

目次
1. alignment
1.1 topLeading
1.2 top
1.3 topTrailing
1.4 leading
1.5 center
1.6 trailing
1.7 bottomLeading
1.8 bottom
1.9 bottomTrailing
2. background
3. frame

alignment

ZStackはViewを重ねますが子Viewに対して alignment ができます。デフォルトはcenterですがその他八方向に配置が可能です。

topLeading	top	topTrailing
leading	center	trailing
bottomLeading	bottom	bottomTrailing

topLeading

Circle図形と文字列のStackです。

ZStack(alignment: .topLeading){
    Circle()
        .frame(width: 200,
               height: 200,
               alignment: .center)
        .foregroundColor(.orange)
    Text("ZStack")
}

ZStack(alignment: .topLeading){

Circle()

.frame(width: 200,

height: 200,

alignment: .center)

.foregroundColor(.orange)

Text("ZStack")

}

（青い矩形枠はStackを選択した場合に領域を表示してくれるもので、実際は枠はありません。）

top

ZStack(alignment: .top){
    …
}

ZStack(alignment: .top){

…

}

topTrailing

ZStack(alignment: .topTrailing){
    …
}

ZStack(alignment: .topTrailing){

…

}

leading

ZStack(alignment: .leading){
    …
}

ZStack(alignment: .leading){

…

}

center

ZStack(alignment: .center){
    …
}

ZStack(alignment: .center){

…

}

trailing

ZStack(alignment: .trailing){
    …
}

ZStack(alignment: .trailing){

…

}

bottomLeading

ZStack(alignment: .bottomLeading){
    …
}

ZStack(alignment: .bottomLeading){

…

}

bottom

ZStack(alignment: .bottom){
    …
}

ZStack(alignment: .bottom){

…

}

bottomTrailing

ZStack(alignment: .bottomTrailing){
    …
}

ZStack(alignment: .bottomTrailing){

…

}

background

ZStack内のView領域を背景色で色付けしてみましょう。

// background
ZStack{
    Circle()
        .frame(width: 200,
               height: 200,
               alignment: .center)
        .foregroundColor(.orange)
    Text("ZStack")
}
.background(Color.blue)

// background

ZStack{

Circle()

.frame(width: 200,

height: 200,

alignment: .center)

.foregroundColor(.orange)

Text("ZStack")

}

.background(Color.blue)

Color.blue で青色を指定しましたが、他の固定色は以下です。

Color.black
Color.blue
Color.gray
Color.green
Color.orange
Color.pink
Color.red
Color.white
Color.yellow

frame

ZStackの領域をframeを使って限定してみます。

// frame の　横幅、縦長、フレーム内での位置
frame(width: CGFloat, height: CGFloat, alignment = .center)

1 2	// frame の横幅、縦長、フレーム内での位置 frame(width: CGFloat, height: CGFloat, alignment = .center)

これを使ってZStackを使うとこうなります。

// frame
ZStack{
    Circle()
        .frame(width: 200,
               height: 200,
               alignment: .center)
        .foregroundColor(.orange)
    Text("ZStack")
}
.frame(width:300,
       height:300,
       alignment: .center)

// frame

ZStack{

Circle()

.frame(width: 200,

height: 200,

alignment: .center)

.foregroundColor(.orange)

Text("ZStack")

}

.frame(width:300,

height:300,

alignment: .center)

またframeをSafe Areaまで広げることもできます。

ZStack{
    Circle()
        .frame(width: 200,
               height: 200,
               alignment: .center)
        .foregroundColor(.orange)
    Text("ZStack")
}
.frame(maxWidth: .infinity,
       maxHeight: .infinity)
.background(Color.green)

ZStack{

Circle()

.frame(width: 200,

height: 200,

alignment: .center)

.foregroundColor(.orange)

Text("ZStack")

}

.frame(maxWidth: .infinity,

maxHeight: .infinity)

.background(Color.green)

References:
init(alignment:content:)
ZStack | Apple Developer Documentation
Alignment | Apple Developer Documentation
Color | Apple Developer Documentation
frame(width:height:alignment:) | Apple Developer