#1 UI(Text)の配置 - はじめてのSwift UI

1.はじめに

Swift UIが出てきましたのでちょっと触ってみようと思います。
今回は登場しませんがNavigation Linkの戻るボタンが動かないなど不具合があるようで、もうちょっと様子みてもいいかなって感じですが。

2.ファイルを作る

まずは[New File...]-[User Interface]-[SwiftUI View]より
SwiftUI Viewのファイルを作成します。

SwiftUIView.swift

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

↑こんな感じのファイルができますね。
右上の辺りにある[Resume]を押下すると、Previewを見ることができます。
Previewで表示する端末は、シミュレーター同様に画面左上から選択することで変更が可能です。

Previewにはど真ん中にHello, World!と表示されていると思います。
(たとえ世界が壊れても、もう一度、君に会いたい)

3.Swift UIでUIを配置する

SwiftUIはコードで簡単にUIを配置できるようです。
触ってみた感じ、HTMLでテーブルを作るイメージに近いのかなと感じたのでWeb製作者などにとっつきやすくなっているのかな？

3.1 上下に配置する

UIを上下に配置する場合は、VStack{}を使用します。

SwiftUIView.swift

struct SwiftUIView: View {
    var body: some View {
        VStack{
            Text("Up")
            Text("Buttom")
        }
    }
}

画面中央に文字が二段で表示されます。

「もっと一番上と一番下にしたいんだけど！！」って思った人
怒らないでください。そういう人はSpacer()を使いましょう。

SwiftUIView.swift

struct SwiftUIView: View {
    var body: some View {
        VStack{
            Text("Up")
            Spacer()
            Text("Buttom")
        }
    }
}

これだけです。枠の一番上と一番下に文字が行きました。
Spacer()は画面の空き部分を埋めるよう自動でサイズが調整されます。

正式名称忘れましたがSafe Area的なものがあって、
iPhoneX以降の上下曲線部分はここでいう一番上や一番下には含まれません。

3.2 左右に配置する

「3.1 上下に配置する」が理解できた方ならここは簡単です。
VStack()ではなくHStack()を使います。

SwiftUIView.swift

struct SwiftUIView: View {
    var body: some View {
        HStack{
            Text("Left")
            Text("Right")
        }
    }
}

もちろんSpacer()も使えますので、
どうなるかは実際に試してみてください。

3.3 上下左右の配置を組み合わせる

VStack()やHStack()は入れ子にすることができます。
以下のようにすることで、上下左右に配置できます。

SwiftUIView.swift

struct SwiftUIView: View {
    var body: some View {
        HStack{
            Text("Left")
            Spacer()
            VStack{
                Text("Up")
                Spacer()
                Text("Down")
            }
            Spacer()
            Text("Right")
        }
    }
}

3.4 11個以上の項目を並べる

VStack()やHStack()には10個までのUI(View)しか入れることができません。
以下のようにするとコンパイルエラーとなります。

SwiftUIView.swift

struct SwiftUIView: View {
    var body: some View {
        VStack{
            Text("Text1")
            Text("Text2")
            Text("Text3")
            Text("Text4")
            Text("Text5")
            Text("Text6")
            Text("Text7")
            Text("Text8")
            Text("Text9")
            Text("Text10")
            Text("Text11")
        }
    }
}

そんな時は適宜Group{}にまとめて10個以内に収めましょう。
Group{}は以下のような感じで使うことができます。

SwiftUIView.swift

struct SwiftUIView: View {
    var body: some View {
        VStack{
            Text("Text1")
            Text("Text2")
            Text("Text3")
            Text("Text4")
            Text("Text5")
            Text("Text6")
            Text("Text7")
            Text("Text8")
            Text("Text9")
            Group{
                Text("Text10")
                Text("Text11")
            }
        }
    }
}

また、ForEachを使うことで動的に並べることも可能です。

SwiftUIView.swift

struct SwiftUIView: View {
    var body: some View {
        VStack{
            ForEach(1 ..< 12){
                Text("Text\($0)")
            }
        }
    }
}

4 おわりに

とりあえずファイル作成して文字を並べるところを簡単にまとめました。
文字以外のUIも同様に並べられるかと思いますので、色々試してみたらいいんじゃないでしょうか。ではまた。