設定 iOS App slider 的移動距離(step)

iOS App 的 slider 預設是連續滑動的，比方 slider 的範圍是 18 ~ 20，因此當我們從 18 滑到 20 時，可以停在 18.1，18.2 等中間小數點的數字。

然而有時我們希望能調整 slider 的刻度，控制它移動的距離(step)。比方滑動 slider 設定彼得潘的年紀，範圍是 18 ~ 25。我們希望年紀是整數，想要 slider 停在 19，20 這樣的整數，別停在 18.1，18.2 這種奇怪的年紀。

接下來就讓我們示範如何控制 SwiftUI & UIKit slider 的移動距離。

SwiftUI

SwiftUI 的 slider 很貼心，參數 step 可控制移動的距離。因此我們只要將 step 設為 1，即可讓年紀保持整數。另外在 Text 裡我們利用 %g 讓型別 Double 的 age 變成字串時只顯示整數，不會出現小數點。

struct ContentView: View {
    @State private var age: Double = 0

    var body: some View {
        VStack {
            Image("peter")
                .resizable()
                .scaledToFit()
            Slider(value: $age, in: 18...25, step: 1)
            Text("peter's age \(age, specifier: "%g")")
                .font(.largeTitle)
        }
        .padding()      
    }
}

slider 滑動時將採用我們熟悉的四捨五入，滑到 18.6 時移動到 19，滑到 18.2 時移動到 18。

UIKit

在 slider 滑動時呼叫 round() 計算四捨五入後的整數，比方 18.7 變成 19，然後更新 slider 的 value。

class ViewController: UIViewController {
    @IBOutlet weak var label: UILabel!
    
    @IBAction func sliderChange(_ sender: UISlider) {
        sender.value.round()
        label.text = "\(Int(sender.value))"
    }
}

想讓 slider 移動的距離大於 1 會麻煩一點，需要用到一些小學的數學，以下為移動距離 5 的例子。

class ViewController: UIViewController {
    @IBOutlet weak var label: UILabel!
    
    @IBAction func sliderChange(_ sender: UISlider) {
        let step: Float = 5.0
        sender.value = (sender.value / step).rounded() * step
        label.text = "\(Int(sender.value))"
    }
}

利用 (sender.value / step).rounded() * step 可算出以 step 為倍數，最接近的數字，比方 sender.value 為 8， step 為 5 時，最接近的數字為 10，因為 8.0 / 5.0 = 1.6，1.5 四捨五入為 2.0，2.0 * 5.0 = 10.0。