SwiftUIのチュートリアルをざっと

この記事は何？

いつか自分が実践するときのために、AppleによるSwiftUIチュートリアルをまとめておきました。

SwiftUI Tutorials

Appleのデベロッパーサイトから、SwiftUIのチュートリアルにアクセスできます。（ただし、英語）
どうやら、全体を通して１つのiOSアプリを開発するようです。また、いくつかのステップに分かれています。
それぞれのステップは所要時間が見積もられていたり、プロジェクトファイルがダウンロードできたりと、気が利いてます。図解や動画がもたっぷりです。

開発するアプリの概要

• Landmarks
• 好きな場所を見つけて共有するiOSアプリ
• ランドマークの完全なリストと、各場所に関する詳細を表示する画面
• スクロールできるカテゴリのリストが表示されるホーム画面から、各カテゴリ内のランドマークには水平スクロールする。
• ユーザーは自分のお気に入りの場所にフラグを付けられる。
• お気に入りだけを表示するようにリストをフィルタすることができる。
• リストにあるランドマークにアクセスするたびに、ユーザーはバッジを受け取る。
• ユーザーのハイキングを追跡したグラフを含むビューはアニメートする。
• ユーザーは自分のプロファイルを作成できる。

SwiftUI Essentials

SwiftUIに関する不可欠事項みたいなパートです。

• 単純なビューからリッチなビューを作成する
• データフローを設定する
• Xcodeのプレビューで確認しながら、ナビゲーションを構築する

Creating and Combining Views

概要

• ビューを生成して結合する
• 40minくらいかかる
• LandmarksというiOSアプリ（好きな場所を見つけて共有する）を作成する
• ここから始める

流れ

1. ランドマークの詳細を表示するビューを作成する。
2. スタックを使用して、画像とテキストビューをレイヤー化したビューをレイアウトする。
3. MapKitコンポーネントをビューに追加する。
4. ビューデザインの改良が、Xcodeによってリアルタイムにコードを変換するのを確認する。

Building Lists and Navigation

概要

• リストを構築して遷移する
• 35minくらいかかる
• ランドマークの詳細ビューを設定する
• ランドマークの完全なリストを表示する
• 各場所に関する詳細を表示する
• ここから始める

流れ

1. 任意のランドマーク情報を表示するビューを作成する。
2. ユーザーがタップできるスクロールリストを動的に生成して、ランドマークの詳細ビューを表示する。
3. Xcodeのキャンバスを使用して、UIを微調整する
4. デバイスサイズごとに複数のプレビューをレンダリングする。

Handling User Input

概要

• ユーザー入力を扱う
• 20minくらいかかる
• お気に入りの場所にフラグを付けて、リストをフィルタする
• ここから始める

流れ

1. リストにお気に入りスイッチを追加する。
2. ランドマークにお気に入りフラグを付けるためのボタンを追加する。

Drawing and Animation

SwiftUIの利点であるシンプルな作業によるアニメーションと図形の描画を実践する感じのようです。

• 図形とパスの描画方法
• ビュー間のシームレスな遷移。

Drawing Paths and Shapes

概要

• パスと図形の描画
• 25minくらいかかる
• ここから始める

流れ

1. ランドマークにアクセスするたびに、ユーザーが受け取るバッジを作成する。
2. パスと図形を組み合わせてバッジを作成する。
3. 場所を表す別の図形と、作成したバッジを重ねる。

Animating Views and Transitions

概要

• ビューのアニメーションと遷移
• 20minくらいかかる
• ここから始める

流れ

1. ユーザーが行ったハイキングを追跡するグラフを含むビューをアニメートする。
2. animation（_ :)モディファイアを使用して、シンプルな手続きでビューをアニメートする。

App Design and Layout

いくつかのコントロールを１つの画面に収める感じですかね。
SwiftUIによって構築された、より複雑なインターフェースの構造とレイアウトを理解する。

Composing Complex Interface

概要

• ランドマークカテゴリのスクロールリストが表示されるホーム画面から、各カテゴリ内のランドマークに水平スクロールする
• 20minくらいかかる
• ここから始める

ナビゲーションを構築するときに、合成ビューをさまざまなデバイスのサイズや向きに適応させる方法。

Working with UI Controls

概要

• ユーザープロフィールの変更画面
• 25minくらいかかる
• ここから始める

流れ

1. 編集モードを追加して、プロフィールの変更させる設定画面をデザインする。
2. データ入力用のさまざまな一般的なユーザーインターフェイスコントロールを使用する
3. ユーザーが変更を保存するたびにLandmarksモデルタイプを更新する。

Framework Integration

UIKitのビューやView Controllerと、SwiftUIビューを一緒に使用するようです。
SwiftUIと、既存UIフレームワークとシームレスに連携させる。
たとえば、SwiftUIビュー内にUIKitビューとView Controllerを配置できるし、その逆も可。

Interfacing with UIKit

概要

• UIPageViewController と UIPageControl を SwiftUI のラップインスタンスに変換する
• 25minくらいかかる
• ここから始める

流れ

1. UIPageViewController を使用して、SwiftUI ビューのカルーセルを表示する。
2. state 変数とバインディングを使用してユーザーインターフェイス全体でデータ更新を調整する。

動画で学習する

このページの内容を動画で実践・解説した講座を、世界最大級の動画学習プラットフォームUdemyでリリースしました。以下のリンクをクリックすると、最初のセクションを無料で視聴できます。
Udemyで「速習！SwiftUI」講座を視聴する