SwiftUIを使って一覧ページ(リスト表示)を簡単に作ってみよう

# 今回のお題
---
これまでstoryboardを触ったことはありますが、ほぼswift初心者なワタクシ。。。
久しぶりにxcodeを開いたらSwiftUIという機能があったので触ってみました。

2019年に出ていたらしいけど、アプリ関係は疎いので全然知らなかった。。。

---

## 準備(xcode起動からプロジェクト作成まで)

---

<img width="490" alt="スクリーンショット 2020-04-26 21.23.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/7653dcaf-8ab5-d179-f050-e677abea6c67.png">

「Create a new Xcode project」を選択

---

<img width="731" alt="スクリーンショット 2020-04-26 21.27.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/7fa80dc6-9654-823f-edbb-528e573f3e0e.png">

「Single View APP」を選択しNext

---

<img width="731" alt="スクリーンショット 2020-04-26 21.27.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/16fad42d-af26-bd34-e2bf-46bf6aa17acb.png">

Product Nameを入力します。
今回はbaseballとしました。

---

<img width="1396" alt="スクリーンショット 2020-04-26 21.28.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/d865eeae-152b-1357-4f2d-f1d3c165b7e5.png">

プロジェクトを作成し、この画面が表示されます。
上部にあるResumeボタンをクリックするとビルドを始めて。。。

---

<img width="390" alt="スクリーンショット 2020-04-26 21.29.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/9e680083-15b0-0029-8821-7c93da69db32.png">

プレビューとしてこれが出る！
なるほど！
それでは少し触ってみることにします。

---

## textを増やす
---
このままText("Hello, world")をコピペすると。。。

<img width="391" alt="スクリーンショット 2020-04-29 23.01.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/36158903-1ae2-235f-5c2c-b8790e323035.png">

おうふ。。。

---

なので、「command⌘キー」を押しながらソースコードのTextをクリックしてポップアップを表示します。

<img width="288" alt="スクリーンショット 2020-04-26 23.09.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/e32eda35-af4f-50ff-e567-cd78afd7c66f.png">

今回は縦に表示をさせたいので
「Embed in VStack」を選択します。

---

<img width="870" alt="スクリーンショット 2020-04-29 23.04.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/1e33b367-1982-099c-bfc0-d70ea6eba0cd.png">


Text("Hello, world")を増やすと。。

---

<img width="867" alt="スクリーンショット 2020-04-26 23.10.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/aa6c822a-b4c0-84a9-f31c-9367a8bf0cb1.png">

これでようやくtextを増やすことができました。
当たり前ですが、増やした分だけ表示されますね笑
次は"Hello, world"を書き換えて、そのまま色もつけてみましょうか。

---
## テキストに色をつける
---
「command⌘キー」を押しながらプレビューのラベルをクリックするとポップアップが表示されます。
「Show SwiftUI Inspector...」を選択すると。。

---

<img width="331" alt="スクリーンショット 2020-04-26 23.11.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/7d55d021-8ba8-7a6f-9d75-b3ba4ca4ee82.png">

フォントや色を変えられますね。
今回はCustomを選択、それぞれ色を設定しました。

---

<img width="866" alt="スクリーンショット 2020-04-26 23.22.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/f5efe52b-3c3e-4061-d952-ef2db33b6db7.png">

ここまで表示できるようになりました。
swiftのRGB値を使った色指定は256段階ではなく、0〜1.00の間で設定するので
255で割った値が入るようにちょいと面倒な書き方としています。

---

## リスト表示
---
このまま文字列を縦に表示しているだけでは使いづらいので、リストにしましょう。
「command⌘キー」を押しながらソースコードのVStackをクリックしてポップアップを表示し
「Embed in List」を選択します。

---

<img width="865" alt="スクリーンショット 2020-04-29 23.13.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/ba16f9a3-4106-c9dd-1830-f619e96b785d.png">

あらら、、これはクドいw
リストを使えるようにコードを以下のように書き換えました。

---

```ContentView.swift
import SwiftUI

struct Team: Identifiable {
    var id: Int
    var name: String
    var colorRed: Double
    var colorGreen: Double
    var colorBlue: Double
}


struct ContentView: View {
    let teams: [Team] = [
        Team(id: 1, name: "北海道", colorRed: 2 / 255, colorGreen: 81 / 255, colorBlue: 140 / 255),
        Team(id: 2, name: "宮城", colorRed: 133 / 255, colorGreen: 1 / 255, colorBlue: 15 / 255),
        Team(id: 3, name: "埼玉", colorRed: 16 / 255, colorGreen: 41 / 255, colorBlue: 97 / 255),
        Team(id: 4, name: "千葉", colorRed: 34 / 255, colorGreen: 24 / 255, colorBlue: 21 / 255),
        Team(id: 5, name: "大阪", colorRed: 176 / 255, colorGreen: 143 / 255, colorBlue: 50 / 255),
        Team(id: 6, name: "福岡", colorRed: 242 / 255, colorGreen: 202 / 255, colorBlue: 0 / 255),
    ]

    var body: some View {
        List(teams) { team in
            Text(team.name)
                .foregroundColor(Color(red: team.colorRed, green: team.colorGreen, blue: team.colorBlue))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

その結果。。。

---

<img width="406" alt="スクリーンショット 2020-04-29 23.17.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/ba439dc1-bf64-8f54-e367-297b40a4f790.png">

それらしく表示されるようになりましたね！
これだけでは寂しいので、もう少し表示内容を増やしてみましょう。

---
## 画像の追加
---
Assets.xcassetsに使いたい画像をドロップします。

<img width="867" alt="スクリーンショット 2020-04-30 1.55.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/c7abbc15-f2be-4612-0c1d-3c1ecf07ea74.png">

---
画像を反映させます。

```ContentView.swift
import SwiftUI

struct Team: Identifiable {
    var id: Int
    var name: String
    var name_en: String
    var colorRed: Double
    var colorGreen: Double
    var colorBlue: Double
}


struct ContentView: View {
    let teams: [Team] = [
        Team(id: 1, name: "北海道", name_en: "hokkaido", colorRed: 2 / 255, colorGreen: 81 / 255, colorBlue: 140 / 255),
        Team(id: 2, name: "宮城", name_en: "miyagi", colorRed: 133 / 255, colorGreen: 1 / 255, colorBlue: 15 / 255),
        Team(id: 3, name: "埼玉", name_en: "saitama", colorRed: 16 / 255, colorGreen: 41 / 255, colorBlue: 97 / 255),
        Team(id: 4, name: "千葉", name_en: "chiba", colorRed: 34 / 255, colorGreen: 24 / 255, colorBlue: 21 / 255),
        Team(id: 5, name: "大阪", name_en: "osaka", colorRed: 176 / 255, colorGreen: 143 / 255, colorBlue: 50 / 255),
        Team(id: 6, name: "福岡", name_en: "fukuoka", colorRed: 242 / 255, colorGreen: 202 / 255, colorBlue: 0 / 255),
    ]

    var body: some View {
        List(teams) { team in
            Image(team.name_en)
                .resizable()
                .scaledToFit()
                .frame(width: 32.0, height: 32.0)
            Text(team.name)
                .foregroundColor(Color(red: team.colorRed, green: team.colorGreen, blue: team.colorBlue))
            Text(team.name_en)
                .foregroundColor(Color(red: team.colorRed, green: team.colorGreen, blue: team.colorBlue))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

Teamsにname_enという変数を追加し、画像名と合わせています。
これでプレビューはこんな感じ。

---

<img width="377" alt="スクリーンショット 2020-04-30 2.00.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130324/14bb782e-f4aa-0430-0383-9ac0ab5ec320.png">

列をタップした際にページ遷移する処理などは
またの機会に書けたらと思います。