SwiftUIのはじめかた。　View 画面

コードを書いていく場所

見た目を決めるコードを書いていく場所ですが

Apple Developer Documentation

protocol View

これを使って構成されています。具体的にはXcodeで新規でプロジェクトを作った時にできる

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

です。

var body: some View {
　　ここに画面に使う部品を入れていきます
}

画面作りに必要な部品について。

多く使われるのはやっぱり文字ではないでしょうか。文字によって操作、見た目がだいぶ変わってくるように思います。

Text Input and Output

文字の表示

Text | Apple Developer Documentation

@frozen struct Text

と定義されている構造体です。使い方は

Text("Hello")

そして文字をいろいろ修飾できるモディファイア。

.font(.title)

これは文字を大きくします。

Images

画像の表示

Apple Developer Documentation

@frozen struct Image

  Image(systemName: "play.rectangle.fill")

画像はSF Symbolsを使っています。そしてモディファイア

  .font(.largeTitle)

これは大きさを変化させます。

画面に表示させるものをレイアウトするための部品として

Layout Containers

VStackの使い方　・・・　縦並び

VStack | Apple Developer Documentation

@frozen struct VStack<Content> where Content : View

と定義され、

var body: some View {
    VStack(
        alignment: .leading,
        spacing: 10
    ) {
        ForEach(
            1...3,
            id: \.self
        ) {
            Text("Item \($0)")
        }
    }
}

を実行すると

Item1 
Item2
Item3

と縦に並びます。

HStackの使い方　・・・　横並び

HStack | Apple Developer Documentation

@frozen struct HStack<Content> where Content : View

と宣言され、

var body: some View {
    HStack(
        alignment: .top,
        spacing: 10
    ) {
        ForEach(
            1...5,
            id: \.self
        ) {
            Text("Item \($0)")
        }
    }
}

とすると横一列に

Item1 Item2 Item3 Item4 Item15

と表示されます。

ZStackの使い方　・・・　重なった表示

ZStack | Apple Developer Documentation

@frozen struct ZStack<Content> where Content : View

と宣言されていて

let colors: [Color] =
    [.red, .orange, .yellow, .green, .blue, .purple]


var body: some View {
    ZStack {
        ForEach(0..<colors.count) {
            Rectangle()
                .fill(colors[$0])
                .frame(width: 100, height: 100)
                .offset(x: CGFloat($0) * 10.0,
                        y: CGFloat($0) * 10.0)
        }
    }
}

実行すると重なりを持った四角が表示されます。

Collection Containers

画面にリスト表示ができるようになります。上から順番に表示することができます。

List

Apple Developer Documentation

struct List<SelectionValue, Content> where SelectionValue : Hashable, Content : View

と宣言されていて使うのは簡単、

var body: some View {
    List {
        Text("A List Item")
        Text("A Second List Item")
        Text("A Third List Item")
    }
}

List { ここに表示したいものを書く}

と書くだけでリストができます。

Presentation Containers

タブで画面を使い分けることができるようになります。

TabView

Apple Developer Documentation

struct TabView<SelectionValue, Content> where SelectionValue : Hashable, Content : View

と宣言され、

TabView {
    Text("The First Tab")
        .badge(10)
        .tabItem {
            Image(systemName: "1.square.fill")
            Text("First")
        }
    Text("Another Tab")
        .tabItem {
            Image(systemName: "2.square.fill")
            Text("Second")
        }
    Text("The Last Tab")
        .tabItem {
            Image(systemName: "3.square.fill")
            Text("Third")
        }
}
.font(.headline)

を実行すると

タブわけした画面が出てきます。それぞれタブを押すと切り替わり違う表示をさせることができます。

SwiftUIを使うことで画面に映し出すことが簡単にできるようになりました。