【SwiftUI】Listを使ってリストを作ってみる
この記事の概要
簡単なサンプルアプリを通して、SwiftUIにおけるListの使い方をおさらいします。目次
- この記事の概要
- 目次
- 作るもの
- プロジェクトを作る
- 完成形
- まとめ
- 参考文献
作るもの
週刊少年ジャンプ連載中の漫画・ハイキュー!!に登場するキャラクター5人の情報をリスト形式にまとめたアプリを作りながら、Listの使い方をまとめようと思います。
完成イメージはこんな感じです。
 |
| [図1] 完成イメージ |
プロジェクトを作る
ページ上部のナビゲーションメニューの[New]>[File]より、[SwiftUI View]を選択し、ファイル名を指定。自分の場合は[ListSampleView]と設定します。
 |
| [図2-1] |
 |
| [図2-2] |
まずキャラクタークラスを定義してあげます。大事なのはCharacterクラスの型をIdentifiableにしておくこと。今回は、背番号（player_number）と氏名（name）、そしてポジション、CV(声優)の4つのプロパティを用意してあげます。idはリストの項目固有のidである、くらいの認識で大丈夫です。
struct Character: Identifiable{
var id: Int //リストアイテム固有のID
let player_number: String //背番号
let name: String //名前
let position: String //ポジション
let CV: String //声優
}
それが出来たら、今度はListSampleViewの中に今回用意する配列を書きます。実務であればここの配列はAPIなどから値を取ってくるコードになるのですが、難しくなるので今回は省略します。また機会があればFirebase等との連携verも書きたいですね。
struct ListSampleView: View {
//データベース（配列）の用意
let charas: [Character] = [
Character(id:1, player_number: "#10",name:"日向翔陽", position: "ミドルブロッカー", CV:"村瀬 歩"),
Character(id:2, player_number: "#9", name:"影山飛雄", position: "セッター", CV:"石川界人"),
Character(id:3, player_number: "#11", name:"月島 蛍", position: "ミドルブロッカー", CV:"内山昂輝"),
Character(id:4, player_number: "#4", name:"西谷 夕", position: "リベロ", CV: "岡本信彦"),
Character(id:5, player_number: "#1", name:"澤村大地", position: "ウイングスパイカー", CV: "日野 聡"),
]
ここで、Cannot invoke initializer for type 'XXX' with an argument list of type と言うエラーがでたら、以下の記事を参照してください。
このセクションでは先ほど作成したCharacterイニシャライザに、今回使用するデータを格納する、という作業を行っています。
このコードが書けたら、その直下に以下のコードを記述します。
本来はセルの中にHStackなどを挿入して、レイアウトをきれいにしたり、スペースを開けたかったのですが、The compiler is unable to type-check this expression in reasonable time; try breaking up the expression into distinct sub-expressionsエラーが発生したので、断念しました。
SwiftUIでは、あまり複雑すぎるプロセスは簡略化して書かないといけないようです。ただユーザーのアクセシビリティ・ユーザビリティを考えるのも、設計上では大事なポイントになりますので、作りたいアプリによってその辺りの設計はよく決めておきましょう。
var body: some View {
VStack {
Divider()
List (charas) { chara in
VStack(alignment: .leading) {
Text(chara.player_number + chara.name)
.font(.title)
.fontWeight(.bold)
.underline(true, color: Color.orange)
Text(chara.position)
.font(.headline)
Text("CV: " + chara.CV)
}
}
.edgesIgnoringSafeArea([.bottom])
}
}
完成形
コードの完成形は以下の通りです。
import SwiftUI
struct Character: Identifiable{
var id: Int
let player_number: String
let name: String
let position: String
let CV: String
}
//Viewクラス
struct ListSampleView: View {
//データベース（配列）の用意
let charas: [Character] = [
Character(id:1, player_number: "#10",name:"日向翔陽", position: "ミドルブロッカー", CV:"村瀬 歩"),
Character(id:2, player_number: "#9", name:"影山飛雄", position: "セッター", CV:"石川界人"),
Character(id:3, player_number: "#11", name:"月島 蛍", position: "ミドルブロッカー", CV:"内山昂輝"),
Character(id:4, player_number: "#4", name:"西谷 夕", position: "リベロ", CV: "岡本信彦"),
Character(id:5, player_number: "#1", name:"澤村大地", position: "ウイングスパイカー", CV: "日野 聡"),
]
var body: some View {
VStack {
Divider()
List (charas) { chara in
VStack(alignment: .leading) {
Text(chara.player_number + chara.name)
.font(.title)
.fontWeight(.bold)
.underline(true, color: Color.orange)
Text(chara.position)
.font(.headline)
Text("CV: " + chara.CV)
}
}
.edgesIgnoringSafeArea([.bottom])
}
}
}
struct ListSampleView_Previews: PreviewProvider {
static var previews: some View {
ListSampleView()
}
}
まとめ
セルデザインについて、従来のSwiftであればカスタムセルにパーツを配置して云々の処理が一番ポピュラーだったと思いますが、今回からそれがなくなり、マシンが勝手に余白と位置を計算してくれるっていう点は非常にありがたいですね！自身の経験上ノンデザイナーのプロジェクトだと、どうしてもデザインが崩れがちになることが多いので...。
もっとListを積極的に使っていきたいと思いました！
参考文献
・【SwiftUI】Cannot invoke initializer for type 'XXX' with an argument list of type エラーへの対処法
・SwiftUIでListを表示する
コメント
コメントを投稿