【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を表示する

コメント

コメントを投稿

このブログの人気の投稿

【Slack】○○にはインストールするボットユーザーがありませんへの対処法

イメージ
この記事の概要 Slackのワークスペースにbotをインストールしようとしたところ、○○にはインストールするボットユーザーがありませんと言われて、ボットのインストールが突っぱねられたときの対処法は、文字通りワークスペースにボットユーザーをインストールする。 目次 この記事の概要 目次 しようとしたこと 解決法 しようとしたこと Slack Appにbotをインストールしようとしたときに、 ○○にはインストールするボットユーザーがありません　このアプリはこのワークスペースにbotを使用するための設定がされていません。この問題を解決するためには開発者にお問い合わせください。 色々と調べてみるが、このエラーに関する記事はどこにもなく困った。かなり初歩的すぎるミスなのか、誰もこのエラーに直面していないみたい＾＾； 対処法 このエラーが発生する理由は、文字通り「○○にはインストールするbotが存在しない」ため。ならば、インストールするためのbotを入れてあげましょうという話。 ①Slack apiにログインする　 　 https://api.slack.com/apps ②Add feature and functionalityをクリック ③ Bots - Allow users to interact with your app through channel and conversationsにチェックを入れる 自分は、botsにチェックが入っていませんでした＾＾； 各種設定・コンフィグを済ませて、設定は完了です！ あとは、Slackに自分のオリジナルアプリやらなんやらを導入して、Incoming WebhooksやWebアプリケーションとの相互連携をやるだけです！ お疲れ様でした。
続きを読む

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

イメージ
今日、Swiftでじゃんけんアプリを作っていた時に、この「 argument passed to call that takes no argument s 」というエラーが出たのでエラーが出た状況と解決策をまとめていこうと思う。 argument passed to call that takes no arguments ◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ 　1. 実現しようとした事 　2. Argument Passed to call that takes no argumentsとはどんなエラー？　 　3. 解決策     4. まとめ 　1. 実現しようとした事 [図] myJankenViewControllerで発生したエラーの詳細  import UIKit   class myJankenViewController: UIViewController {       var selectedNumber: Int ( arc4random ( 2 ))                              !   Argument passed to call that takes no arguments     （以下省略）  } 「グー」「チョキ」「パー」の３種類の出目をCPUが出してくれる、そんなじゃんけんアプリを作っていたのだが、 相手のCPUの出目をarc4random関数で指定してあげようと思ったところ、このようなエラーが出てしまった。 　2.  Argument Passed to call that takes no arguments とはどんなエラー？　 日本語訳してみると、「 呼び出すために渡される引数は引数を取りません 」というのが妥当だろうか。 技術用語マシマシの英文翻訳は本当に難しい・・・orz つ...
続きを読む

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

イメージ
こんにちは。 先日から Unityを触り始めている私（てぃー）です。 さて、  Unityではデフォルトで表示されている「シーンギズモ」ですが、 新規プロジェクトを立ち上げたところ、表示されていなくて困りました。 ggっても解決策が出てこない...どころか、 シーンギズモっていう単語を使っているページ・解説しているページが出てこない！笑（unity 3dのofficial documentを除く） そう言う訳でちょっと困りましたので、解決策を簡単にまとめてみました〜。 ◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ 　1. シーンギズモってそもそもなんやねん？って話 　2. 解決策 　3. まとめ 　1. シーンギズモってそもそもなんやねん？って話 [図]シーンギズモ シーンギズモはデフォルトのプロジェクトを立ち上げた時に、画面（画面というよりかはScene）の右上に出てくる図のような物体です。赤色・緑色・青色の三角コーンから成立しています。 シーンギズモはとても便利で、「y」とラベルが貼られた緑色のコーンをクリックすると、現在sceneで製作中のオブジェクトを上面から見ることが出来ます。 こう言う風に、[x],[y],[z]の、3つの軸からsceneを見ることができる優れものなんです。 　2. 発生している現象と解決策 [図]発生している現象 新規プロジェクトを作ろうとした時に、シーンギズモがデフォルトで表示されるようになるはずだ・・・と思いきや、表示されていなくて困りました。 前述したとおり、色々探したんですが解決策が見つからなくて困った・・・。 [図]解決策 で、どうやって解決したかというと。 [scene]バーにある[2D]ボタンを押すことです！ sceneの上部を見ると、デフォルトだと[Shaded]ってなってる場所と、電球やらなんやらのアイコンがある場所のちょうど間に、[2D]ボタンがありますよね！ これがオンになっていると、シーンギズモは出てこないみたいです。 　3. まとめ でも、なんで2Dモードがオンになってたんだろう・・・と考えていたのですが、 そういえば自分、こ...
続きを読む