SwiftUIのListサンプル集(見た目編)

botman_blue iOS

Xcode-12.5.1 Swift-5.4.2 iOS-14.0

はじめに

SwiftUI の ListUITableView でできていた表示はどうやるんだろう?ということで色々試してみました。(昔書いたこちらUITableView の記事を参考にしてます。)

Cell Style AccessoryType Color Cell Selected Color
cell_style accessory_type color_cell selected_color
List Style Inset Color Section
styles inset color_section

ソース(GitHub)

Cell Style

UITableViewCell には下記の Style がありました。

  • default (Basic)
  • value1 (Right Detail)
  • value2 (Left Detail)
  • subtitle (Subtitle)

List ではとくにセルに指定のクラスやプロトコルがないのでこれらを再現しようとすると自作する必要がありそうです。単純に TextImageHStack, VStack 並べれば再現できそうです。

こんな感じ。

Cell AccessoryType

UITableViewCell には下記の AccessoryType がありました。

  • none
  • disclosureIndicator
  • detailDisclosureButton
  • checkmark
  • detailButton

こちらも List の場合は自作する必要がありそうです。下記の system image を使えばできそうです。

  • chevron.right
  • checkmark
  • info.circle

こんな感じ。

ImageforegroundColor で自由に色を設定できます。

Cell 背景色

listRowBackground を使うことでセルの背景色を設定できます。

こんな感じ。

ドキュメント:listRowBackground(_:)

Cell 選択時の背景色

そもそも List には single selection がなさそう(チェックマーク表示のやつならできる)なのでちょっと工夫する必要がありそうです。

ボタンで選択を行い、選択時に listRowBackground を変更するようにしてみました。

こんな感じ。

ハイライト時グレーになってしまいますがこれ以上はちょっとわからない。。。

Separator

Separator を非表示にしたり色を変えたりインセット変えたりといったことは現状では難しそうです。

こちらの方法を試してみましたが iOS14 では効かなそうでした。
【SwiftUI】ListのSeparatorを無理やり消したい時の解決法

iOS15 からは下記があるので iOS15 からならできそうです。

ListStyle

List には下記の ListStyle が用意されています。

  • DefaultListStyle
  • BorderedListStyle
    iOS15 以上
  • CarouselListStyle
    watchOS 用
  • EllipticalListStyle
    watchOS 用
  • GroupedListStyle
    UITableViewStyleGrouped 相当?
  • InsetListStyle
  • InsetGroupedListStyle
    UITableViewStyleInsetGrouped 相当?
  • PlainListStyle
    UITableViewStylePlain 相当?
  • SidebarListStyle
    セクションタップで開閉できる

Sectionheader, footer を設定するとそれぞれこんな感じです。

どのスタイルでもヘッダーは大文字になるようです。フッターは GroupedListStyle と InsetGroupedListStyle 以外はセルと同じ表示になるようです。

InsetListStyle てなんなんだろう?

Section Color

こちらを参考にセクションヘッダーに色をつけてみました。
SwiftUIのListのSectionの色を変える

こんな感じです。

Insets指定

listRowInsets を使うことによりセルの位置を指定できます。

こんな感じです。

ドキュメント:listRowInsets(_:)

おわりに

これで UITableView でできていた表示はだいたいできるようになりました!UITableView.appearance().backgroundColor で背景色を設定できるのでつまずいたらとりあえず appearance を試してみるのもいいかも?

tableHeaderView, tableFooterView 相当のやつはなくなったのかな?

参考

https://amzn.to/4118Aol

コメント

  1. […] SwiftUIのListサンプル集(見た目編)の操作編です。 […]

  2. […] SwiftUIのListサンプル集(見た目編) […]

タイトルとURLをコピーしました