前回のクソアプリ実践トレーニングから少し間が開いてしまったが、SwiftUIの実践トレーニングとして第2弾のクソアプリを作ったので紹介しよう。

完成したアプリがこちら。

「カウントアップ！」ボタンを押すと数字が一つずつ加算されていき、3の倍数になるとアホに、5の倍数になると神妙な顔つきに変わるというだけのアプリだ。

今回のテーマ

倍数によって処理を変えるのは簡単なコードでいけるが、SwiftUIの画像の扱いに慣れることを今回のテーマとした。

コード全文

プロジェクトファイル一式はGitHubにあげておいた。

https://github.com/suckamon/NabeatsuCountUp

ここではメインとなるContentView.swiftのコード全文を載せておこう。

import SwiftUI

struct ContentView: View {
    @State private var cnt:Int = 0
    @State private var imageFileName:String = "nabeatsu_01"
    
    var body: some View {
        VStack {
            Text("世界のナベアツさんっ")
                .font(.title)
                .padding(.vertical)
            Button(action: {
                self.countUp()
            }) {
                Text("カウントアップ！")
                    .padding(.vertical)
            }
            Text("Count \(cnt)")
                .padding(.vertical)
            Image(self.imageFileName)
                .resizable()
                .frame(width: 300.0, height: 300.0, alignment: .leading)
                .clipShape(Circle())
                .shadow(color: Color(red: 0.5, green: 0.5, blue: 0.5, opacity: 0.2), radius: 20, x: 3, y: 3)
            Button(action: {
                self.reset()
            }) {
                Text("リセット")
            }
            .padding()
        }
    }
    
    func countUp() {
        self.cnt += 1
        if self.cnt % 5 == 0 {
            self.imageFileName = "nabeatsu_03"
        } else if self.cnt % 3 == 0 {
            self.imageFileName = "nabeatsu_02"
        } else {
            self.imageFileName = "nabeatsu_01"
        }
    }
    
    func reset() {
        self.cnt = 0
        self.imageFileName = "nabeatsu_01"
    }
}

今回の@State変数は、カウントアップ整数のcntと、画像ファイル名を表すimageFileNameの二つ。

これらをcountUp関数内で処理・変更し、ビュー側に反映させている。

画像の表示は以下のようにすれば単純に表示することだけはできる。

Image(self.imageFileName)

ただ、今回は練習もかねて様々なプロパティを設定し、装飾をおこなってみた。

Image(self.imageFileName)
    .resizable()
    .frame(width: 300.0, height: 300.0, alignment: .leading)
    .clipShape(Circle())
    .shadow(color: Color(red: 0.5, green: 0.5, blue: 0.5, opacity: 0.2), radius: 20, x: 3, y: 3)

これまでスタイル指定はCSSばかり触ってきたので、まだまだ慣れないがクソアプリ実践トレーニングを繰り返して少しずつ覚えていくしかない。