Help us understand the problem. What is going on with this article?

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

この記事は何?

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

SwiftUI Tutorials

Appleのデベロッパーサイトから、SwiftUIのチュートリアルにアクセスできます。(ただし、英語)
どうやら、全体を通して1つの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

概要

流れ

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

Animating Views and Transitions

概要

流れ

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

App Design and Layout

いくつかのコントロールを1つの画面に収める感じですかね。
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

概要

  • UIPageViewControllerUIPageControlSwiftUI のラップインスタンスに変換する
  • 25minくらいかかる
  • ここから始める

流れ

  1. UIPageViewController を使用して、SwiftUI ビューのカルーセルを表示する。
  2. state 変数とバインディングを使用してユーザーインターフェイス全体でデータ更新を調整する。
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away