首页 > 解决方案 > 如何在拇指位置提取 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 渐变颜色?

标签: swiftgradientuislider

解决方案


尝试创建一个渐变层并更新,startPoint具体取决于您当前的滑块值。endPointlocation

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

推荐阅读