[SwiftUI] Slider のつまみの位置を Timer の進捗状況に合わせて動かす

以下にコード例を示します。

この例では、アプリが起動するととともに、タイマーがスタートします（3行目）。

タイマーの進捗状況は .onReceive で受け取ることができ、Slider の値を更新しています（10行目）。

struct ContentView: View {
    @State private var sliderVal = 0.0
    let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()

    var body: some View {

        VStack {
            Text(String(format: "%.1f", sliderVal))
            Slider(value: $sliderVal, in: 0...100)      // 0から100の範囲を指定
                .onReceive(timer) { _ in
                    if sliderVal < 100 {
                        sliderVal += 1
                    }
            }
            Spacer()
        }

    }
}

[Start][Pause][Stop]ボタンを配置し、タイマーに合わせてつまみを動かす

先ほどの例では、アプリの起動と同時に、タイマーがスタートしていました。

今度は、任意のタイミングでタイマーの開始ができるようにしていきます。

ストップウォッチクラスを作成する

せっかくですので、Timer を利用して、開始、一時停止、停止ができるストップウオッチクラスを作成します。

コードは以下の通りです。

//
//  StopWatch.swift
//  SliderAndTimer
//
//  Created by 高橋広樹 on 2022/05/14.
//

import Foundation

class StopWatch:ObservableObject{
    
    // ストップウォッチの状態
    enum status {
        case start
        case stop
        case pause
    }
    
    @Published var currentStatus:status = .stop
    @Published var elapsedTime = 0.0
    
    var timer = Timer()
    
    // ストップウォッチの開始
    func start(maxTime : Double = 1.0){
        currentStatus = .start
        timer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true){ timer in
            self.elapsedTime += 0.1
            
            if maxTime > 0.0 && self.elapsedTime > maxTime {
                self.stop()
            }           }
        }
    }
    
    // ストップウォッチの停止
    func stop(){
        timer.invalidate()
        elapsedTime = 0
        currentStatus = .stop
    }
    
    // ストップウォッチの一時停止
    func pause(){
        timer.invalidate()
        currentStatus = .pause
     }
}

13〜17行目は、ストップウオッチの状態を表す enum です。ストップウオッチが開始しているのか、一時停止中なのか、停止中なのかを表します。

19行目は、現在の状態を管理する変数で、データ型は先ほどの enum の status 型です。

20行目は、現在のストップウオッチの経過時間を表します。

この StopWatch クラスには、start(), stop(), pause() のメソッドがあり、それぞれのメソッドが実行されると、タイマーの開始、停止、一時停止が行われます。

タイマーを開始する start() メソッドは 25〜34行目です。

メソッドの引数 maxTime はタイマーの長さ（時間）を秒で指定することができます。引数で指定した時間に到達すると、タイマーは自動で停止します。引数に時間指定がない場合は、stop() メソッドが実行されるまでストップウオッチは動き続けます。

タイマーを停止する stop() メソッドは37〜41行目です。

タイマーを停止するために timer.invalidate() メソッドを実行した後、経過時間 elapsedTime を 0 にしています。

タイマーを一時停止する pause() メソッドは44〜47行目です。

タイマーを一時停止するために timer.invalidate() メソッドを実行します。 経過時間 elapsedTime の値は保持したままにしたいので、ここでは何の操作もしていません。

タイマーに合わせてつまみを動かす

作成した stopWatch クラスを利用して、タイマーに合わせてつまみを動かすアプリを作成します。

このアプリには、[Start][Pause][Stop]ボタンを配置し、[Start]が押されるとタイマーがスタートして、タイマー値に合わせてつまみが移動します。

また、[Pause]ボタンでタイマーが一時停止、[Stop]ボタンでタイマーが停止します。

コード例を以下に示します。

struct ContentView: View {
    @State private var sliderVal = 0.0
    @ObservedObject var stopWatch = StopWatch()

    var body: some View {

        VStack {
            
            HStack {
                Button("Start") {
                    stopWatch.start()
                }
                
                Button("Pause") {
                    stopWatch.pause()
                }
                
                Button("Stop") {
                    stopWatch.stop()
                }

            }
            
            Text(String(format: "%.1f", stopWatch.elapsedTime))
            Slider(value: $stopWatch.elapsedTime, in: 0...10)      // 0から100の範囲を指定
                .padding()
            
            Spacer()
        }
    }
}