Swift：为按钮添加渐变图层。图层长度错误。

Question

let gradient: CAGradientLayer = CAGradientLayer()
let colorTop = UIColor(red: 112.0/255.0, green: 219.0/255.0, blue: 155.0/255.0, alpha: 1.0).CGColor
let colorBottom = UIColor(red: 86.0/255.0, green: 197.0/255.0, blue: 238.0/255.0, alpha: 1.0).CGColor

gradient.colors = [colorTop, colorBottom]
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
gradient.frame = loginButton.bounds
gradient.cornerRadius = 5
loginButton.layer.addSublayer(gradient)

生成的渐变超出了按钮的框架。为什么会发生这种情况？

- user2946632

---

也许尝试将渐变层的“bounds”属性设置为与loginButton的层相等？ - Joshua Sullivan

Answer 1

可能你在viewDidLoad()或viewWillAppear()中设置了渐变层。此时控制器还没有计算出视图的大小。在你添加这个子层时，按钮的大小尚未被计算出来，因此子层的大小是错误的。所以你应该解决以下问题：

1. 首先，你应该在viewDidAppear()中添加渐变层，在这个时刻所有视图的大小都已经被计算出来了。
2. 其次，你应该使用layer.insertSublayer(layer, atIndex:index)而不是addSublayer(layer)。因为在你的情况下，子层将隐藏按钮的本地层（标题、背景...）。
3. 你应该在viewDidLayoutSubviews()中重新计算你的子层大小。因为当你的按钮改变大小时（例如旋转），子层不会改变它的框架，你需要自己改变它。

- Eugene Svaro

---

谢谢！将我的代码放在viewWillAppear中解决了问题。 - user2946632

你介意回答一个快速的后续问题吗？在viewdidload中放置代码后，转场到这个视图控制器看起来很糟糕，因为动画vc没有渐变附加。我该如何解决这个问题？ - user2946632

抱歉，回复晚了，太忙了。你可以做以下事情：

1. 子类化uibutton，设置CAGradientLayer属性，在init方法中添加该图层，并重写layoutSubviews()方法，在这里你应该重新计算CAGradientLayer的frame，如：gradientLayer.frame = button.bounds;
2. 你可以在控制器中创建这个图层属性，在viewDidLoad中将其添加到按钮上，并在viewDidLayoutSubviews中重新计算图层的frame。我会使用第一种方法。

- Eugene Svaro

Answer 2

将 clipsToBounds 和 cornerRadius 添加到 loginbutton 上。这样应该就能解决问题了。

loginButton.clipsToBounds = true
loginButton.layer.cornerRadius = 5;

- Nabin Singh

---

非常好的答案。我使用了自定义按钮，因此可以从启动屏幕调整边框颜色、半径等，并在创建渐变背景时，颜色溢出了边框。将 clipsToBounds = true 添加到我的自定义按钮中解决了这个问题。谢谢。 - Saik

Answer 3

你的登录按钮的框架是否正确？当我重新制作时，它看起来是正确的。

        let loginButton = UIButton(frame: CGRect(x: 10, y: 50, width: 300, height: 30))
        self.view.addSubview(loginButton)

        let gradient:CAGradientLayer = CAGradientLayer()
        let colorTop = UIColor(red: 112.0/255.0, green: 219.0/255.0, blue: 155.0/255.0, alpha: 1.0).CGColor
        let colorBottom = UIColor(red: 86.0/255.0, green: 197.0/255.0, blue: 238.0/255.0, alpha: 1.0).CGColor

        gradient.colors = [colorTop, colorBottom]
        gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradient.frame = loginButton.bounds
        gradient.cornerRadius = 5

        loginButton.layer.addSublayer(gradient)

下面是它的外观：

这段内容涉及IT技术。

- pf0214