iOSアプリ開発

SwiftUIで必ず知っておきたいリスト表示の仕方

iOSアプリを開発するときに、データをリスト表示するUIを実装したいということがあると思います。よくiOSアプリでは、テーブルビューと言われるもので、SwiftUIではリストと呼ばれます。今回は、SwiftUIを使ってデータをリスト表示する方法を紹介していきます。

事前に知っておきたいとこ

iOSアプリの開発をこれから始める人や、始めたばかりでSwiftUIの理解がまだ進んでない人は、こちらも始めたばかりの人向けの記事も書いているので予め読んでおきましょう。



今回作っていくもの

今回は、オンライン販売している商品を一覧表示する例です。一覧は、ListとRowという2つのUIコンポーネントを使って作っていきます。

Rowを作る

まず、リストを作っていくために必要なRowを作っていきたいと思います。このRowは、UIKitでいうUITableViewCellに近いものです。Rowは、以下の要素で構成してSimpleRowという名前で作ります。HStackを使うことで、要素を水平に並べることができます。

  • 商品写真
  • 商品名
  • 価格

struct SimpleRow: View {
    var body: some View {
        // 水平方向に並べる
        HStack {
            // 商品画像
            Image(systemName: "trash")

            // 商品名
            Text("Trash").padding(10)

            // スペース
            Spacer()

            // 価格
            Text("$ 100")
        }
        .padding(30)
    }
}

商品データをもつStructを作る

商品データを変数として持たせるために、Productionという構造体を作ります。そうすることで、複数の商品データをRowに反映することができます。


struct Production: Identifiable {
    // ユニークID
    var id: ObjectIdentifier

    // 商品名
    var name: String

    // 商品画像
    var image: Image
}

Identifiableとは?

  • SwiftUI側がそのViewで利用されているデータがどれなのかを特定するためのもの
  • モデルにIdentifiable Protocolを定義しておくことでList利用することができる

ProductionをSimpleRowに当て込むため、SimpleRowを一部書き換えます。


struct SimpleRow: View {
    var production: Production
    var body: some View {
        // 水平方向に並べる
        HStack {
            // 商品画像
            production.image

            // 商品名
            Text(production.name).padding(10)

            // スペース
            Spacer()

            // 価格
            Text("$ \(production.price)")
        }
        .padding(30)
    }
}

ListにRowを当て込む

次に、作ったRowテーブルをTableViewのように一覧にするにはListを使います。SampleRowを当て込むための、SimpleListを作ります。以下のように表示されます。


struct SimpleList: View {
    var body: some View {
        List {
            Text("row1")
            Text("row2")
        }
    }
}


次は、SimpleListにSimpleRowを当て込んてみます。すると以下のように表示できます。


struct SimpleList: View {
    let productions: [Production] = [
        Production(id: "1",
                   name: "Trash",
                   imageName: "trash",
                   price: 100),
        Production(id: "2",
                   name: "Star Key ring",
                   imageName: "star",
                   price: 300),
        Production(id: "3",
                   name: "Book",
                   imageName: "book",
                   price: 300),
    ]

    var body: some View {
        List (productions) { production in
            SimpleRow(production: production)
        }
    }
}

このように、Listを使うことで商品一覧機能を作ることができます。

データを動的にUIに反映

さらにリストのデータを動的に変更して、UIにリアルタイムに反映したいということがあると思います。そういう時に使える、データを動的に反映する方法を紹介しているので、以下の記事を参考にしてみてください。

iOSアプリ開発者になる人が読んでいる12の本を紹介 2020年版Prev

SwiftUIでレイアウトを簡単にするHStackとVStackの使い方Nexthstack-vstack

Related post

  1. iOSアプリ開発

    xcconfigを使って本番とテスト環境を切り替える方法

    iOSアプリを開発していると、本番の環境とテストする環境を切り替えて開…

  2. hstack-vstack

    iOSアプリ開発

    SwiftUIでレイアウトを簡単にするHStackとVStackの使い方

    初めてSwiftUIを使ってアプリ開発するとき、まだ慣れていなくてレイ…

  3. iOSアプリ開発

    DispatchQueueを使って容量のあるファイルをダウンロードする方法

    アプリなどで画像のようなファイルデータをダウンロードすることはよくあり…

  4. iOSアプリ開発

    Firebase Firestoreを使ってiOSアプリのデータを管理する方法

    アプリを作る・サービスを立ち上げるといったとき、ほとんどの場合はDBや…

  5. iOSアプリ開発

    iOSアプリ初心者が覚えておきたい10のUIクラス

    iOSアプリを開発したいけど、最初は何を知っていたら開発できるのかわか…

  6. swiftui

    iOSアプリ開発

    StateとObservableを使ってSwiftUIのビューを変更する方法

    SwiftUIフレームワークを使っているとStateやObserved…

PAGE TOP