この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
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と組み合わせて利用することができます。詳しくは以下のチュートリアルを参照してください。
これからのiOSアプリは間違いなくSwiftUIが基本になると思うので、今から各UIコンポーネントをどのように使うのか把握しておきましょう。
16
