iOS 带有渐变层的 UISLider
iOS UISLider with gradient layer
我正在构建一个 iOS 应用程序,我必须在其中实现自定义 UISlider。问题是内置的 UISlider 不支持渐变轨道。另一个问题是我的 UI 样式指南显示当前跟踪值矩形应该是两种颜色的渐变,如图所示
如何构建自定义版本的 UISlider?我考虑过将现有的子类化或构建一个 UIControl 子类。
我正在使用 xcode 9.4 和 swift 4.2
提前致谢!
我最终通过将渐变层设置为滑块最小轨道图像的图像解决了问题,如下所示:
@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。问题是内置的 UISlider 不支持渐变轨道。另一个问题是我的 UI 样式指南显示当前跟踪值矩形应该是两种颜色的渐变,如图所示
如何构建自定义版本的 UISlider?我考虑过将现有的子类化或构建一个 UIControl 子类。
我正在使用 xcode 9.4 和 swift 4.2
提前致谢!
我最终通过将渐变层设置为滑块最小轨道图像的图像解决了问题,如下所示:
@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()
}
}