Thursday, October 29, 2026
HomeiOS Developmentios - CAShapeLayer with completely different Colours

ios – CAShapeLayer with completely different Colours

[ad_1]

I’ve a CAShapeLayer based mostly on this reply that animates together with a UISlider.

enter image description here

It really works nice however because the shapeLayer follows alongside its simply 1 purple CAGradientLayer colour. What I would like is the shapeLayer to vary colours based mostly on sure factors of the slider. An instance is at 0.4 – 0.5 it is purple, 0.7-0.8 purple, 0.9-0.95 purple. These aren’t precise values, the precise values will fluctuate. I determine that any time it would not meet the situation to show purple it ought to in all probability simply be a transparent colour, which is able to simply present the black monitor beneath it. The end result would look one thing like this (by no means thoughts the form)

enter image description here

The purple colours are based mostly on the consumer sliding the slider and the letting go. The completely different positions of the slider that decide the purple colour relies on no matter situation. How can I do that.

UISlider

lazy var slider: UISlider = {
    let s = UISlider()
    s.translatesAutoresizingMaskIntoConstraints = false
    s.minimumTrackTintColor = .blue
    s.maximumTrackTintColor = .white
    s.minimumValue = 0
    s.maximumValue = 1
    s.addTarget(self, motion: #selector(onSliderChange), for: .valueChanged)
    return s
}()

lazy var progressView: GradientProgressView = {
    let v = GradientProgressView()
    v.translatesAutoresizingMaskIntoConstraints = false
    return v
}()

@objc fileprivate func onSliderChange(_ slider: UISlider) {

    let worth = slider.worth
    progressView.setProgress(CGFloat(worth), someCondition: Bool)
}

// ... progressView is similar width because the the slider

GradientProgressView:

public class GradientProgressView: UIView {

    var shapeLayer: CAShapeLayer = {
       // ...
    }()

    personal var trackLayer: CAShapeLayer = {
        let trackLayer = CAShapeLayer()
        trackLayer.strokeColor = UIColor.black.cgColor
        trackLayer.fillColor = UIColor.clear.cgColor
        trackLayer.lineCap = .spherical
        return trackLayer
    }()

    personal var gradient: CAGradientLayer = {
        let gradient = CAGradientLayer()
        let redColor = UIColor.purple.cgColor
        gradient.colours = [redColor, redColor]
        gradient.places = [0.0, 1.0]
        gradient.startPoint = CGPoint(x: 0, y: 0)
        gradient.endPoint = CGPoint(x: 1, y: 0)
        return gradient
    }()

    // ... add the above layers as subLayers to self ...

    func updatePaths() { // added in layoutSubviews

        let lineWidth = bounds.top / 2
        trackLayer.lineWidth = lineWidth * 0.75
        shapeLayer.lineWidth = lineWidth

        let path = UIBezierPath()
        path.transfer(to: CGPoint(x: bounds.minX + lineWidth / 2, y: bounds.midY))
        path.addLine(to: CGPoint(x: bounds.maxX - lineWidth / 2, y: bounds.midY))

        trackLayer.path = path.cgPath
        shapeLayer.path = path.cgPath

        gradient.body = bounds
        gradient.masks = shapeLayer
        
        shapeLayer.length = 1
        shapeLayer.strokeStart = 0
        shapeLayer.strokeEnd = 0
    }

    public func setProgress(_ progress: CGFloat, someCondition: Bool) {

        if someCondition {
             // redColor till the consumer lets go
        } else {
            // in any other case all the time a clearColor
        }

        shapeLayer.strokeEnd = progress
    }
}

[ad_2]

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments