見出し画像

SwiftUIで超簡単に時計アプリを作る

SwiftUIを使えば、超簡単に時計アプリを作ることができる。

CombineでタイマーのPublisherを作成して、それをビューに.onReceive()で紐づけて、タイマー処理の中で現在時刻に更新して表示するだけで、簡単な時計アプリができる。

import SwiftUI

struct Time {
    var hour: Int = 0
    var minute: Int = 0
    var second: Int = 0
}

struct ContentView: View {
    @State var time = Time()
    
    // Combineで1秒ごとに実行されるタイマーを宣言
    let timer = Timer.publish(every: 1, on: .current, in: .common).autoconnect()
    
    var body: some View {
        Text(String(format: "%02d:%02d:%02d",time.hour, time.minute, time.second))      // HH:mm:ssで表示する
            .font(Font(UIFont.monospacedDigitSystemFont(ofSize: 128, weight: .light)))   // 等幅フォントを指定(時刻変化でサイズが変わらないように)
            .onReceive(timer){ _ in
                // タイマー処理で現在時刻に更新
                let now = Date()
                self.time.hour = Calendar.current.component(.hour, from: now)
                self.time.minute = Calendar.current.component(.minute, from: now)
                self.time.second = Calendar.current.component(.second, from: now)
            }
    }
}

ちなみに、iPadのPlaygroundsでアプリを開発できるようになったので、上記コードを直接iPad上で実行すれば、超簡単な時計アプリの出来上がり!

この記事が気に入ったらサポートをしてみませんか?