【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 CharacterIdentifiable{
    var idInt //リストアイテム固有のID
    let player_numberString //背番号
    let nameString //名前
    let positionString //ポジション
    let CVString //声優
}

それが出来たら、今度はListSampleViewの中に今回用意する配列を書きます。実務であればここの配列はAPIなどから値を取ってくるコードになるのですが、難しくなるので今回は省略します。また機会があればFirebase等との連携verも書きたいですね。

struct ListSampleViewView {
    //データベース(配列)の用意
    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 bodysome 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を表示する

コメント

このブログの人気の投稿

【Unity】シーンギズモがデフォルトで表示されない時

【Swift4】argument passed to call that takes no arguments の解決策

【Rails5】SyntaxError: (): mapping values are not allowed エラーの解決法