向 UISlider 添加渐变不起作用答案

【问题标题】：Adding gradient to UISlider doesn't work向 UISlider 添加渐变不起作用
【发布时间】：2017-11-23 08:37:09
【问题描述】：

我正在尝试向 UISlider 的左侧添加渐变，如下所示：

let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.frame
gradientLayer.frame.size.height = self.trackHeight
gradientLayer.frame.origin = CGPoint.zero
gradientLayer.colors = [UIColor.blue, UIColor.red]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

let trackImage = UIImage.imageWithLayer(layer: gradientLayer)
self.setMinimumTrackImage(trackImage, for: .normal)

UIImage 扩展：

class func imageWithLayer(layer: CALayer) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(layer.bounds.size, layer.isOpaque, 0.0)
    layer.render(in: UIGraphicsGetCurrentContext()!)
    let img = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return img!
}

由于某种原因，当我运行应用程序时，我没有得到渐变，甚至没有得到任何颜色，它只是清晰的颜色 (alpha) 而不是渐变。

知道出了什么问题吗？

谢谢！

【问题讨论】：

你可以使用这个库github.com/jonhull/GradientSlider
@JitendraModi 这不是我问的...
用一张图片更新您的问题，该图片显示当拇指位于滑块中间和滑块最右端时您希望滑块的外观。

标签： ios cocoa-touch uiimage uislider

【解决方案1】：

CAGradientLayer 使用 CGColors 数组作为输入。要解决您的问题，请考虑通过更改以下内容来使用 CGColor： gradientLayer.colors = [UIColor.blue, UIColor.red] 对此 gradientLayer.colors = [UIColor.blue.cgColor, UIColor.red.cgColor]

编辑您可能会在UISlider 左边缘（最小轨道图像）上看到一个方形边缘！所以为了解决这个问题，只需这样改变你的扩展功能：

class func imageWithLayer(layer: CALayer, cornerRadius: CGFloat) -> UIImage {
    layer.cornerRadius = cornerRadius
    UIGraphicsBeginImageContextWithOptions(layer.bounds.size, false, 0)
    layer.render(in: UIGraphicsGetCurrentContext()!)
    let img = UIGraphicsGetImageFromCurrentImageContext()?.resizableImage(withCapInsets: UIEdgeInsets.zero)
    UIGraphicsEndImageContext()
    return img!
}

【讨论】：