SwiftUI Tutorials を実践

5月 25, 2020

SwiftUIは、Flutter と同様な、宣言型シンタックスを持った Appleプラットフォーム向けのフレームワークです。

Flutterと比較するために、Appleの開発サイトにある SwiftUI Tutorials を試してみましたので、その内容のまとめになります。

Tutorials自体は、迷うことなく実行できたため、気をつけたりすることは殆どありませんでした。

このチュートリアルで、SwiftUIの基本的な事が分かります。

---

Introducing SwiftUI (SwiftUIの紹介)

SwiftUIは、あらゆるAppleプラットフォームのユーザーインターフェイスを宣言する最新の方法です。美しくダイナミックなアプリをかつてないほど速く作成します。

Describe your layout just once.

レイアウトを一度だけ説明してください。

ビューの任意の状態のコンテンツとレイアウトを宣言します。SwiftUIはその状態がいつ変化するかを認識し、それに合わせてビューのレンダリングを更新します。

Build reusable components.

再利用可能なコンポーネントを構築します。

小さな単一責任のビューをより大きく、より複雑なインターフェースに結合します。Appleプラットフォーム用に設計されたアプリ間でカスタムビューを共有します。

Simplify your animations.

アニメーションを簡略化します。

スムーズなアニメーションの作成は、単一のメソッド呼び出しを追加するのと同じくらい簡単です。SwiftUIは、必要に応じてトランジションを自動的に計算してアニメーション化します。

See it live in Xcode.

Xcodeでライブ表示してください。

アプリを実行することなく、アプリのインターフェースを設計、構築、テストします。インタラクティブなプレビューを使用して、コントロールとレイアウトをテストします。

Tutorials

Creating and Combining Views

ビューの作成と結合

このチュートリアルでは、お気に入りの場所を発見して共有するためのiOSアプリであるランドマークの構築について説明します。まず、ランドマークの詳細を表示するビューを作成します。

ランドマークは、ビューをレイアウトするために、スタックを使用して、画像とテキストビューのコンポーネントを組み合わせ、レイヤー化します。ビューにマップを追加するには、標準のMapKitコンポーネントを含めます。ビューのデザインを調整すると、Xcodeはリアルタイムのフィードバックを提供するので、これらの変更がコードにどのように変換されるかを確認できます。

Building Lists and Navigation

リストの作成とナビゲーション

基本的なランドマーク詳細ビューを設定したら、ランドマークの完全なリストを表示し、各場所の詳細を表示する方法をユーザーに提供する必要があります。

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

Handling User Input

ユーザー入力の処理

ランドマークアプリでは、ユーザーはお気に入りの場所にフラグを付け、リストをフィルタリングしてお気に入りだけを表示できます。この機能を作成するには、まずリストにスイッチを追加してユーザーがお気に入りだけに集中できるようにし、次にユーザーがタップするランドマークをお気に入りとしてマークするためにタップする星型のボタンを追加します。

Drawing Paths and Shapes

パスとシェイプの描画

ユーザーは、リストのランドマークにアクセスするたびにバッジを受け取ります。もちろん、ユーザーがバッジを受け取るには、バッジを作成する必要があります。このチュートリアルでは、パスと形状を組み合わせてバッジを作成するプロセスを説明します。次に、位置を表す別の形状にオーバーレイします。

異なる種類のランドマークに複数のバッジを作成する場合は、オーバーレイシンボルを試したり、繰り返しの量を変えたり、さまざまな角度やスケールを変更したりしてみてください。

Animating Views and Transitions

ビューと遷移のアニメーション化

SwiftUIを使用すると、効果の場所に関係なく、ビューまたはビューの状態への変更を個別にアニメーション化できます。SwiftUIは、これらの組み合わされた、重なり合った、中断可能なアニメーションのすべての複雑さを処理します。

このチュートリアルでは、ランドマークアプリの使用中にユーザーが行ったハイキングを追跡するためのグラフを含むビューをアニメーション化します。animation(_:)モディファイアを使用すると、ビューのアニメーションがいかに簡単かがわかります。

Composing Complex Interfaces

複雑なインターフェースの作成

ランドマークのホーム画面には、カテゴリのスクロールリストが表示され、各カテゴリ内ではランドマークが水平方向にスクロールされます。この主要なナビゲーションを構築するとき、構成されたビューがさまざまなデバイスのサイズと方向にどのように適応できるかを探ります。

Working with UI Controls

UIコントロールの操作

ランドマークアプリでは、ユーザーは自分の個性を表現するプロファイルを作成できます。ユーザーが自分のプロファイルを変更できるようにするには、編集モードを追加して、設定画面をデザインします。

データ入力のためのさまざまな一般的なユーザーインターフェイスコントロールを操作し、ユーザーが変更を保存するたびにランドマークモデルタイプを更新します。

Interfacing with UIKit

UIKitとのインターフェース

SwiftUIは、すべてのAppleプラットフォームの既存のUIフレームワークとシームレスに連携します。たとえば、UIKitビューとビューコントローラーをSwiftUIビュー内に配置したり、その逆を行ったりできます。

このチュートリアルでは、注目のランドマークをホーム画面からUIPageViewController and UIPageControlとのインスタンスをラップするように変換する方法を示します。UIPageViewControllerを使用してSwiftUIビューのカルーセルを表示し、状態変数とバインディングを使用して、ユーザーインターフェイス全体でデータの更新を調整します。