Swift 漸變 UISlider

Brocadecarp發表於2018-04-23
SwiftUIIDE

由於專案需求，需要做一個漸變的UISlider，如下圖：

漸變UISlider
一開始，我再上面那塊扇形的圖片上加了個手勢，然後根據下面那個漸變的圖片的點來獲取顏色，但是這樣的話，就需要後臺替我儲存顏色的點，而這樣做的話，安卓和 iOS 就很難適配。所以就放棄了這個方法，於是和安卓討論了很久，決定用進度條的方式來實現這個功能。那麼下面我就來說說我的思路。

首先，得把 UISlider 弄成上面的樣子。繼承 UISlider，我寫了一個方法，讓外界來確定 Slider 的滑動條圖片和滑塊的圖片：

 func initilizeInterface(sliderImageName: String, thumbImageName: String, isSetTimer: Bool) {
        colorTrackIV = UIImageView(image: UIImage(named: sliderImageName))
        colorTrackIV.transform = CGAffineTransformMakeScale(-1, 1) // 這裡是翻轉滑動條圖片，因為下面使用的 UIColor 的方法產生的顏色正好是圖片翻轉之後的顏色順序。
        arrowView = UIImageView(image: UIImage(named: thumbImageName))
        self.colorTrackIV.frame = CGRectMake(self.arrowView.width / 2, self.arrowView.height - 18, self.width - self.arrowView.width + 5, 2) // 確定滑動條的位置，大家可以根據自己的需求調整。
        self.addSubview(colorTrackIV)
        self.setThumbImage(UIImage(named: thumbImageName)!.tintAnyColor(self.colorFromCurrentValue()), forState: .Normal) // 設定滑塊圖片
        // 下面兩句程式碼是隱藏原本的 UISlider 的滑動條，若不加的話，就是下圖的效果
        self.setMinimumTrackImage(self.imageFormColor(UIColor.clearColor()), forState: .Normal)      
        self.setMaximumTrackImage(self.imageFormColor(UIColor.clearColor()), forState: .Normal)
        self.thumbImageName = thumbImageName
        self.isSetTimer = isSetTimer
    }
    // 返回純色圖片
    private func imageFormColor(color: UIColor) -> UIImage {
        let rect = CGRectMake(0, 0, 1, 1)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        CGContextSetFillColorWithColor(context!, color.CGColor)
        CGContextFillRect(context!, rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }
複製程式碼

未隱藏 Slider 原本的滑動條
UIColor 有一個方法是指定 HSB 來獲取顏色

public init(hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat) // hue: 色調，saturation: 飽和度，brightness: 亮度，alpha: 透明度
複製程式碼

那麼，從這個方法來看，我們可以把飽和度和亮度固定為 1，透明度不用說，肯定是不透明的，所以也是1，色調根據 UISlider 的 value 來改變。 寫一個獨立的方法，來獲取顏色

func colorFromCurrentValue() -> UIColor {
    return UIColor(hue: CGFloat(self.value), saturation: 1, brightness: 1.0, alpha: 1.0)
}
複製程式碼

重寫 UISlidr 的手指拖動等方法

 // 手指開始觸控
    override func beginTrackingWithTouch(touch: UITouch, withEvent event: UIEvent?) -> Bool {
        let tracking = super.beginTrackingWithTouch(touch, withEvent: event)
        // 設定滑塊圖片，tintAnyColor 是渲染圖片方法 
        self.setThumbImage(UIImage(named: self.thumbImageName)!.tintAnyColor(self.colorFromCurrentValue()), forState: .Normal)
        return tracking
    }
    
    // 持續觸控
    override func continueTrackingWithTouch(touch: UITouch, withEvent event: UIEvent?) -> Bool {
        let con = super.continueTrackingWithTouch(touch, withEvent: event)
        self.setThumbImage(UIImage(named: self.thumbImageName)!.tintAnyColor(self.colorFromCurrentValue()), forState: .Normal)
        return con
    }
    
    // 結束觸控
    override func endTrackingWithTouch(touch: UITouch?, withEvent event: UIEvent?) {
        super.endTrackingWithTouch(touch, withEvent: event)
        self.setThumbImage(UIImage(named: self.thumbImageName)!.tintAnyColor(self.colorFromCurrentValue()), forState: .Normal)
    }
複製程式碼

那麼現在就完成了✌️，如果大家還有什麼更好的方法，歡迎分享哦~

相關文章