如何在 swift iOS 中为按钮色调添加渐变颜色答案

【问题标题】：How can i add Gradient colour for button tint in swift iOS如何在 swift iOS 中为按钮色调添加渐变颜色
【发布时间】：2022-11-13 00:59:18
【问题描述】：

是否有任何解决方案可以快速将色调颜色作为渐变应用

我的按钮有一个简单的白色图标我想将其更改为渐变色

【问题讨论】：

与其他 UIView 子类一样，UIButton 具有 tintColor 属性。但是，它需要UIColor 渐变不是简单的颜色，因此不能用作色调颜色。您想为按钮中的单色图像应用渐变色吗？您是否将图像安装到按钮的 imageView 属性中？
请分享您拥有的按钮的 UI，以便人们可以轻松地帮助您。
渐变不是颜色，不能用作色调。你的问题没有意义。您需要展示您所追求的效果的示例。

标签： ios swift colors uibutton gradient

【解决方案1】：

我根据Duncan C 评论更新了我的答案。

您可以在将图像设置为按钮之前修改图像。

extension UIImage {
    
    func drawLinearGradient(colors: [CGColor], startingPoint: CGPoint, endPoint: CGPoint) -> UIImage? {
        let renderer = UIGraphicsImageRenderer(size: self.size)
        
        var shouldReturnNil = false
        let gradientImage = renderer.image { context in
            context.cgContext.translateBy(x: 0, y: self.size.height)
            context.cgContext.scaleBy(x: 1.0, y: -1.0)

            context.cgContext.setBlendMode(.normal)
            let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)

            // Create gradient
            let colors = colors as CFArray
            let colorsSpace = CGColorSpaceCreateDeviceRGB()
            
            guard let gradient = CGGradient(colorsSpace: colorsSpace, colors: colors, locations: nil) else {
                shouldReturnNil = true
                return
            }

            // Apply gradient
            guard let cgImage = self.cgImage else {
                shouldReturnNil = true
                print("Couldn't get cgImage of UIImage.")
                return
            }
            
            context.cgContext.clip(to: rect, mask: cgImage)
            context.cgContext.drawLinearGradient(
                gradient,
                start: endPoint,
                end: startingPoint,
                options: .init(rawValue: 0)
            )
        }

        return shouldReturnNil ? nil : gradientImage
    }
    
}

你可以这样使用它：

guard let image = UIImage(named: "<your_image_name>") else { return }
v.image = image.drawLinearGradient(
    colors: [UIColor.blue.cgColor, UIColor.red.cgColor],
    startingPoint: .init(x: image.size.width / 2, y: 0),
    endPoint: .init(x: image.size.width / 2, y: image.size.height)
)
button.setImage(gradientImage, for: .normal)

此代码产生如下结果：

【讨论】：

感谢您的回复，这对我没有用，因为我想更改色调而不是图像
您确定您正确理解渐变的含义吗？
致 OP：此答案将采用源图像的不透明部分并使用线性渐变绘制它们。这似乎是您所要求的，因为您说“我的按钮有一个简单的白色图标，我想将其更改为渐变色”。这会将单色图像转换为彩色渐变图像。如果这不是你想要的，那么你需要解释你想要什么。
顺便说一句，您应该使用UIGraphicsImageRenderer 在现代代码中进行屏幕外绘图，而不是UIGraphicsBeginImageContextWithOptions。见this link

【解决方案2】：

我也遇到同样的问题但现在如果你想改变它的工作文字颜色。就像您通过此代码将图像转换为图案颜色

class gradiunTitle : UIButton  {

   override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
      }
   required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
      }
   private func setup() {
       let gradient = getGradientLayer(bounds: self.bounds)
      self.setTitleColor(gradientColor(bounds: self.bounds, gradientLayer: gradient), for: .normal)
       self.tintColor = gradientColor(bounds: self.frame, gradientLayer: gradient)
      }
    func getGradientLayer(bounds : CGRect) -> CAGradientLayer{
    let gradient = CAGradientLayer()
    gradient.frame = bounds
    //order of gradient colors
    gradient.colors = [UIColor.red.cgColor,UIColor.blue.cgColor, UIColor.green.cgColor]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    return gradient
    }
    
    func gradientColor(bounds: CGRect, gradientLayer :CAGradientLayer) -> UIColor? {
    UIGraphicsBeginImageContext(gradientLayer.bounds.size)
    gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return UIColor(patternImage: image!)
    }
}

【讨论】：

感谢您的回复，这不是我想要更改色调颜色的解决方案，而不是标题颜色。