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

とします。これで今度ボタンを押せばタイマーがスタートしてカウントが始まります。取りあえず動くようになりました。