ios - Swift:按钮圆角打破约束

Question

我有一个带有通过 xib 加载的自定义单元格的表格 View ，在该单元格中我有状态按钮，右下角应该是圆角的。该按钮具有约束到 superview=0 和 height=30 的 Trailing/Leading/Bottom space。

没有四舍五入它工作得很好，一旦我绕过一个角，例如右下角，约束就会中断

self.btnStatus.roundCorners(corners: [.bottomRight], radius: 7.0, borderWidth: nil, borderColor: nil)

有些人在这里建议调用 layoutSubviews() 但它对我没有帮助。

更具体地说，我创建了一个简单的项目，您可以在其中查看整个项目。

正确链接

ButtonRoundCorner.zip

Answer 1

您可以通过子类化您的按钮并通过覆盖其 layoutSubviews() 函数放置您的“舍入”代码来获得更可靠的结果。

首先，如果你想添加边框，你不想添加多个“边框子层”......所以将你的 UIView 扩展更改为:

extension UIView {
    func roundCorners(corners: UIRectCorner, radius: CGFloat, borderWidth: CGFloat?, borderColor: UIColor?) {
        let maskPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer = CAShapeLayer()
        maskLayer.frame = self.bounds
        maskLayer.path = maskPath.cgPath

        self.layer.mask = maskLayer
        self.layer.masksToBounds = true

        if (borderWidth != nil && borderColor != nil) {

            // remove previously added border layer
            for layer in layer.sublayers! {
                if layer.name == "borderLayer" {
                    layer.removeFromSuperlayer()
                }
            }

            let borderLayer = CAShapeLayer()

            borderLayer.frame = self.bounds;
            borderLayer.path  = maskPath.cgPath;
            borderLayer.lineWidth = borderWidth ?? 0;
            borderLayer.strokeColor = borderColor?.cgColor;
            borderLayer.fillColor   = UIColor.clear.cgColor;
            borderLayer.name = "borderLayer"

            self.layer.addSublayer(borderLayer);

        }

    }
}

接下来，添加一个UIButton子类:

class RoundedButton: UIButton {

    var corners: UIRectCorner?
    var radius = CGFloat(0.0)
    var borderWidth = CGFloat(0.0)
    var borderColor: UIColor?

    override func layoutSubviews() {

        super.layoutSubviews()

        // don't apply mask if corners is not set, or if radius is Zero
        guard let _corners = corners, radius > 0.0 else {
            return
        }

        roundCorners(corners: _corners, radius: radius, borderWidth: borderWidth, borderColor: borderColor)

    }

}

这会给您带来几个好处:1) 当按钮框架发生变化(例如旋转设备)时，它将更新其 mask 层框架，以及 2) 您可以从自定义单元格类 中设置这些值或来自cellForRowAt。

无论哪种方式，将你的 btnStatus 类从 UIButton 更改为 RoundedButton - 在你的 Storyboard和 @IBOutlet 连接。

然后将您的 CustomTableViewCell 更改为:

class CustomTableViewCell: UITableViewCell {

    @IBOutlet weak var btnStatus: RoundedButton!

    override func awakeFromNib() {
        super.awakeFromNib()

        // set up corner maskign
        btnStatus.corners = .bottomRight
        btnStatus.radius = 7.0

        // set if desired
//      btnStatus.borderWidth = 2.0
//      btnStatus.borderColor = .blue

    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        // Configure the view for the selected state
    }

}

最后，您的 cellForRowAt 函数变为:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = self.tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! CustomTableViewCell
    return cell
}

应该这样做...