如何在自定义类按钮上添加渐变？答案

【问题标题】：How to add gradients on custom class buttons?如何在自定义类按钮上添加渐变？
【发布时间】：2019-05-05 06:58:01
【问题描述】：

我是 Swift/Xcode 的初学者。我在我的 Xcode 项目中创建了一个自定义类来处理可以找到的按钮外观（颜色、形状等）。

但是，我无法成功为这些按钮添加渐变。

我尝试了下面的代码，但它在我的圆形按钮上添加了一个新的方形渐变，而不是对这些按钮应用预期的渐变。这是我已经尝试过很多次的内容： - 将此代码添加到我的自定义按钮类（继承自 UIButton） - 将此代码添加到我的自定义按钮类（继承自 UIView） - 以上 2 种方法并删除背景颜色设置 - 使用从 viewController 调用的单独函数

func ConfigMenuButtons() {

    // Set button shape color
    layer.cornerRadius = 37

    // Set button size
    translatesAutoresizingMaskIntoConstraints = false
    widthAnchor.constraint(equalToConstant: 74).isActive = true
    heightAnchor.constraint(equalToConstant: 74).isActive = true

    // Set button text
    setTitleColor(.white, for: .normal)
    titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)

    // Set button shadow
    layer.shadowRadius = 2
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0, height: 2)
    layer.shadowOpacity = 0.8

    // Set button gradient colors
    let lightBlue = UIColor(red: 122/255, green: 127/255, blue: 249/255, alpha: 1)
    let darkBlue = UIColor(red: 74/255, green: 88/255, blue: 205/255, alpha: 1)

    // Set gradients
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = bounds
    gradientLayer.colors = [lightBlue.cgColor, darkBlue.cgColor]
    gradientLayer.locations = [0.0,1.0]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

    clipsToBounds = true

    // insert gradients to button
    layer.insertSublayer(gradientLayer, at: 0)
}

但我总是以这个“方形渐变层”出现在目标按钮上，而不是将这些渐变直接应用于这些按钮。如果有人有任何建议，那就太好了。谢谢！

Here is the screen shot of the button with its partial expected effect

【问题讨论】：

将自定义按钮的clipToBounds属性设置为true
非常感谢 Arash 的友好建议。我刚刚尝试过，它可以工作，但只在我的按钮的 1/4 上是圆形（圆形）。似乎渐变层从按钮的中心开始，仅覆盖按钮的左上四分之一......
能否附上圆形按钮的图片？
是的，确定：刚刚添加了代码的屏幕截图，并为当前结果打开
嗨，Charly，如果您上次编辑的是答案，请将其从问题中删除并添加为自己的答案。

标签： ios swift uibutton

【解决方案1】：

Here is a screenshot of fixed issue

我终于解决了这个问题，如下添加一个 CGRect 大小。

   func ConfigMenuButtons() {

    // Set button shape
    layer.cornerRadius = 37

    // Set button size
    translatesAutoresizingMaskIntoConstraints = false
    widthAnchor.constraint(equalToConstant: 74).isActive = true
    heightAnchor.constraint(equalToConstant: 74).isActive = true

    // Set button text
    setTitleColor(.white, for: .normal)
    titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)

    // Set button shadow
    layer.shadowRadius = 2
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0, height: 2)
    layer.shadowOpacity = 0.8

    // Set button gradient colors
    let lightBlue = UIColor(red: 112/255, green: 117/255, blue: 239/255, alpha: 1)
    let darkBlue = UIColor(red: 70/255, green: 84/255, blue: 201/255, alpha: 1)

    // Set gradients
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = bounds
    gradientLayer.colors = [lightBlue.cgColor, darkBlue.cgColor]
    gradientLayer.locations = [0.0,1.0]
    gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

    // THAT IS THE LINE THAT COULD FIX THE ISSUE
    gradientLayer.frame = CGRect(x: 0, y: 0, width: 74, height: 74)

    // Set rounded shape
    gradientLayer.cornerRadius = 37

    // insert gradients to button
    layer.insertSublayer(gradientLayer, at: 0)
}

【讨论】：