SwiftUI入門-勉強メモ002-【レイアウトその1 HStack, VStack, ZStack】

今回はレイアウトの基本HStack, VStack, XStackです. それぞれ横, 縦, 重ねるためのものになります.

環境は,

  • macOS Catalina 10.15.6
  • Xcode 12.0
  • Swift 5.3
  • iOS 14.0

です.

目次

HStack

VStackはViewトを横に並べて表示します.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        HStack{
                Text("A").font(.largeTitle)
                Text("B").font(.largeTitle)
                Text("C").font(.largeTitle)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

SubViewの間隔をspacingで調整できます.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        HStack(spacing: 100) {
                Text("A").font(.largeTitle)
                Text("B").font(.largeTitle)
                Text("C").font(.largeTitle)
        }
    }
}
SwiftUI

VStack

VStackはViewを縦に並べて表示します.

コードも先ほどのHStackと一文字しか変わりません.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack{
                Text("A").font(.largeTitle)
                Text("B").font(.largeTitle)
                Text("C").font(.largeTitle)
        }
    }
}

ZStack

ZStackはViewを重ねて表示します.

コードも先ほどのHStack, VStackと一文字しか変わりません. (コード載せる必要すらありませんね.)

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        ZStack{
                Text("A").font(.largeTitle)
                Text("B").font(.largeTitle)
                Text("C").font(.largeTitle)
        }
    }
}
A, B, Cの文字が重なっています

複雑なレイアウト

今までの例でわかるように, HStack, VStack, ZStackはデフォルトで中心に並びます. また, これらを組み合わせることによって複雑なレイアウトも実装できます.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack{
            HStack{
                Text("A").font(.largeTitle)
                Text("B").font(.largeTitle)
                Text("C").font(.largeTitle)
            }
            HStack{
                Text("D").font(.largeTitle)
                Text("E").font(.largeTitle)
                Text("F").font(.largeTitle)
            }
            HStack{
                Text("G").font(.largeTitle)
                Text("H").font(.largeTitle)
                Text("I").font(.largeTitle)
            }
        }
    }
}
SwiftUI

ForEachを使うと格子状の配置も簡単に作成できます.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack{
            ForEach(0..<8) {_ in
                HStack{
                    ForEach(0..<5) {_ in
                        Text("ABC")
                            .font(.title)
                    }
                }
            }
        }
    }
}
SwiftUI

alignmentでのレイアウトの調整

HStack, VStack, ZStackはどれもalignmentプロパティを持っています. alignmentで位置を調整することができます.

説明
.center中央揃え
.top上揃え
.bottom下揃え
.leading左揃え
.trailing右揃え

HStackでalignmentを使用

横の配置ですので, center, top, bottomの選択が可能です.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        HStack(alignment: .top){
            Text("ABC")
                .background(Color.blue)
            Text("DEFGH")
                .font(.largeTitle)
                .background(Color.green)
        }
    }
}
SwiftUI
HStack .center
SwiftUI
HStack .top
SwiftUI
HStack .bottom

VStackでalignmentを使用

縦の配置ですので, center, leading, trailingの選択が可能です. Vstackもほとんど変わりませんので, コードは割愛します.

SwiftUI
VStack .center
SwiftUI
VStack .leading
SwiftUI
VStack .trailing

ZStackでalignmentを使用

center, top, bottom, leading, trailingすべての選択が可能です. 文字が重なっているのでわかりにくいですが, ABCの上にDEFGHがのっています.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        ZStack(alignment: .center){
            Text("ABC")
                .background(Color.blue)
            Text("DEFGH")
                .font(.largeTitle)
        }
    }
}
SwiftUI
ZStack .center
SwiftUI
ZStack .top
SwiftUI
ZStack .bottom
SwiftUI
ZStack .leading
SwiftUI
ZStack .traling

実は10個まで?

VStackやHStackはViewを10個までしか並べられません. 10個以上並べようとするとエラーになります.

VStackやHStackを使って複数のコントロールを並べられることがわかったところで「よし、もっともっとたくさん並べてみよう」と試してみた人もいるかもしれませんね。すると、ちょっと予想外なことになります。ただTextを並べていくだけなのに、ある時点でいきなりエラーになり動かなくなるのです。

実をいえばSwiftUlでは、コンテナに組み込めるコントロールは最大10個までなのです。それ以上は組み込めません。

掌田 津耶乃著 iOS/macOS UIフレームワーク SwiftUIプログラミング(2020/05/26発売) P.68より抜粋

ViewBuilder型の定義が10個までしか許容していないからですかね…

例えば以下のコードはエラーになります.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("ABC_1")
            Text("ABC_2")
            Text("ABC_3")
            Text("ABC_4")
            Text("ABC_5")
            Text("ABC_6")
            Text("ABC_7")
            Text("ABC_8")
            Text("ABC_9")
            Text("ABC_10")
            Text("ABC_11")
        }
    }
}
SwiftUI

ForEachを使えば, 15個でビルトできました.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack{
            ForEach(0..<15) {index in
                Text("ABC_\(index)")
                    .font(.largeTitle)
                
            }
        }
    }
}
SwiftUI

どうやら回避方法はいろいろありそうです.

コメント

コメントする

目次
閉じる