📋

【Swift】SwiftUI で表を実装する

2023/12/27に公開

Swift

SwiftUI

table

tech

初めに

今回は SwiftUI の Table を用いて表のUIを実装していきたいと思います。

記事の対象者

Swift, SwiftUI 学習者
SwiftUI で表の実装が必要な方

目的

今回は以下の画像のように、表のUIを実装していきます。
なお、今回は VisionOS 上での実装を行います。

実装

今回はスキルセットの表を作成してみたいと思います。
以下の順番で実装を進めていきます。

Skill の作成
Table の作成
TableRow による変更

Skill の作成

まずはスキルのモデルを作成します。
コードは以下のようになります。

Skill

struct Skill: Identifiable {
    let id = UUID()
    let name: String
    let experience: String
    let proficiency: Int
}

let skills: [Skill] = [
    .init(name: "Flutter", experience: "1.5年", proficiency: 5),
    .init(name: "Swift", experience: "1年", proficiency: 4),
    .init(name: "Python", experience: "1年", proficiency: 3),
    .init(name: "JavaScript", experience: "1年", proficiency: 3),
    .init(name: "TypeScript", experience: "1年", proficiency: 3),
    .init(name: "HTML+CSS", experience: "1年", proficiency: 3),
    .init(name: "R", experience: "0.5年", proficiency: 1),
    .init(name: "Unity", experience: "0.5年", proficiency: 1),
]

let id = UUID() とすることでそれぞれの Skill を判別できるようになり、Identifiable とすることができます。
もし Identifiable として指定しなければ、後述の Table の UI で以下のようなエラーになり、テーブルとして表示できなくなります。

Generic struct 'TableColumn' requires that 'Skill' conform to 'Identifiable'

また、skills として、作成した Skill のリストを作成しています。

Table の作成

次に先程作成した skills を表示させる Table の UI を作成していきます。

SkillTableArea

struct SkillTableArea: View {
    var body: some View {
        Table(skills) {
            TableColumn("name") { language in
                Text(language.name)
            }
            TableColumn("experience") { language in
                Text(language.experience)
            }
            TableColumn("proficiency") { language in
                Text("\(language.proficiency)")
            }
        }
    }
}

Table の引数に先程作成した skills を入れることで表を作成することができます。
TableColumn の引数に列の名前を入れることができます。
なお列の名前は以下のように自由に決めることができます。

TableRow による変更

SkillTableArea を以下のように変更します。

SkillTableArea

struct SkillTableArea: View {
    var body: some View {
        Table(of: Skill.self) {  // of: Skill.self に変更
            TableColumn("name") { language in
                Text(language.name)
            }
            TableColumn("experience") { language in
                Text(language.experience)
            }
            TableColumn("proficiency") { language in
                Text("\(language.proficiency)")
            }
+       } rows: {
+           ForEach(skills) { skill in
+               TableRow(skill)
+           }
+           TableRow(Skill(name: "Go", experience: "0.5年", proficiency: 1))
+       }
    }
}

Table(of: Skill.self) として Table に表示させる型をはじめに定義しておきます。
そして rows の中で skills に含まれるデータを ForEach で表示させています。
また、それに加えて TableRow で新たなデータを追加しています。

以下の画像のように表の最後の列に Skill を追加できています。

まとめ

最後まで読んでいただいてありがとうございました。
今回は SwiftUI の表の実装方法を簡単に共有しました。
tableStyle で表のスタイルも変更できるようでしたが、visionOS では使用できなかったので、今回の実装は見送りました。
また進捗があれば共有したいと思います。
誤っている点や他の実装方法等あればご指摘いただけると幸いです。