SwiftUIで行こう！- タイマーを作ろ！ - 2

機能を追加していきます。参考サイトです。

タイマーの心臓部、class TimerManager:ObservableObject{}を編集していきます。

Pickerで選んだ時間をsecondsLeftに代入して使えるようにすること、その選んだ時間をUserDefaultsで記憶する命令を書いていきます。

@Published var secondsLeft = UserDefaults.standard.integer(forKey: "timerLength")

func setTimeLength(minutes:Int){
       let defalts = UserDefaults.standard
       defalts.set(minutes,forKey: "timerLength")
       secondsLeft = minutes
   }

関数を作ります。

  func reset(){
       self.timermode = .initial
       self.secondsLeft = UserDefaults.standard.integer(forKey: "timerLength")
       timer.invalidate()
   }
   
   func pause(){
       self.timermode = .pause
       timer.invalidate()
   }

この関数を .onTapGestureに追加していきます。

 Image(systemName: timerManager.timermode == .running ? "pause.circle.fill" : "play.circle.fill")
              .resizable()
              .aspectRatio(contentMode: .fit)
              .frame(width: 180, height: 180)
              .foregroundColor(.red)
              .onTapGesture(perform: {
                 self.timerManager.timermode == .running ? self.timerManager.pause() : self.timerManager.start()
   })

もう一つ。

   if timerManager.timermode == .pause{
        Image(systemName: "gobackward")
              .aspectRatio(contentMode: .fit)
              .frame(width: 50, height: 50)
              .padding(.top,40)
              .onTapGesture(perform: {
                   self.timerManager.reset()
                })
    }

 ContentView: View {}を編集します。関数setTimeLengthで実際のPickerで選んだインデックスを元に配列から該当する数字を抜き出し、60を掛けています。

availableMinutes[self.selectPickerIndex]*60

そしてタイマーの残りの秒数となる変数secondsLeftに代入します。

.onTapGesture(perform: {
if self.timerManager.timermode == .initial{
self.timerManager.setTimeLength(minutes: self.availableMinutes[self.selectPickerIndex]*60)
}
self.timerManager.timermode == .running ? self.timerManager.pause() : self.timerManager.start()
})

分、秒の変換を行うためにTimerMode.swift、enum{}の下に追記します。秒数で受けたものを分に変更し、表示を"分：秒"の形に整形します。

func secondsToMinutesAndSeconds(seconds:Int) -> String{
   let minutes = "\((seconds % 3600) / 60)"
   let seconds = "\((seconds % 3600) % 60)"
   let minuteStamp = minutes.count > 1 ? minutes : "0" + minutes
   let secondStamp = seconds.count > 1 ? seconds : "0" + seconds
   
   return "\(minuteStamp) : \(secondStamp)"
}

ContentView()を編集します。表示部分Text()を変更します。

Text(secondsToMinutesAndSeconds(seconds: timerManager.secondsLeft))

これでPickerで選んだ数字が"分：秒"になります。

タイマーを動かす方法としてはImage()で指定している画像に .onTapGesture(perform: {}に

TimerManager()

で書いたコードstart()、reset()などをタップした時に実行させます。これでタイマーが動き表示部には時間がカウントダウンされます。