SwiftUIで行こう!- タイマーを作ろ! - 1
参考サイトをみながらタイマーを作ります。まず見た目から作っていきます。
新規プロジェクトを作り、タイマーのモードをまず決めるためのファイルを新規に作ります。タイマーの状態をenumで示してやります。
import Foundation
enum TimerMode {
case running
case pause
case initial
}
画面構成はタイトルと残り秒数、ボタン、時間を選べるようします。以下の部品を使います。
NavigationView{}
VStack{}
Text()
Image()
NavigationViewの中に、VStack{}を入れ、縦方向にText()と、Image()を配置していきます。
画像についてはenemで定義しているタイマーのモードにより変化させます。
Image(systemName: timermode == .running ? "pause.circle.fill" : "play.circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 180, height: 180)
.foregroundColor(.red)
if timermode == .pause{
Image(systemName: "gobackward")
.aspectRatio(contentMode: .fit)
.frame(width: 50, height: 50)
.padding(.top,40)
}
if timermode == .initial{
Picker(selection: $selectPickerIndex, label: Text("")){
ForEach(0..<availableMinutes.count){
Text("\(self.availableMinutes[$0]) min")
}
}
.labelsHidden()
}
そして、タイマーの肝である時間を1分ごとに選択させるPicker()
Picker(selection: $selectPickerIndex, label: Text("")){
ForEach(0..<availableMinutes.count){
Text("\(self.availableMinutes[$0]) min")
}
}
も設置します。
次は、これを動かす仕組みを作っていきます。
新しく実行させる部分をObservableObjectに準拠させるclassとしてまとめるためにファイルを作ります。
TimerManagerと名前をつけます。
class TimerManager:ObservableObject{
var timermode:TimerMode = .initial
var secondsLeft = 60
}
これを使って、ContentView.swiftの内容を変更していきます。データの管理を"TimerManager"に集約していきたいので、まず以下を定義してデータが入っていくようにしていきます。
@ObservedObject var timerManager = TimerManager()
timerManager.secondsLeft
timerManager.timermode
置き換えていきます。そして
class TimerManager:ObservableObject{}を編集していきます。
実際のタイマーを追加していきます。タイマーをスタートさせる関数
func start(){}
を作ります。
var timer = Timer()
func start(){
timermode = .running
timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true, block: { timer in
if self.secondsLeft == 0{
self.timermode = .initial
self.secondsLeft = 60
timer.invalidate()
}
self.secondsLeft -= 1
})
}
これをスタートボタンとなる画像 Image()に追加します。
.onTapGesture(perform: {
self.timerManager.start()
})
これで画像をタップするとタイマーがスタートするはずですが実際にボタンを押してみても動きません。
class TimerManager:ObservableObject{}
を編集します。
@Published var timermode:TimerMode = .initial
@Published var secondsLeft = 60
とします。これで今度ボタンを押せばタイマーがスタートしてカウントが始まります。取りあえず動くようになりました。
この記事が気に入ったらサポートをしてみませんか?