Swift 渐变 UISlider

来源：互联网发布：人人视频 for mac 编辑：程序博客网时间：2024/06/05 00:30

由于项目需求，需要做一个渐变的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)    }

那么现在就完成了✌️，如果大家还有什么更好的方法，欢迎分享哦~

阅读全文

0 0