按钮未完全绘制

Question

我有一个带有文本和图像的按钮。它在 viewDidAppear 中设置，然后在 IBAction 中更改属性标题。由于某种原因，按钮背景颜色在初始绘制时并未完全覆盖按钮。它留下一条水平的白色。我发现通过在 IBAction 中运行我的 formatButton 函数，随后按下的按钮会显示一个正确绘制的按钮。但我无法让按钮的第一个加载视图看起来正确。有什么想法吗？

我发现通过在 IBAction 中进行格式化，它可以为将来的按钮绘制修复它，但 sendAction(.touchUpInside) 甚至无法伪造它来修复绘制问题。 （它确实改变了按钮文本，就像 IBAction 所做的那样。）

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    formatButton(btn: searchTitlesButton)
    formatButton(btn: searchPeopleButton)
    formatButton(btn: searchCategoryButton)
    searchTitlesButton.setTitle("Title", for: .normal)
    searchPeopleButton.setTitle("Actor", for: .normal)
    //searchCategoryButton.setTitle(categoryList[searchCategoryIndex], for: .normal)

    let fullString = NSMutableAttributedString()
    let imageAttachment = NSTextAttachment()
    imageAttachment.image = UIImage(named:"DownArrow")
    let imageString = NSAttributedString(attachment: imageAttachment)
    fullString.append(NSAttributedString(string: categoryList[searchCategoryIndex]+"   "))
    fullString.append(imageString)
    searchCategoryButton.setAttributedTitle(fullString, for: .normal)

    formatButton(btn: searchCategoryButton)

    postTableView.rowHeight = CGFloat(120)
}

@IBAction func searchCategoryButton(_ sender: Any) {
    if searchCategoryIndex < categoryList.count - 1 {
        searchCategoryIndex += 1
    } else {
        searchCategoryIndex = 0
    }
    // Going to try and make a formatted label with a string and image of a down arrow.
    let fullString = NSMutableAttributedString()
    let imageAttachment = NSTextAttachment()
    imageAttachment.image = UIImage(named:"DownArrow")
    let imageString = NSAttributedString(attachment: imageAttachment)
    fullString.append(NSAttributedString(string: categoryList[searchCategoryIndex]+"   "))
    fullString.append(imageString)
    searchCategoryButton.setAttributedTitle(fullString, for: .normal)
    formatButton(btn: searchCategoryButton)
}

func formatButton(btn:UIButton) {

    btn.layer.cornerRadius = 5
    btn.layer.borderWidth = 1
    btn.layer.borderColor = UIColor.black.cgColor
    btn.setTitleColor(UIColor.white, for: .normal)
    btn.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: UIFont.Weight.bold)

    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = btn.bounds
    let bottomColor = UIColor(red: CGFloat(25/255.0), green: CGFloat(113/255.0), blue: CGFloat(255/255.0), alpha: CGFloat(1.0))
    gradientLayer.colors = [UIColor.white.cgColor, bottomColor.cgColor]
    btn.layer.insertSublayer(gradientLayer, at: 0)
    btn.clipsToBounds = true
}

Answer 1

背景渐变没有完全覆盖按钮的原因，可能是因为设置属性标题时按钮的大小发生了变化。解决此问题的最佳方法是创建UIButton 的子类，以便在按钮边界发生变化时更新自定义渐变层的框架。例如：

class GradientButton: UIButton {

    private let gradientLayer = CAGradientLayer()

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    private func setup() {
        layer.cornerRadius = 5
        layer.borderWidth = 1
        layer.borderColor = UIColor.black.cgColor
        setTitleColor(UIColor.white, for: .normal)
        titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: UIFont.Weight.bold)
        let bottomColor = UIColor(red: CGFloat(25/255.0), green: CGFloat(113/255.0), blue: CGFloat(255/255.0), alpha: CGFloat(1.0))
        gradientLayer.colors = [UIColor.white.cgColor, bottomColor.cgColor]
        layer.insertSublayer(gradientLayer, at: 0)
        clipsToBounds = true
    }

    override var bounds: CGRect {
        didSet {
            gradientLayer.frame = layer.bounds
        }
    }
}

然后在 nib 的 storyboard 中你可以将按钮的类更改为 GradientButton。它现在应该会自动应用渐变样式，并在按钮边界发生变化时更新框架。

我希望你觉得这很有用。如果您仍有问题，请告诉我。