带有渐变层的iOS UISLider [英] iOS UISLider with gradient layer

问题描述

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

I'm building an iOS application in which I have to implement a custom UISlider. The problem is that the built-in UISlider doesn't support gradient track. Another issue is my UI style guide shows that the current tracking value rectangle should be a gradient of two colors as shown in the image

如何构建UISlider的自定义版本?我曾经考虑过将现有的子类作为子类，或者通过构建UIControl子类来实现.

How can I build a customized version of the UISlider? I have thought of either subclassing the existing one or by building a UIControl subclass.

我正在使用xcode 9.4和swift 4.2

I'm using xcode 9.4 and swift 4.2

提前谢谢！

推荐答案

我最终通过将渐变层设置为滑块最小轨道图像的图像来解决了这个问题，

I ended up solving the problem by setting the gradient layer as an image for the slider minimum track image as following:

@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()
    }


}

这篇关于带有渐变层的iOS UISLider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！