应用渐变后获取透明 UIButton答案

【问题标题】：Getting transparent UIButton after applying gradient应用渐变后获取透明 UIButton
【发布时间】：2018-08-02 14:23:18
【问题描述】：

我正在尝试开发一个应用程序来学习 Swift。我想通过添加渐变层来设计一个按钮，但问题是它没有出现在屏幕上。当我点击它应该出现的位置时，它就会发挥作用。

extension UIColor {
    convenience init(red: Int, green: Int, blue: Int) {
        assert(red >= 0 && red <= 255, "Invalid red component")
        assert(green >= 0 && green <= 255, "Invalid green component")
        assert(blue >= 0 && blue <= 255, "Invalid blue component")

        self.init(red: CGFloat(red) / 255.0, green: CGFloat(green) / 255.0, blue: CGFloat(blue) / 255.0, alpha: 1.0)
}

convenience init(rgb: Int) {
    self.init(
        red: (rgb >> 16) & 0xFF,
        green: (rgb >> 8) & 0xFF,
        blue: rgb & 0xFF
    )
}

}

extension UIButton
{
    func applyGradient(colors: [CGColor])
{
       let gradientLayer = CAGradientLayer()
       gradientLayer.colors = colors
       gradientLayer.startPoint = CGPoint(x: 0, y: 0)
       gradientLayer.endPoint = CGPoint(x: 1, y: 1)
       gradientLayer.frame = self.bounds
       self.layer.addSublayer(gradientLayer)
}

lazy var loginButton: UIButton = {
    let button = UIButton(type: .system)
    let color1 = UIColor(red: 26, green: 41, blue: 128)
    let color2 = UIColor(red: 38, green: 208, blue: 206)
    button.applyGradient(colors: [color1.cgColor, color2.cgColor]) 
    button.setTitle("Log in", for: .normal)
    button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 16)
    button.setTitleColor(.black, for: .normal)

    button.addTarget(self, action: #selector(handleButtonLogin), for: .touchUpInside)

    return button
}()

实际上，它应该说登录（白色）蓝色到绿色渐变层。如果我将登录标题颜色设置为黑色。运行代码就可以看到了。

【问题讨论】：

在应用渐变之前，您可能需要在loginButton 中添加一个大小（嗯，一个框架）。因为gradientLayer.frame = self.bounds，应该是0,0,0,0，所以看不到渐变层...

标签： ios swift xcode swift4

【解决方案1】：

你只是错过了框架

loginButton.frame = self.view.frame
self.view.addSubview(loginButton) 
loginButton.applyGradient(colors: [UIColor.red.cgColor,UIColor.blue.cgColor])

也改变这一行

self.layer.addSublayer(gradientLayer)

到

self.layer.insertSublayer(gradientLayer, at: 0)

为了不隐藏按钮的标题

【讨论】：