SwiftUIでサポートされているUIコンポーネント一覧 #WWDC19

SwiftUIでサポートされているUIコンポーネント

SwiftUI はWWDC 2019のキーノートで発表された iOS/MacアプリなどのUIを構築するためのフレームワーク です。デベロッパーフレンドリーなコーディング＆直感的なデザインツールの組み合わせで、超簡単にUIを構築できる特長があります。

調べてみるとSwiftUIではこれまでUIKitで提供されてきたUIコンポーネントの多くはカバーしているものの、全てではないことが分かりました。ということで、どのようなUIコンポーネントが利用できるのか気になったので調べました。調べた結論としては、単純に書きやすい形にしているだけではなく これまで提供されてきたUIコンポーネント群を集約し再定義している ような印象を受けました。これまで悩ましかったUI実装上の課題を大きく解決してくれるように思います。

なお、UIKitを組み合わせてコーディングすることが可能なので（後述）、SwiftUIベースで作ったからといってUIKitの機能が使えない、というわけではないです。

UIコンポーネント一覧

以下、こちらとこちらを参考にカテゴリに分けながら見ていきます。

最重要コンポーネント

View

表示するビューの基本の型です。カスタムビューを作る場合など、アプリのUIを構築する上で必ずといっていいほど使用します。

テキスト

Text

文字表示を行うコンポーネントです。リードオンリーなテキストを表示します。Labelと同義です。

TextField

文字入力を行うコンポーネントです。

SecureField

プライベートなテキスト情報の文字入力を行うコンポーネントです。

画像

Image

画像を表示するコンポーネントです。

ボタン

Button

通常のボタンです。

PullDownButton

プルダウンメニューを表示するボタンです。

ItemBasedPopupButton

ポップアップ表示を行うボタンです。

NavigationButton

ナビゲーション操作をトリガーするボタンです。

PresentationButton

コンテンツを表示するボタンです。

EditButton

編集ボタンです。

PasteButton

ペーストボード（クリップボード内のデータ）を読み取るボタンです。

値の操作

Toggle

ON/OFFを制御するコンポーネントです。

Picker

リストから選択するコンポーネントです。

DatePicker

日時を選択するコンポーネントです。

Slider

ある範囲の中の値を選択するコンポーネントです。

Stepper

数値をステップで上下するコンポーネントです。

SegmentedControl

いくつかの候補の中から1つ選択を行うコンポーネントです。

スタック

HStack

横軸にビューを並べるコンポーネントです。

VStack

縦軸にビューを並べるコンポーネントです。

ZStack

Z軸にビューを並べるコンポーネントです。

リスト・スクロール

List

一覧を構築するコンポーネントです。

ScrollView

1画面に収まらないようなコンテンツをスクロールで表示できるようにするコンポーネントです。

コンテナ

Group

ビューのまとまりを表現するコンポーネントです。

GroupBox

ラベルとコンテンツの組み合わせを表現するコンポーネントです。

Section

ビューの階層を表現するコンポーネントです。

スペーサー・ディバイダー

Spacer

ビュー間の余白を作るコンポーネントです。

Divider

ビュー間の区切りを作るコンポーネントです。

構造ビュー

NavigationView

ビューをスタックさせるビューです。Navigation Controllerの代替です。

TabbedView

ビューをフラットにタブとして切り替えるビューです。TabBar Controllerの代替です。

HSplitView

横軸にビューを分けるビューです。Split View Controllerの代替です。

VSplitView

縦軸にビューを分けるビューです。Split View Controllerの代替です。

プレゼンテーション

Alert

アラートを表示します。

Modal

モーダルビューを表示します。

Popover

ポップオーバーのビューを表示します。

ActionSheet

アクションを求めるシートを表示します。

条件付きのビュー

ConditionalContent

2つのビューのうち、いずれか1つを表示するビューです。

EmptyView

エンプティステートを表現するビューです。

EquatableView

ある値について、以前の値と新しい値を比較して変化があった場合だけ子のビューを更新する機能を持ったビューです。

使用頻度の低いビュー

AnyView

何かしらのビューです。曖昧に扱いたい場合に使用します。

TupleView

ビューのタプルを表現するビューです。

IDView

ユニークなIDが振られたビューです。追加・削除が行われるビューに使用します。

SwiftUIをベースにUIを構築しよう

こうやってみると、単純に置き換えではなく、既存のUIコンポーネントの考え方を集約し、再定義するような形のUIコンポーネントが目立ちます。今までの考え方を元にしながら、複雑になってしまったところを簡略化しつつ使いやすい形でまとまっているような印象を受けました。

上記には含まれないUIコンポーネントはいくつかありますが、SwiftUIではUIKitと組み合わせて利用することができます。詳しくは以下のチュートリアルを参照してください。

• Interfacing with UIKit — SwiftUI Tutorials | Apple Developer Documentation

これからのiOSアプリは間違いなくSwiftUIが基本になると思うので、今から各UIコンポーネントをどのように使うのか把握しておきましょう。