Zenn
Open10

iOS App Dev Tutorials 2022

iOS
SwiftUI
mactkgmactkg

Getting Started with Scrumdinger

この辺はオッケー

SwiftUI Overview

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

Tour of the App

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

mactkgmactkg

Using Stacks to Arrange Views

https://developer.apple.com/tutorials/app-dev-training/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

mactkgmactkg

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

mactkgmactkg

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

mactkgmactkg

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

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

mactkgmactkg

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

どうして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())
mactkgmactkg

List

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

できた。

mactkgmactkg

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

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

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

https://developer.apple.com/tutorials/app-dev-training/managing-data-flow-between-views

  • @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