如何在包含系统图像的背景按钮中放置渐变? [英] How to put a gradient in a background button witch contains a system image?

问题描述

我有一个带有系统映像的按钮:

I have a button with a system image:

@IBOutlet weak var ampouleButton: UIButton!

在viewdid加载中，我把这个:

in the viewdid load, i put this:

let ampouleButtonConfig = UIImage.SymbolConfiguration(
            pointSize: 30,
            weight: .regular,
            scale: .large)
        
        let ampouleButtonImage = UIImage(
            systemName: "lightbulb",
            withConfiguration: ampouleButtonConfig)
        
        ampouleButton.backgroundColor = Theme.gold03 // i need to put here a gradient
        ampouleButton.setImage(ampouleButtonImage, for: .normal)
        ampouleButton.tintColor = Theme.blanc
        ampouleButton.layer.cornerRadius = ampouleButton.frame.height / 2
        ampouleButton.layer.shadowOpacity = 0.4
        ampouleButton.layer.shadowRadius = 3
        ampouleButton.layer.shadowOffset =
            CGSize(width: 0, height: 5)
        ampouleButton.alpha = 1

我需要添加渐变而不是背景颜色.

instead of the background color, i need to put a gradient.

我对此进行了测试，但没有用:

i tested this but it didn't work:

let gradientLayer = CAGradientLayer()
            gradientLayer.frame = self.ampouleButton.bounds
            gradientLayer.colors = [UIColor.yellow.cgColor, UIColor.white.cgColor]
        ampouleButton.layer.insertSublayer(gradientLayer, at: 0)

推荐答案

实际上，按钮图像在图层后面.试试这个:

Actually, the button image goes behind the layer. Try this:

extension UIButton {
    func applyGradient(colors: [CGColor], radius: CGFloat = 0, startGradient: CGPoint = .init(x: 0.5, y: 0), endGradient: CGPoint = .init(x: 0.5, y: 1)) {
        // check first if there is already a gradient layer to avoid adding more than one
            let gradientLayer = CAGradientLayer()
            gradientLayer.cornerRadius = radius
            gradientLayer.colors = colors
            gradientLayer.startPoint = startGradient
            gradientLayer.endPoint = endGradient
            gradientLayer.frame = bounds
            layer.insertSublayer(gradientLayer, at: 0)
    }
}

并在 viewDidLoad 中放入:

And in the viewDidLoad put:

ampouleButton.applyGradient(colors: [Theme.bleu!.cgColor, Theme.softBlue!.cgColor], radius: self.ampouleButton.frame.height / 2, startGradient: CGPoint(x: 0, y: 0.5), endGradient: CGPoint(x: 1, y: 0)) 
if let imgView = ampouleButton.imageView { ampouleButton.bringSubviewToFront(imgView) }

从这里找到 applyGradient 函数:https://stackoverflow.com/a/62093932/2303865

Find applyGradient function from here : https://stackoverflow.com/a/62093932/2303865

这篇关于如何在包含系统图像的背景按钮中放置渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！