前回はリストの基本的な使用方法について紹介しました。
今回はそのリストの基本的なデザインの種類とタイトルの表示方法を紹介します。
場面や用途に合わせて適切なデザインやタイトル表示を行えるように種類を把握しておきましょう！
リストのデザイン一覧と見え方
現在、iPhoneのアプリで使用できるリストのデザインは下のテーブルにある5種類です。
それぞれのスクリーンショットも載せておくので他のデザインと合うものを選んで使用してください。
| リストスタイル | 説明 |
| DefaultListStyle() | プラットフォームのデフォルトの動作とリストの外観を説明するリストスタイル |
| GroupedListStyle() | グループ化されたリストの動作と外観を説明するリストスタイル |
| InsetGroupedListStyle() | はめ込みグループ化リストの動作と外観を説明するリストスタイル |
| InsetListStyle() | はめ込みリストの動作と外観を説明するリストスタイル |
| SidebarListStyle() | サイドバーリストの動作と外観を説明するリストスタイル |
struct ContentView: View {
var body: some View {
List(0..<20) { i in
HStack {
Image(systemName: "person.fill")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 30, height: 30)
.clipShape(Circle())
VStack {
HStack {
Text("ユーザー\(String(format: "%02d", i + 1))")
.bold()
Spacer()
}
HStack {
Text("メッセージ\(String(format: "%02d", i + 1))")
Spacer()
}
}
}
}
.listStyle(リストスタイル)
}
}
リストのタイトル表示方法
リストにタイトルを表示するためにはNavigationViewを使用します。
リストのコード全体をNavigationViewで囲み、.navigationTitle()を使用してタイトルを表示します。
struct ContentView: View {
var body: some View {
NavigationView {
List(0..<20) { i in
HStack {
Image(systemName: "person.fill")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 30, height: 30)
.clipShape(Circle())
VStack {
HStack {
Text("ユーザー\(String(format: "%02d", i + 1))")
.bold()
Spacer()
}
HStack {
Text("メッセージ\(String(format: "%02d", i + 1))")
Spacer()
}
}
}
}
.listStyle(InsetListStyle())
.navigationTitle(Text("リストタイトル"))
}
}
}
まとめ
今回はリストのデザインとタイトルの表示方法について紹介しました。
基本的な内容ですが、使用頻度も高いため覚えておくと開発がスムーズに進むかと思います。
SwiftUI勉強中の方へ
SwiftUIのプログラミングを独学で勉強している人にはこちらの書籍もおすすめです！
基礎からしっかり学びたい方はスクールもおすすめです！
無料体験もあるため、気軽に申し込むのもありです。
コメント