Getting Started with Scrumdinger

Swiftをおさらいしておけ
- https://docs.swift.org/swift-book/LanguageGuide/TheBasics.html
Closuresも大切だよ
- https://docs.swift.org/swift-book/LanguageGuide/Closures.html

この辺はオッケー

SwiftUI Overview

SwiftUIはアプリを作るための宣言的なフレームワーク
SwiftUIを使うと一つの言語 + APIでUIとアプリの振る舞いを定義できる。
Key Features
- 宣言的なシンタックス
  - シンプルなSwift structureでビューを定義できる
- CompositionalなAPI(組み合わせやすい、みたいな感じかなあ)
  - built-in viewとmodifierを使ってシュッとUI作れる
  - 複雑なビューもシンプルなビューを組み合わせれば作れるよ！
- 強力なレイアウトシステム
- アプリのデータを反映するビュー
  - ビューが依存するデータを定義すればSwiftUIは自動でデータの変更を監視してくれる。
- アクセシビリティーのサポート
  - ちょっとの労力で基本的なアクセシビリティが実装できる

Tour of the App

デイリースクラムを管理するアプリを作ってみよう

mactkg

Using Stacks to Arrange Views

作るアプリのイメージ感

import SwiftUI

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

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

最初のstructはViewを表していて、その次の _Previews がついているstructはどのようにPreviewするかを示している。 getServerSideProps っぽさある :D

mactkg

VStackはたて、HStackはよこにつむ。
沢山HStackあったらどうなるんだろうと実験してみるとシンプルに分割することになる。

mactkg

VStackのパラメータはAttributes Inspectorでも編集することができる。便利ー。

mactkg

アクセシビリティのガイド。
ラベルなんかはラベル名をそのまま読んでしまうけど、それだと使いづらいので、上のヘッダー部分は特別読ませるテキストを作ることにする。

HStack 自体を .accessibilityElement(children: .ignore) することで、子供を読ませないようにする。　.accesibilityLabel() をつかって、どういう読み上げをして欲しいかをVoiceOverに伝える。

mactkg

ラベルのスタイルを共通化する部分。

どうしてstructに直接static varを持たせないのだろうと思った。

struct TrailingIconLabelStyle {
    // ...
}

extension LabelStyle where Self == TrailingIconLabelStyle {
    static var trailingIcon: Self { Self() }
}

この後の使い方を見てみるとわかった。この方式で記載すると

Label("foo")
    .labelStyle(.trailingIcon)

というように使えるのだ。

labelStyle は LabelStyle を受け付けるから、LabelStyleを継承した TrailingIconLabelStyle に生やした場合、は上記のように書けなくて、書き心地が以下のように悪くなる。

Label("foo")
    .labelStyle(TrailingIconLabelStyle())

mactkg

色がつかないと思ったら色を持ってくる必要があった。

The starter project includes the asset catalog and defines the RGBA values for each color.

mactkg

List

HListやVListのようにViewを受け付けられるViewBuilder。
- ViewBuilderは children を受けるReact Componentと考えても良さそう。
Identifierが必要。
- Identifiable protocolに適応してればOK。
- 内部的にはDiffable Data Sourceを使ってるのかな。

できた。

mactkg

NavigationControllerを作るには、 NavigationView で包めば良い。
遷移させるときは、 NavigationLink で包む。
返却するViewに .navigationTitle() や .toolbar などでannotateすると、Navigation Barの様子を変えたりできる。

mactkg

Managing Data Flow Between Views - View間で状態を管理する

@State と @Binding の使い方を学ぶ
複数の情報を管理しようとすることは不整合を招き、バグの温床となる。不整合によるバグを減らすために、たった一つの唯一の情報源 - the source of truth - をつくることが大事。

Swift Property Wrappers

Property Wrappersを使うことでプロパティの初期化パターンを隠蔽し、振る舞いをプロパティに込めることを支援してくれる
SwiftUIでは @State と @Binging property wrappersをつかっている
State
- source of truthを作れる。
- 変更時に更新が通知される。
Binding
- read / write accessを共有する。two-way connection

iOS App Dev Tutorials 2022

Getting Started with Scrumdinger

SwiftUI Overview

Tour of the App

Using Stacks to Arrange Views

Creating a Navigation Hierarchy - ナビゲーションを作ってみよう

Managing Data Flow Between Views - View間で状態を管理する

Swift Property Wrappers