客製 UIKit 的 UISlider 樣式

以下分別介紹四種常見的 UISlider 樣式設定。

• slider 的顏色。
• slider 的最小值跟最大值圖片。
• 調整 slider 的高度。
• slider thumb 的圖片。

設定 slider 的顏色

設定 Min Track，Max Track & Thumb Tint。

• Min Track

填滿時的顏色。

• Max Track

未填滿時的顏色。

• Thumb Tint

圓形的顏色。

從程式設定的寫法如下(假設連到 controller 的 outlet 名字是 slider)，設定 minimumTrackTintColor，maximumTrackTintColor & thumbTintColor。

class ViewController: UIViewController {
    @IBOutlet weak var slider: UISlider!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        slider.minimumTrackTintColor = .systemPurple
        slider.maximumTrackTintColor = .systemTeal
        slider.thumbTintColor = .systemRed
   }
}

設定 slider 的最小值跟最大值圖片

設定 Min Image & Max Image。

從程式設定的寫法如下(假設連到 controller 的 outlet 名字是 slider)，設定 minimumValueImage & maximumValueImage。

class ViewController: UIViewController {
    @IBOutlet weak var slider: UISlider!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        slider.minimumValueImage = UIImage(systemName: "moon")
        slider.maximumValueImage = UIImage(systemName: "sun.max")
   }
}

調整 slider 的高度

在 storyboard 加入 slider，連到 controller 的 outlet 名字是 slider。

在 asset 加入圖片代表 slider 未填滿跟填滿時的顏色。

圖片的寬度 1 pixel，高度將控制 slider 的高度。1x 的圖片高度是 14 pixel，因此 slider 的高度將是 14 points。

呼叫 setMinimumTrackImage(_:for:) 設定 slider 填滿時的顏色圖片，呼叫 setMaximumTrackImage(_:for:) 設定 slider 未填滿時的顏色圖片。

class ViewController: UIViewController {
    @IBOutlet weak var slider: UISlider!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        slider.setMinimumTrackImage(UIImage(named: "slider_blue_track"), for: .normal)
        slider.setMaximumTrackImage(UIImage(named: "slider_green_track"), for: .normal)
    }
}

結果

slider 的高度變成 14 points。

設定 slider thumb 的圖片

在 storyboard 加入 slider，連到 controller 的 outlet 名字是 slider。

呼叫 setThumbImage(_:for:) 設定 slider 按著 thumb 跟沒按著 thumb 的圖片，按著時顯示星星，沒按著時顯示愛心，slider 的 tintColor 則決定圖片的顏色。

class ViewController: UIViewController {
    @IBOutlet weak var slider: UISlider!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let starImage = UIImage(systemName: "star.fill", withConfiguration: UIImage.SymbolConfiguration(pointSize: 30))
        slider.setThumbImage(starImage, for: .normal)
        
        let heartImage = UIImage(systemName: "heart.fill", withConfiguration: UIImage.SymbolConfiguration(pointSize: 30))
        slider.setThumbImage(heartImage, for: .highlighted)        
        slider.tintColor = .red
   }
}

結果