SwiftUIで行こう!-カウントダウン アプリ!
「Catch Questions アカデミー」さん(https://www.youtube.com/watch?v=zYhJs93s9cI)と
を参考に作ってみました。
基本です。ContentViewです。
struct ContentView : View {
var toDate = Calendar.current.date(byAdding:.hour,value:1,to:Date())
var body: some View {
TimerView(setDate: toDate!)
}
}
var body: some View{} の中に
TimerView(setDate: toDate!)
struct 構造体を入れて実行します。初期値は
var toDate = Calendar.current.date(byAdding:.hour,value:1,to:Date())
と作っています。
byAdding:.hour,value:1,to:Date()
なので、1時間の残り時間を表示します。
表示が出来たらあとはカウントダウンしていきます。
TimerView(setDate: toDate!)
を実行するプログラミングをします。別ファイルで管理します。
struct TimerView : View {}
を作っていきます。タイマーの構成、動きです。別ファイルで管理します。
@State var nowD:Date = Date()
let setDate:Date
変数は2つ
@State var nowD:Date = Date()
については@Stateを付けて Timer.scheduledTimerで更新していきます。
withTimeInterval: 1で1秒毎に更新されます。
func TimerFunc(from date:Date)->String{}
のなかで、let timeValに更新した時間を入れていきます。次に
return String(format: "%02dd:%02dh:%02dm:%02ds",
timeVal.day ?? 00,
timeVal.hour ?? 00,
timeVal.minute ?? 00,
timeVal.second ?? 00)
に入れていき、最終的にfuncはText()の中に入れ引数を渡すことで画面表示させることが出来ます。.onAppear(perform: {}で起動するには「_ = self.timer」を入力する必要があります
var body: some View {
Text(TimerFunc(from: setDate))
}
TimerView全コードです。
import SwiftUI
struct TimerView : View {
@State var nowD:Date = Date()
let setDate:Date
var timer: Timer {
Timer.scheduledTimer(withTimeInterval: 1, repeats: true) {_ in
self.nowD = Date()
}
}
var body: some View {
Text(TimerFunc(from: setDate))
.font(.largeTitle)
.onAppear(perform: {
_ = self.timer
})
}
func TimerFunc(from date:Date)->String{
let cal = Calendar(identifier: .japanese)
let timeVal = cal.dateComponents([.day,.hour,.minute,.second], from: nowD,to: setDate)
return String(format: "%02dd:%02dh:%02dm:%02ds",
timeVal.day ?? 00,
timeVal.hour ?? 00,
timeVal.minute ?? 00,
timeVal.second ?? 00)
}
}
日付の取得とその差分を利用してタイマーをカウントダウンして画面上に表示させています。
この記事が気に入ったらサポートをしてみませんか?