SmallDeskSoftware 
Sponsor Link
環境＆対象
- macOS Monterey 12.1 RC
- Xcode 13.2 RC
- iOS 15.2
push-out ビューのレイアウト
前回、push-out/pull-in タイプのビューを説明しました。
[SwiftUI] SwiftUI の layout システムを理解する (push-out タイプビュー, pull-in タイプビュー とレイアウトの調整)
pull-in タイプのビューは、自分が必要とする領域を使用し、push-out タイプのビューは、可能な限り広い領域を使おうとします。
ある意味、pull-in タイプのビューの振る舞いはわかりやすいのですが、複数の push-out タイプのビューが領域を取り合うとどうなるのでしょうか？
確認してみます。
２つの push-out タイプのビューの調停
２つの push-out タイプのビューを並べた時の挙動を確認します。
単純にするために、VStack に ２つの Color を配置しています。
//
// ContentView.swift
//
// Created by : Tomoaki Yagishita on 2021/12/09
// © 2021 SmallDeskSoftware
//
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing:0) {
Color.red
Color.yellow
}
}
}
どのように調停されているのか
みたところ、使える領域の半分づつをそれぞれに与えられているように見えます。
状況を再確認してみると、Color.red と Color.yellow どちらも frame で固定高さを与えられておらず、さらにどちらも push-out タイプのビューです。
このような時には、VStack として それぞれに使える領域の半分を与えているように見えます。
＃ 公式にどのように Layout されるかの資料はありませんので、推測で書いてます。
この推測を補強するために、もう少し挙動を調べてみます。
３つの push-out タイプのビューの調停
予想通りです👍
数値でも確認できるようにするために、与えられている領域を数値で表示するようにしています。
//
// ContentView.swift
//
// Created by : Tomoaki Yagishita on 2021/12/09
// © 2021 SmallDeskSoftware
//
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing:0) {
Color.red
.overlay{
GeometryReader { geom in
Text("\(geom.size.width) - \(geom.size.height)")
}
}
Color.yellow
.overlay{
GeometryReader { geom in
Text("\(geom.size.width) - \(geom.size.height)")
}
}
Color.green
.overlay{
GeometryReader { geom in
Text("\(geom.size.width) - \(geom.size.height)")
}
}
}
}
}
３つの push-out タイプのビュー(Color.red, Color.yellow, Color.green) に均等に領域を与えていることが数値でも確認できました。
以前、Spacer の使い方の記事を書きましたが、あれは Spacer が push-out タイプのビューであることで、上記の性質を利用しているということがわかります。
[SwiftUI] あまり知られていない Spacer の使い方
pull-in タイプのビューが混ざって、複数の push-out タイプのビューがあるとき
複数の push-out タイプがあるときは、均等に領域が与えられることがわかりましたが、pull-in タイプのビューが混ざっている時には、どうなるか確認してみます。
結果として表示されている数値を見ると、Text に与えた分の高さが pull-out タイプのビューの高さから 均等に減っていることがわかります。(271.333 – (30 * 2)/3 = 251.333)
このことから、レイアウトする時には、最初に 指定値を持つ要素に領域を与え、指定値を与えられていない push-out タイプのビューは、残りを均等に分けて与えられると推測できます。
//
// ContentView.swift
//
// Created by : Tomoaki Yagishita on 2021/12/09
// © 2021 SmallDeskSoftware
//
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing:0) {
Color.red
.overlay{
GeometryReader { geom in
Text("\(geom.size.width) - \(geom.size.height)")
}
}
Text("Hello").frame(height: 30).frame(maxWidth: .infinity)
.overlay{
GeometryReader { geom in
Text("\(geom.size.width) - \(geom.size.height)")
}
}
Color.yellow
.overlay{
GeometryReader { geom in
Text("\(geom.size.width) - \(geom.size.height)")
}
}
Text("world").frame(height: 30).frame(maxWidth: .infinity)
.overlay{
GeometryReader { geom in
Text("\(geom.size.width) - \(geom.size.height)")
}
}
Color.green
.overlay{
GeometryReader { geom in
Text("\(geom.size.width) - \(geom.size.height)")
}
}
}
}
}
わかったこと/わかっていないこと
- わかったこと１：複数の push-out タイプビューは、領域を均等に与えられてレイアウトされる
- わかったこと２：pull-in タイプビューは、必要とする領域を最初（push-out タイプビューよりも先）に与えられる
- わかっていないこと１：領域が不足している時どうなる？
- わかっていないこと２：ビューが階層化している時どうなる？
結構、複雑化しそうなので、今後も 少しづつ 確認・説明していきます。
まとめ： SwiftUI の layout システムを理解する (push-out タイプビューの調停）
- push-out タイプのビューは、残っている領域を使って表示しようとする
- 複数の push-out タイプのビューは、残り領域を均等に与えられてレイアウトされる
[SwiftUI] SwiftUI の layout システムを理解する (準備編: border と GeometryReader )
[SwiftUI] SwiftUI の layout システムを理解する (基礎編: レイアウトシーケンス)
[SwiftUI] SwiftUI の layout システムを理解する ( .frame の働き)
[SwiftUI] SwiftUI の layout システムを理解する (push-out タイプビュー, pull-in タイプビュー とレイアウトの調整)
[SwiftUI] SwiftUI の layout システムを理解する (コンテナビューに含まれる push-out / pull-in タイプビューの調停）
[SwiftUI] SwiftUI の layout システムを理解する (領域が不足するケースの調停)
[SwiftUI] SwiftUI の layout システムを理解する (Text)
説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。
関連記事:
Sponsor Link
