MILLEN BOX

音楽好きの組み込みソフトエンジニアによるプログラミング(主にiOSアプリ開発)の勉強の記録

SwiftでUISliderのデザインをカスタマイズする方法 [UISlider] [swift2.2]

今回はUISliderのデザインをカスタマイズする方法を残しておきます。
 
f:id:anthrgrnwrld:20160818150442g:plain  
Githubは以下です。

GitHub - anthrgrnwrld/customSlider

また今回は、Objective-Cで書かれた以下のページを参考に Storyboard + Swift で作成しました。

lab.dolice.net

ポイント & コード

  • Sliderの画像の指定はUISliderのメソッド setThumbImage, setMinimumTrackImage, setMaximumTrackImageにて行います。
  • 画像の作成の際、Sliderバーの長さを伸ばすため、stretchableImageWithLeftCapWidthというメソッドを使用するのが便利です。

(参考URL)

www.system-i-enter.com

  • コード
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var mySlider: UISlider!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        setCustomSlider()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func setCustomSlider() {

        //スライダー初期化
        mySlider.minimumValue = 0.0
        mySlider.maximumValue = 1.0
        mySlider.value = 0.5
        
        //スライダーのデザインをカスタマイズ
        let imageForThumb = UIImage(named: "slider_thumb.png")
        let imageMinBase = UIImage(named: "slider_left.png")
        let imageMaxBase = UIImage(named: "slider_right.png")
        let imageForMin = imageMinBase?.stretchableImageWithLeftCapWidth(4, topCapHeight: 0)
        let imageForMax = imageMaxBase?.stretchableImageWithLeftCapWidth(4, topCapHeight: 0)
 
        mySlider.setThumbImage(imageForThumb, forState: .Normal)
        mySlider.setThumbImage(imageForThumb, forState: .Highlighted)
        mySlider.setMinimumTrackImage(imageForMin, forState: .Normal)
        mySlider.setMaximumTrackImage(imageForMax, forState: .Normal)
        
    }


}