今回のお題

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

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

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

「Create a new Xcode project」を選択

「Single View APP」を選択しNext

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

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

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

textを増やす

このままText("Hello, world")をコピペすると。。。

おうふ。。。

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

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

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

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

テキストに色をつける

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

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

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

リスト表示

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

あらら、、これはクドい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()
    }
}

その結果。。。

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

画像の追加

Assets.xcassetsに使いたい画像をドロップします。

画像を反映させます。

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という変数を追加し、画像名と合わせています。
これでプレビューはこんな感じ。

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