【Swift】UISliderで5刻みに値を表示させる

Swift・Xcode プログラミング

どうも、ねこきち（@nekokichi1_yos2）です。

 

今回は、５を一定間隔とする、5刻みのスライダーを作ります。

（５、１０、１５、２０、２５、３０....）

 

また、UISliderの幅を、0〜1000、とします。

 

解説

 

結論から言うと、

  • if UISlider.value（スライダー値）/  5 == 0 {}

を書けば、完成です。

 

しかし、下記のように不便なスライダーとなってしまいます。

 ↓

 

上記の問題は、5の倍数をうまく拾い切れていないこと、です。

 

0~1000の内、5の倍数は200個あります。

 

言い換えれば、1000個の内200個は5の倍数、です。

 

そして、UISlider.value（スライダー値）/  5、は5の倍数の点（位置）を特定します。

 

例えると、下記の図になります。

↓

f:id:nekokichi_yos2:20200426222359p:plain

しかし、スライダーは値の領域ですので、点を指定するのは非効率です。


なので、スライダーの範囲が広いほど、つまみの同じ移動量でもスライダーの値は大きく変化するので、点（5の倍数）を確実に拾うためには、細かくつまみを動かさないといけません。

 

結果、つまみを早く動かすと、値が飛んで表示されてしまうのです。

 

したがって、スライダーが値の領域である以上、領域ごとに5の倍数を指定すればいいのです。

 ↓

f:id:nekokichi_yos2:20200426222402p:plain

（スライダー値が0~5なら5、5~10なら10、10~15なら15....）

 

方法は、if文で

  • 5の倍数 → スライダー値
  • 5の倍数でない → (スライダー値 / 5 + 1) x 5

です。

 

もし、スライダー値が5.0なら、そのまま表示。

 

もし、スライダー値が9.1なら、

  • 9.1 / 5 = 1
  • 1 + 1 = 2
  • 2 x  5 = 10
  • →10を表示

ということです。

↓

f:id:nekokichi_yos2:20200426220925p:plain

 

ソースコード

 

import UIKit

class CustomSlider: UIViewController {
    
    @IBOutlet weak var slider: UISlider!
    @IBOutlet weak var label: UILabel!
    
    @IBAction func slider(_ sender: UISlider) {
        //5の倍数?
        if Int(sender.value) % 5 == 0 {
            //Labelに表示
            label.text = "\(Int(sender.value))"
        } else {
            label.text = "\((Int(sender.value) / 5 + 1) * 5)"
        }
    }
    
}

 

結果