【SwiftUI】 UIコンポーネントの作成方法 List編

iOS, Swift

はじめに

こんにちは、iOSアプリ開発グループの神山です。

SwiftUIについて絶賛勉強中なのですが、今回はUIKitでのUITableViewに相当するListの作成方法についてまとめてみました。

List

Listはデータの一覧を表示するのに適したコンポーネントです。
静的なデータを表示するだけなら以下のようなコードで簡単に表示することができます。

Preview1.png

動的なデータの場合は ForEachを使うことで一覧表示することができます。

Preview2.png

ForEachを使用せずにListのみで表示することもできますが、行の削除や行の入れ替えの処理はできないため、単純な動的なデータを表示したい場合のみに使用できます。

行の削除や行の入れ替えは ForEachが準拠している DynamicViewContent内の onDelete(perform:), onMove(perform:)を使用します。

Preview2.5.png

Listのカスタマイズ

Sectionを使用することでListのグループ化を簡単に行うことができます。
以下では Sectionを使用してヘッダー、フッターをつけたListを作成しました。

Preview3.png

Modifier

List、Sectionに関するModifierをご紹介します。

  • listStyle(_: ListStyle) Listの表示スタイルの指定
automatic plain grouped
Automatic.png Plain.png Grouped.png
inset insetGrouped sidebar
Inset.png InsetGrouped.png Sidebar.png
  • listRowSeparator(visibility, edges: VerticalEdge), listSectionSeparator(visibility, edges: VerticalEdge) セパレーターの表示可否の指定
visible(default) hidden
Visible.png Hidden.png
  • listRowSeparatorTint(color, edges: VerticalEdge), listSectionsSeparatorTint(color, edges: VerticalEdge) セパレーターの色の指定
red green
Red.png Green.png
  • listRowBackground(_: View) 背景の指定
blue yellow
Blue.png Yellow.png
  • listRowInsets(_: EdgeInsets) 余白の指定
top10 left10 bottom10 right10
Top.png Leading.png Bottom.png Trailing.png

Listのタップ処理

List内のアイテムにタップ処理を追加するには onTapGesture()のModifierを使用します。

Listをタップした際に画像とテキストを更新するようにしてみます。

タップ前 タップ後
TapBefore.png TapAfter.png

また、 contentShape(_:)Spacer()を組み合わせることでタップ領域を全体に広げることができます。

さいごに

一覧表示するために使用されるListは、どのようなアプリを作る際でも使う可能性が高いコンポーネントでもあるため、上手く使いこなせるように今後も調べていこうと思います。

最後まで記事を読んで頂き、ありがとうございました。

参考文献

apple documentation list

iOS, Swift