SwiftUI のチュートリアルをやっていく

薄田達哉 / tatsuyasusukida

このスクラップについて

下記のチュートリアルをやっていく過程を記録する。

薄田達哉 / tatsuyasusukida

プロジェクト作成まで進めてしまった

SwiftUI ではアプリは App を継承？する必要があるようだ。
body プロパティは 1 つ以上のシーンを返す必要がある。
@main 属性はアプリのエントリーポイントであることを示している。

LandmarksApp.swift

import SwiftUI

@main
struct LandmarksApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

薄田達哉 / tatsuyasusukida

Git バージョン管理

どれを ignore すれば良いんだろう？

薄田達哉 / tatsuyasusukida

ContentView

View ファイルでは UI の構造を宣言する。
View の構造体は View プロトコルに適合している必要がある。
body プロパティで 1 つ以上のビューを返す必要がある。
#Preview 宣言を使うことでプレビューが表示される。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

プレビューは Editor > Canvas から表示・非表示を切り替えられる。

薄田達哉 / tatsuyasusukida

次は Customize the text view から

薄田達哉 / tatsuyasusukida

Customize the text view

プレビュー左下から Selectable モードを選ぶことでクリックしてパーツを選択できる。
プレビュー画面で Command + Control + クリックまたはコード画面で Control + クリックすることでインスペクターを開ける
インスペクターではフォントなどを変更できる。
.title のような書き方については謎。

薄田達哉 / tatsuyasusukida

Combine views using stacks

VStack や HStack を使うことで UI パーツを縦横に並べることができる。
コントールの間に Spacer を配置することで使えるスペースを目一杯使うようにできる。
Spacer を使わない場合は必要なサイズだけが使われる。
コード画面で Control + クリックすることで VStack や HStack で囲むことができるので便利。
コンテンツの {} の後にモディファイヤーをつけられるようだ。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

薄田達哉 / tatsuyasusukida

次は Create a custom image view

薄田達哉 / tatsuyasusukida

watchOS アプリのチュートリアル

このチュートリアルが終わったら次はこちらをやりたい。

知識が不足している場合は 2 番目や 3 番目のチュートリアルをやってみよう。

薄田達哉 / tatsuyasusukida

Create a custom image view

画像をインポートするには Assets を開いてドラッグアンドドロップする。
Image コントロールを使って画像を表示する。
File > New > File から新規のファイルを追加できる。

CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/)
            .overlay {
                Circle().stroke(.gray, lineWidth: 4)
            }
            .shadow(radius: 7)
    }
}

#Preview {
    CircleImage()
}

薄田達哉 / tatsuyasusukida

Use SwiftUI views from other frameworks

MapKit を使うと地図を表示できるようだ。
MKCoordinateRegion の使い方などはまあこういうもんだと現時点では思っておこう。
なんとなく緯度経度とその範囲を指定しているような気がする。
.region(region) の最初の .region は MapCameraPosition という構造体の静的関数のようだ。
(region) は MapView 構造体の region プロパティのようだ。

MapView.swift

import SwiftUI
import MapKit

struct MapView: View {
    var body: some View {
        Map(initialPosition: .region(region))
    }
    
    private var region: MKCoordinateRegion {
        MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
            span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
        )
    }
}

#Preview {
    MapView()
}

薄田達哉 / tatsuyasusukida

Compose the detail view

HStack で font や foregroundColor を設定すると子孫に反映される。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)
            
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                    Spacer()
                    Text("California")
                }
                .font(.subheadline)
                .foregroundColor(.secondary)
                
                Divider()
                
                Text("About Turtle Rock")
                    .font(.title)
                Text("JoshuaDescriptive text goes here.")
                    .font(.subheadline)
            }
            .padding()
            
            Spacer()
        }
    }
}

#Preview {
    ContentView()
}

薄田達哉 / tatsuyasusukida

SwiftUI で iOS アプリを作れる？

Flutter とどちらが難易度が低いだろうか。

もし iOS で作れそうならそれでも良いが、なんとなく Flutter の方が情報量の点で難易度が低い気がする。

その場合は watchOS アプリだけを SwiftUI で作るのが良さそうだ。

薄田達哉 / tatsuyasusukida

watchOS アプリ開発のチュートリアル

次はこれをやっていこう。

薄田達哉 / tatsuyasusukida

それ以前のチュートリアルが完了前提

これはいきなり取り組むのは厳しそうだ。

薄田達哉 / tatsuyasusukida

Flutter + watchOS アプリ開発の記事

やってできないことは無さそうなので Flutter でアプリを作ってから戻ってこよう。