若き研究者の日常

技術寄りの事かポエムを書く。

SwiftUI Tutorial Chapter1で気づいた点

SwiftUI Tutorialのchapter1やった時のメモ リポジトリ

GitHub - nawta/SwiftUITutorial: https://developer.apple.com/tutorials/swiftui/

全般的にざっくり前提知識

各エリアの名前

SwiftUI Essentials Creating and Combining Views

Section 1 Create a New Project and Explore the Canvas

  • @main attribute identifies(属性識別子)をつけた構造体はエントリポイントになる.

@mainはデコレータみたいな感じでつける.なんか知らんけど,WindowGroup内にあるコンポーネントがメインのコンポーネントになるっぽい(Mという文字がNavigation Pane(ディレクトリの階層構造が表示されてるところ)のファイル名の横につく).

Section 2 Customize the Text View

command + クリックでインスペクタ,文字を変えたり色々属性を追加できる

Section 3 Combine Views Using Stacks

  • view(コンポーネントの中の構成要素はviewと呼ばれているっぽい.1コンポーネントを1swiftファイルで作る)のグルーピング化はV Stack, H Stack, Z Stackで行う.Vertical, Horizontal, Z axis(Back to front)の略.

関数上でcommand + クリックでStack呼び出しできる

Section 4 Create a Custom Image View

  • Assets.xcassetsが画像とかのアセットを登録する場所っぽい(Asset Catalogと呼ばれている)

Assets.xcassetsはプロジェクトのディレクトリ直下にあるっぽい(ディレクトリ直下に各swiftファイルを置いていく).

Section 5 Use SwiftUI Views From Other Frameworks

左がLive Preview,真ん中がStatic

  • @Stateを変数の前につけると,Source of Truthな変数になる.変数を参照する時はアドレス参照しないといけないっぽい.

region変数について,SSOT化すると$regionをつけないとエラーを吐く(/Users/hogehoge/Landmarks/Landmarks/MapView.swift:19:31 Cannot convert value 'region' of type 'MKCoordinateRegion' to expected type 'Binding<MKCoordinateRegion>', use wrapper instead)

Section 6 Compose the Detail View

完成!

Building Lists and Navigation

Section 1 Create a Landmark Model

  • MVCモデルのModelを作ってるぽい.ViewコンポーネントはFile->New->File->SwiftUI View(User Interface)で作る.ModelはSwift File(Source)で作る.
  • 継承みたいな感じで書かれてるのはconformanceっていうらしい.構造体にCodable conformanceをつけると,構造とデータファイル間のデータの移動を簡単にするらしい.
  • カプセル化?はしないっぽい?ユーザが見たいプロパティ(メンバ変数)はpublicにして構造体を作るっぽい.
  • JSONでぶち込むデータのキーと厳密に同じ名前にするっぽい(大文字小文字strict).また,使わないデータはプロパティに入れなくてもOK.つまり,(構造体のプロパティ)が(JSONのデータの要素)の部分集合になっているイメージ.

構造体とJSONデータの対応.JSONデータの中でネストされてるのは構造体の方でもネストで対応する感じっぽい.

  • JSONからロードするMethodもModelのグループに入れとく(ディレクトリのことGroupっていうぽい)

ナビゲーションViewとデータロードの関数

Section 2 Create the Row View

  • initの際にプロパティの初期値決めてあげないと怒られる(他の言語もだっけ?).Hoge_Previews構造体のなかのpreviewsメソッドが描画する関数ぽい?.previewsメソッドの中に構造体を書くことで,指定している構造体の中のViewを描画できる(previewsに複数構造体を書くと,複数レイヤーになって描画される)

argないよって怒られる.

Section 3 Customize the Row Preview

  • previewsメソッドの中でGroupすると,まとめて複数プレビューを作るのに便利

previewを複数作れる

Section 4 Create the List of Landmarks

Listを描画するとiOSのUIに合うように良しなに全要素描画してくれる

Section 5 Make the List Dynamic

  • リスト関数のInitializerには,リストとユニークな変数を渡す??(この辺よくわからない!)
  • Identifiable conformanceをモデルにつけるとプロパティを勝手に探してくれるポイ.とりあえずリストのinitする時はモデルの方にこれをつけとこう.

Section 6 Set Up Navigation Between List and Detail

  • NavigationView : view間で遷移させたい時に使う(タップしたら画面切り替わる的なとき)

NavigationLink {遷移先} label: { 遷移元}

Section 7 Pass Data into Child Views

  • ScrollViewでスクロールできるUIになる.
  • ここでテンプレートの選択をミスってたことに気づく(iOSじゃなくてmacOSにしてた...)
  • StaticPreviewだとPreview上から構成要素のコード部分を参照できる.DynamicPreviewは実際に操作してるようなタップ,スワイプとかができる.

Base SDKmacOSからiOSに変えたらiOS用の開発ができるようになった(ビルドターゲットの変更?).
se
設定を開くには左上のこの辺ぽちぽちする

Section 8 Generate Previews Dynamically

違う端末ごとにpreviewを表示させるためにはこんな感じの実装

SwiftUI Essentials Handling User Input

Section 1 Mark the User’s Favorite Landmarks

Section 2 Filter the List View

Section 3 Add a Control to Toggle the State

toggleの実装

Section 4 Use an Observable Object for Storage

  • ObservableObject conformanceを指定されたクラス内では,Resource(JSONデータなど)の変化をSwiftUIは見てて,それに応じて@Published属性がついたプロパティの値を逐次変更(ホットリロード)する.

Resourceの値をViewにホットリロードさせたい場合.

Section 5 Adopt the Model Object in Your Views

  • @EnvironmentObjectがついたプロパティは,.environmentObjectで値を付加できる(引数を渡すのとの違いが分からない.)
  • ObservableObjectのクラスをinitすると勝手に値をResourceから拾ってきてくれる

Section 6 Create a Favorite Button for Each Landmark

ビルドの設定はここからいけるっぽい

配布予定のiPhone実機で,Setting->developer mode->onにしとかないとビルドできない