Swift：向按钮添加渐变后未显示按钮图像

Posted 2023-03-14

【中文标题】Swift：向按钮添加渐变后未显示按钮图像

【英文标题】：Swift: Button image not showing after adding gradient to button

【发布时间】：2017-04-04 11:44:03

【问题描述】：

请您提供帮助，我创建了一个渐变，已添加到按钮中，但现在我使用情节提要设置的按钮图像不再显示。我的代码如下：

import UIKit

class MenuViewController: UIViewController 

    @IBOutlet weak var productsAndServicesButton: UIButton!

       override func viewDidLoad() 
        super.viewDidLoad()

        let bg = CAGradientLayer().redBackgroundGradient()
        bg.frame = self.productsAndServicesButton.bounds
        self.productsAndServicesButton.layer.insertSublayer(bg, at: 0)

   

    override func didReceiveMemoryWarning() 
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    

实际渐变实现的函数代码如下：

import UIKit

extension CAGradientLayer 

    func redBackgroundGradient() -> CAGradientLayer
        let startColor =  UIColor(red:0.82, green:0.13, blue:0.19, alpha:1.0)
        let centreColor = UIColor(red:0.65, green:0.04, blue:0.10, alpha:1.0)
        let endColor = UIColor(red:0.56, green:0.04, blue:0.09, alpha:1.0)

        let gradientColors : [CGColor] = [startColor.cgColor,centreColor.cgColor,endColor.cgColor]
        let gradientLocations : [Float] = [0.0,0.5,1.0]
        let gradientLayer : CAGradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors
        gradientLayer.locations = gradientLocations as [NSNumber]?

        return gradientLayer
    

我希望图像出现在渐变的顶部，如下所示

the red will be the gradient and the white image is the one i want to display

【参考方案1】：

您可以使用bring​Subview(to​Front:​) 将按钮的imageView 移动到top position

if let imageView = button.imageView 
    productsAndServicesButton.bringSubviewToFront(imageView)

【参考方案2】：

作为@Oleh 答案的替代方案，您可以将内容添加到渐变层，例如，

gradient.contents = imageView.image?.cgImage