ios - 为什么设置 UIButton 的字体会扰乱我的图层

Question

我正在尝试在 Swift for iOS 中创建登录注册 UI，而不使用 Storyboard。

在我的 Controller 中使用此代码:

    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

但是，整个界面都被破坏了，我得到了这个:

看起来我对两个按钮的图层所做的更改均未应用。

我在 Controller 的 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
}

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

Answer 1

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

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