[ad_1]
I’ve a CAShapeLayer based mostly on this reply that animates together with a UISlider.
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)
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]


