修复 UISlider swift 上的两种颜色

如何解决修复 UISlider swift 上的两种颜色

Slider with two different colors

我们如何制作具有两种固定颜色的滑块？即使滑块移动，颜色也不会改变。此外，滑块拇指应该能够侧向这两种颜色中的任何一种。我应该能够定义第一部分的长度。

    func createSlider(slider:UiSlider) {
    let frame = CGRect(x: 0.0,y: 0.0,width: slider.bounds.width,height: 4)
    let tgl = CAGradientLayer()
    tgl.frame = frame
    tgl.colors = [UIColor.gray.cgColor,UIColor.red.cgColor]
    tgl.endPoint = CGPoint(x: 0.4,y:  1.0)
    tgl.startPoint = CGPoint(x: 0.0,y:  1.0)
    UIGraphicsBeginImageContextWithOptions(tgl.frame.size,false,0.0)
    tgl.render(in: UIGraphicsGetCurrentContext()!)
    
    let backgroundImage = UIGraphicsGetimageFromCurrentimageContext()
    UIGraphicsEndImageContext()

    slider.setMaximumTrackImage(backgroundImage?.resizableImage(withCapInsets:.zero),for: .normal)
    slider.setMinimumTrackImage(backgroundImage?.resizableImage(withCapInsets:.zero),for: .normal)
}

我已经试过了。但这并不能完全满足我想要实现的目标。

解决方法

这是一种方法...

• 将最小和最大轨道图像设置为“空”图像
• 添加左右子视图以充当“假”轨道图像
• 在每个侧边子视图上添加不同颜色的子层
• 滑动拇指时，更新图层的框架

这是一些示例代码...您可能需要做一些调整：

class XebSlider: UISlider {
    
    private var colors: [[UIColor]] = [
        [.black,.black],[.black,]

    // left and right views will become the "fake" track images
    private let leftView = UIView()
    private let rightView = UIView()
    
    // each view needs a layer to "change color"
    private let leftShape = CALayer()
    private let rightShape = CALayer()
    
    // constraints that will be updated
    private var lvWidth: NSLayoutConstraint!
    private var lvLeading: NSLayoutConstraint!
    private var rvTrailing: NSLayoutConstraint!
    
    // how wide the two "sides" should be
    private var leftPercent: CGFloat = 0
    private var rightPercent: CGFloat = 0

    // track our current width,so we don't repeat constraint updates
    //  unless our width has changed
    private var currentWidth: CGFloat = 0
    
    init(withLeftSidePercent leftWidth: CGFloat,leftColors: [UIColor],rightColors: [UIColor]) {
        super.init(frame: .zero)
        commonInit()
        leftView.backgroundColor = leftColors[1]
        rightView.backgroundColor = rightColors[1]
        leftShape.backgroundColor = leftColors[0].cgColor
        rightShape.backgroundColor = rightColors[0].cgColor
        leftPercent = leftWidth
        rightPercent = 1.0 - leftPercent
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        // set both track images to "empty" images
        setMinimumTrackImage(UIImage(),for: [])
        setMaximumTrackImage(UIImage(),for: [])

        // add left and right subviews
        [leftView,rightView].forEach { v in
            v.translatesAutoresizingMaskIntoConstraints = false
            v.layer.cornerRadius = 4.0
            v.layer.masksToBounds = true
            v.isUserInteractionEnabled = false
            insertSubview(v,at: 0)
        }
        
        // add sublayers
        leftView.layer.addSublayer(leftShape)
        rightView.layer.addSublayer(rightShape)
        
        // create constraints whose .constant values will be modified in layoutSubviews()
        lvLeading = leftView.leadingAnchor.constraint(equalTo: leadingAnchor,constant: 0.0)
        rvTrailing = rightView.trailingAnchor.constraint(equalTo: trailingAnchor,constant: 0.0)
        lvWidth = leftView.widthAnchor.constraint(equalToConstant: 0.0)
        
        // avoids auto-layout complaints when the frame changes (such as on device rotation)
        lvWidth.priority = UILayoutPriority(rawValue: 999)
        
        // set constraints for subviews
        NSLayoutConstraint.activate([
            lvLeading,rvTrailing,lvWidth,leftView.centerYAnchor.constraint(equalTo: centerYAnchor,constant: 0.0),leftView.heightAnchor.constraint(equalToConstant: 8.0),rightView.centerYAnchor.constraint(equalTo: leftView.centerYAnchor),rightView.heightAnchor.constraint(equalTo: leftView.heightAnchor),rightView.leadingAnchor.constraint(equalTo: leftView.trailingAnchor,constant: 1.0),])
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()

        // we only want to do this if the bounds width has changed
        if bounds.width != currentWidth {
            let trackRect = self.trackRect(forBounds: bounds)
            lvLeading.constant = trackRect.origin.x
            rvTrailing.constant = -(bounds.width - (trackRect.origin.x + trackRect.width))
            lvWidth.constant = trackRect.width * leftPercent
        }

        // get percentage of thumb position
        //  based on min and max values
        let pctValue = (self.value - self.minimumValue) / (self.maximumValue - self.minimumValue)
    
        // calculate percentage of each side that needs to be "covered"
        //  by the different color layer
        let leftVal = max(0.0,min(CGFloat(pctValue) / leftPercent,1.0))
        let rightVal = max(0.0,min((CGFloat(pctValue) - leftPercent) / rightPercent,1.0))

        var rLeft = leftView.bounds
        var rRight = rightView.bounds
        
        rLeft.size.width = leftView.bounds.width * leftVal
        rRight.size.width = rightView.bounds.width * rightVal
        
        // disable default layer animations
        CATransaction.begin()
        CATransaction.setDisableActions(true)
        leftShape.frame = rLeft
        rightShape.frame = rRight
        CATransaction.commit()
    }
}

以及显示其用法的控制器示例：

class ViewController: UIViewController {
    
    var slider: XebSlider!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let leftSideColors: [UIColor] = [
            #colorLiteral(red: 0.4796532989,green: 0.4797258377,blue: 0.4796373844,alpha: 1),#colorLiteral(red: 0.8382737041,green: 0.8332912326,blue: 0.8421040773,]
        let rightSideColors: [UIColor] = [
            #colorLiteral(red: 0.9009097219,green: 0.3499996662,blue: 0.4638580084,#colorLiteral(red: 0.9591985345,green: 0.8522816896,blue: 0.8730568886,]
        let leftSideWidthPercent: CGFloat = 0.5

        slider = XebSlider(withLeftSidePercent: leftSideWidthPercent,leftColors: leftSideColors,rightColors: rightSideColors)
        
        view.addSubview(slider)
        slider.translatesAutoresizingMaskIntoConstraints = false

        // respect safe area
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([

            // constrain slider 40-pts from Top / Leading / Trailing
            slider.leadingAnchor.constraint(equalTo: g.leadingAnchor,constant: 40.0),slider.trailingAnchor.constraint(equalTo: g.trailingAnchor,constant: -40.0),slider.topAnchor.constraint(equalTo: g.topAnchor,])
        
    }
    
    override func viewWillTransition(to size: CGSize,with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size,with: coordinator)
        coordinator.animate(alongsideTransition: { _ in
            // to get teh custom slider to update properly
            self.slider.setNeedsLayout()
        },completion: {
            _ in
        })
    }
}

结果：