今回のお題
これまで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
リストを使えるようにコードを以下のように書き換えました。
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に使いたい画像をドロップします。
画像を反映させます。
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という変数を追加し、画像名と合わせています。
これでプレビューはこんな感じ。
列をタップした際にページ遷移する処理などは
またの機会に書けたらと思います。