swift - 如何在拇指位置提取 uislider 渐变颜色?
问题描述
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
}
func setSliderGradient() {
let minTrackStartColor = UIColor(red:111/255, green: 111/255, blue: 111/255, alpha: 1.0)
let maxTrackColor = UIColor(red: 222/255, green: 222/255, blue: 222/255, alpha: 1.0)
do {
bottomNavBar.slider.setMinimumTrackImage(try bottomNavBar.gradientImage(
size: CGSize(width: bottomNavBar.slider.frame.width, height: 2),
colorSet: [minTrackStartColor.cgColor, maxTrackColor.cgColor]),
for: .normal)
bottomNavBar.slider.setMaximumTrackImage(try bottomNavBar.gradientImage(
size: CGSize(width: bottomNavBar.slider.frame.width, height: 2),
colorSet: [minTrackStartColor.cgColor, maxTrackColor.cgColor]),
for: .normal)
let thumb = UIView(frame: CGRect(x: 0, y: 0, width: 19, height: 10))
thumb.backgroundColor = UIColor(red: 222/255, green: 222/255, blue: 222/255, alpha: 1)
thumb.layer.cornerRadius = 5
bottomNavBar.slider.setThumbImage(thumb.asImage(), for: .normal)
} catch {
bottomNavBar.slider.minimumTrackTintColor = minTrackStartColor
bottomNavBar.slider.maximumTrackTintColor = maxTrackColor
}
}
在 uislider 中,greadient 设置为如上代码。
我想根据拇指的移动为该位置的拇指着色。
如何在拇指位置提取 uislider 渐变颜色?
解决方案
尝试创建一个渐变层并更新,startPoint
具体取决于您当前的滑块值。endPoint
location
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [colorStart.cgColor, colorEnd.cgColor]
gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)
gradientLayer.locations = [0, 1]
gradientLayer.frame = bounds
推荐阅读
- javascript - 为 ChartsJs 中的图表添加第二个自定义工具提示
- reactjs - 如何测试我的操作、状态和 UI。我正在使用带有 jest 和测试库的上下文 API?
- xml - 使用 PowerShell 循环遍历 XML 时遇到问题
- json - 如何访问 Apex 中的嵌套 JSON?
- python - Pandas 将逗号分隔的键值输出成表格形式
- datatables - 没有滚动条时处理消息位置的数据表
- javascript - JS - 使用 FileReader 对象时只允许上传一个文件
- html - 如何在移动布局中居中文本?
- javascript - 电子邮件表格适用于我的网站的一个版本,但不适用于另一个版本?
- java - 代理类中的空依赖项