带有渐变层的 iOS UISLider

Posted

技术标签:

【中文标题】带有渐变层的 iOS UISLider【英文标题】:iOS UISLider with gradient layer 【发布时间】:2018-06-14 21:20:04 【问题描述】:

我正在构建一个 ios 应用程序,我必须在其中实现一个自定义 UISlider。问题是内置的 UISlider 不支持渐变轨迹。另一个问题是我的 UI 样式指南显示当前跟踪值矩形应该是如图所示的两种颜色的渐变

如何构建 UISlider 的自定义版本?我考虑过继承现有的子类或构建 UIControl 子类。

我使用的是 xcode 9.4 和 swift 4.2

提前致谢!

【问题讨论】:

【参考方案1】:

我最终通过将渐变层设置为滑块最小轨道图像的图像来解决问题,如下所示:

@IBDesignable
class GradientSlider: UISlider 

    @IBInspectable var thickness: CGFloat = 20 
        didSet 
            setup()
        
    

    @IBInspectable var sliderThumbImage: UIImage? 
        didSet 
            setup()
        
    

    func setup() 
        let minTrackStartColor = Palette.SelectiveYellow
        let minTrackEndColor = Palette.BitterLemon
        let maxTrackColor = Palette.Firefly
        do 
            self.setMinimumTrackImage(try self.gradientImage(
            size: self.trackRect(forBounds: self.bounds).size,
            colorSet: [minTrackStartColor.cgColor, minTrackEndColor.cgColor]),
                                  for: .normal)
            self.setMaximumTrackImage(try self.gradientImage(
            size: self.trackRect(forBounds: self.bounds).size,
            colorSet: [maxTrackColor.cgColor, maxTrackColor.cgColor]),
                                  for: .normal)
            self.setThumbImage(sliderThumbImage, for: .normal)
         catch 
            self.minimumTrackTintColor = minTrackStartColor
            self.maximumTrackTintColor = maxTrackColor
        
    

    func gradientImage(size: CGSize, colorSet: [CGColor]) throws -> UIImage? 
        let tgl = CAGradientLayer()
        tgl.frame = CGRect.init(x:0, y:0, width:size.width, height: size.height)
        tgl.cornerRadius = tgl.frame.height / 2
        tgl.masksToBounds = false
        tgl.colors = colorSet
        tgl.startPoint = CGPoint.init(x:0.0, y:0.5)
        tgl.endPoint = CGPoint.init(x:1.0, y:0.5)

        UIGraphicsBeginImageContextWithOptions(size, tgl.isOpaque, 0.0);
        guard let context = UIGraphicsGetCurrentContext() else  return nil 
        tgl.render(in: context)
        let image = 

    UIGraphicsGetImageFromCurrentImageContext()?.resizableImage(withCapInsets: 
        UIEdgeInsets.init(top: 0, left: size.height, bottom: 0, right: size.height))
        UIGraphicsEndImageContext()
        return image!
    

    override func trackRect(forBounds bounds: CGRect) -> CGRect 
        return CGRect(
            x: bounds.origin.x,
            y: bounds.origin.y,
            width: bounds.width,
            height: thickness
        )
    

    override init(frame: CGRect) 
        super.init(frame: frame)
        setup()
    

    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
        setup()
    



【讨论】:

有没有办法像这家伙那样添加分隔符? github.com/superbderrick/SummerSlider sliderThumbImage 不更新颜色。它始终采用默认颜色。有什么想法吗?谢谢

以上是关于带有渐变层的 iOS UISLider的主要内容,如果未能解决你的问题,请参考以下文章

带有渐变层的 UIButton 慢

在drawInRect中绘制渐变层

带有渐变的 iOS UIProgressView

带有 uiscrollview 分页的 iOS 渐变动画

带有 MapKit ios 的渐变折线

我想从渐变层的触摸点上色,怎么做?