为什么设置UIButton的字体弄乱了我的图层

Question

我正在尝试在Swift中为iOS创建登录注册UI，而不使用情节提要。

在我的控制器中使用以下代码：

    loginButton.translatesAutoresizingMaskIntoConstraints = false
    loginButton.layer.borderWidth = 1
    loginButton.clipsToBounds = true
    loginButton.layer.borderColor = UIColor.Palette.boldYellow.cgColor
    loginButton.setTitle("Login", for: .normal)
    loginButton.setTitleColor(UIColor.Palette.boldYellow, for: .normal)
    loginButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 24)
    loginButton.heightAnchor.constraint(equalToConstant: 58).isActive = true
    NSLayoutConstraint(item: loginButton, attribute: .leading, relatedBy: .equal, toItem: footerView, attribute: .leading, multiplier: 1, constant: 30).isActive = true
    NSLayoutConstraint(item: loginButton, attribute: .trailing, relatedBy: .equal, toItem: footerView, attribute: .trailing, multiplier: 1, constant: -30).isActive = true
    NSLayoutConstraint(item: loginButton, attribute: .top, relatedBy: .equal, toItem: footerView, attribute: .top, multiplier: 1, constant: 21).isActive = true

    registerButton.translatesAutoresizingMaskIntoConstraints = false
    registerButton.clipsToBounds = true
    registerButton.setTitle("Register", for: .normal)
    registerButton.setTitleColor(.white, for: .normal)
    registerButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 24)
    registerButton.heightAnchor.constraint(equalToConstant: 58).isActive = true
    NSLayoutConstraint(item: registerButton, attribute: .leading, relatedBy: .equal, toItem: footerView, attribute: .leading, multiplier: 1, constant: 30).isActive = true
    NSLayoutConstraint(item: registerButton, attribute: .trailing, relatedBy: .equal, toItem: footerView, attribute: .trailing, multiplier: 1, constant: -30).isActive = true
    NSLayoutConstraint(item: registerButton, attribute: .bottom, relatedBy: .equal, toItem: footerView, attribute: .bottom, multiplier: 1, constant: -21).isActive = true

我可以做到这一点：

但是我想使“注册”文本加粗，因此我添加了这一行：

registerButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 24)

就在

registerButton.heightAnchor.constraint(equalToConstant: 58).isActive = true

但是然后，整个界面都坏了，我明白了：

好像没有应用我对两个按钮的图层所做的更改。

我在控制器的viewDidLayoutSubviews覆盖中进行这些层更改：

  override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    let gradientBackgroundButton = CAGradientLayer()
    gradientBackgroundButton.frame = registerButton.bounds
    gradientBackgroundButton.startPoint = CGPoint.zero
    gradientBackgroundButton.endPoint = CGPoint(x: 1, y: 1)
    gradientBackgroundButton.colors = [UIColor.Palette.lightYellow.cgColor, UIColor.Palette.boldYellow.cgColor]

    registerButton.layer.insertSublayer(gradientBackgroundButton, at: 0)

    registerButton.layer.cornerRadius = registerButton.bounds.height / 2
    loginButton.layer.cornerRadius = loginButton.bounds.height / 2
}

我的猜测是，当我不指定字体大小时，我的视图需要调用viewDidLayoutSubviews，但是当我指定一个字体时不需要。在这种情况下，我应该在哪里修改按钮的图层？

Answer 1

我认为您的猜测是一个很好的猜测。 viewDidLayoutSubviews可以被调用很多次，当前每次调用它都将创建并添加一个新的渐变层。将断点添加到viewDidLayoutSubviews，并查看其运行频率以及按钮大小值。

您需要在插入渐变和调整其大小之前检查渐变图层是否存在，或者理想情况下将所有逻辑移至UIButton子类中，这些子类可以保留其自身对图层的引用，并在按钮本身为按钮时对其进行处理调整大小。