前回の記事 で SwiftUI の魅力をお伝えしましたが、今回から実際の UI パーツの実装をしていきたいと思います。

まずはアプリの基本となるリスト表示です。

UIKit で実装したことのある方だと、「UITableView を使って Delegate と DataSource を設定して…」という手順が思い浮かぶかと思いますが、SwiftUI では Delegate などのコールバック的な処理は必要としません。

これだけです。
これを実行(もしくは Xcode のプレビュー)すると、リスト表示ができていることがわかります。

次に配列を表示してみます。

ForEach の中に id: .self という見慣れない書き方がありますが、これは List 内で要素を識別するのに ID が必要なためです。

List 内のデータの要素(この場合は items)を構造体にして id というプロパティを用意すれば不要になるのですが、ここでは深く触れないこととします。

実行するとこうなります。

さらに、項目を追加できるようにしてみます。

色々と新しい要素が出てきました。

まず @State ですが、これが付けられた変数は「状態変数」となり、変数の値が変わるとビューが再描画するようになります。

sheet ではモーダルで表示するビューを定義します。
showInputModal の値によって表示状態が決まり、onDismiss でビューが消える際の処理を書きます。
ListInputView は実際に表示されるビューです。

このモーダルビューを表示するトリガが Button です。
action にタップ時の処理を書きます。

また、Button List の前面に表示するために、全体を ZStack (Z 方向のレイアウト)で囲んでいます。

ListInputView では name を設定して、元のビューに返しています。
こちらのビューの細かい説明は省きますが、@Binding で宣言した変数はビューと同期されるようになり、ここで入力された値が自動的に name に入り、それが元のビューにまで反映されます。

実行するとこんな感じ。
(サンプル用に作ったアプリを流用しているので、ナビゲーションバーが付いていることは気にしないでください)

…と、こんな感じでよくあるリスト表示と項目の追加が実装できました。

UIKit だったらリスト表示だけでなく、モーダルの画面とのデータやりとりも考えないといけないので、それと比べるとかなり簡潔にコードが書けることがわかるかと思います。

iOS エンジニアの皆さん、少しずつ SwiftUI 始めましょう。

Follow me!