【SwiftUI】Listを表示する

はじめに
開発環境
手順
おわりに
参考

はじめに

UITableViewのUIを、SwiftUIではListで実装します。今回はListを表示する方法について記載します。

開発環境

・macOS Catalina 10.15.7

・Xcode 12.2

・Swift 5.3.1

手順

リストを表示

ContentView.swiftを開いて、Textを削除。

ContentView.swift

f:id:hfoasi8fje3:20201218183041p:plain

画面右上の"+"を選択。

f:id:hfoasi8fje3:20201218183254p:plain

"List"と入力して、"List"を選択。

f:id:hfoasi8fje3:20201223092535p:plain

Listが挿入される。

ContentView.swift

f:id:hfoasi8fje3:20201223092730p:plain

リストに表示するデータを追加。

ContentView.swift

let listContents = ["お知らせ1", "お知らせ2", "お知らせ3", "お知らせ4", "お知らせ5"]

f:id:hfoasi8fje3:20201223093521p:plain

Listを以下のように変更。

ContentView.swift

List(0 ..< listContents.count) { item in
      Text(listContents[item])
}

f:id:hfoasi8fje3:20201223100704p:plain

Resumeを選択すると、配列listContentsの中身が一覧で表示されることを確認できる。

f:id:hfoasi8fje3:20201223100831p:plain

リストにタイトルを追加

NavigationViewとnavigationBarTitleを追加するとタイトルを表示できる。

ContentView.swift

NavigationView {
        List(0 ..< listContents.count) { item in
              Text(listContents[item])
        }
        .navigationBarTitle("お知らせ")
}

f:id:hfoasi8fje3:20201223102158p:plain

f:id:hfoasi8fje3:20201223102358p:plain

セルに複数の内容を表示する

"File..."を選択。

f:id:hfoasi8fje3:20201223151732p:plain

"Swift File"を選択。

この記事ではファイル名を"SampleData.swift"とする。

f:id:hfoasi8fje3:20201223151844p:plain

追加したファイルに、Identifiableに準拠した構造体SampleDataを追加。構造体の中のidは、特定のSampleDataを識別するために使用される。そのため、idは一意の値である必要がある。

※参考:https://developer.apple.com/documentation/swift/identifiable

SampleData.swift

struct SampleData: Identifiable {
    var id: Int
    var time: String
    var title: String
}

f:id:hfoasi8fje3:20201223152845p:plain

構造体SampleDataの型を持つデータの配列を追加。

SampleData.swift

var sampleDataArray: [SampleData] = [
    SampleData(id: 1, time: "8:00", title: "お知らせ1"),
    SampleData(id: 2, time: "12:00", title: "お知らせ2"),
    SampleData(id: 3, time: "18:00", title: "お知らせ3")
]

f:id:hfoasi8fje3:20201223154721p:plain

"File..."を選択。

f:id:hfoasi8fje3:20201223151732p:plain

"SwiftUI View"を選択。

この記事ではファイル名を"SampleListRow.swift"とする。

f:id:hfoasi8fje3:20201223172201p:plain

Textを削除。

SampleListRow.swift

f:id:hfoasi8fje3:20201223172648p:plain

リストの行のレイアウト（セルのレイアウト）を定義していく。

SampleListRow.swift

import SwiftUI

struct SampleListRow: View {
    var sampleData: SampleData
    
    var body: some View {
        HStack {
            Image(systemName: "exclamationmark.bubble")
                .frame(width: 50, height: 50)
            VStack(alignment: .leading, spacing: 5, content: {
                Text(sampleData.title)
                Text(sampleData.time)
                    .font(.caption)
                    .foregroundColor(.gray)
            })
            Spacer()
        }
    }
}

struct SampleListRow_Previews: PreviewProvider {
    static var previews: some View {
        SampleListRow(sampleData: sampleDataArray[0])
            .previewLayout(.fixed(width: 300, height: 80))
    }
}

上記を実装すると、SampleListRow.swiftのプレビューは以下のようになる。

f:id:hfoasi8fje3:20201223181755p:plain

ContentView.swiftで以下の実装を削除。

ContentView.swift

f:id:hfoasi8fje3:20201223182824p:plain

以下のようにListを追加。

ContentView.swift

List(sampleDataArray) { item in
    SampleListRow(sampleData: item)
}

ContentView.swiftの全体のコードは以下。

ContentView.swift

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            List(sampleDataArray) { item in
                SampleListRow(sampleData: item)
            }
            .navigationBarTitle("お知らせ")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}