如何正确圆角具有动态高度的表视图单元格的边缘

Question

我的一个表视图有问题。我正在为我的应用程序编写一个消息页面，该页面使用表视图来显示发送和接收的消息。表格单元格需要根据每个单元格内容更改高度。我的大小调整工作正常，但现在我需要圆化单元格边缘以适应 UI 设计。我过去使用非动态高度执行此操作的方法是调用一个函数来圆角 在 tableViewCell 中的覆盖函数"layoutSubViews（）"中

：

    func roundAllCorners(radius: CGFloat) {
        let allCorners: UIRectCorner = [.topLeft, .bottomLeft, .bottomRight, .topRight]
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: allCorners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }

如果我尝试调用此函数但单元格是动态大小的，那么左边缘会切断半厘米。如果您将单元格滚动出屏幕并再次返回，尽管它会修复它。希望你能找到解决我的问题的方法，脖子已经疼了一段时间了。谢谢。

Answer 1

您可能还需要覆盖框架的 setter 并在那里调用它。无论如何，由于多种原因，这不是一个好主意。问题是表视图单元格有许多视图（包括它本身是一个视图），例如内容视图和背景视图......

我建议您在包含所有单元格视图的内容视图上添加另一个视图。然后将此视图设置为子类并处理其中的所有舍入。因此，从故事板的角度来看，你会得到这样的内容：

- UITableViewCell
    - contentView
        - roundedContainer
            - imageView
            - button
            - label
            ...

圆角视图具有（或应该具有）约束，因此layoutSubViews应该足以覆盖以设置拐角半径。

你可以有一个整洁的类，可以用来圆化你的视图，比如：

class RoundedView: UIView {
    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            refresh()
        }
    }
    @IBInspectable var fullyRounded: Bool = false {
        didSet {
            refresh()
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        refresh()
    }
    private func refresh() {
        layer.cornerRadius = fullyRounded ? min(bounds.width, bounds.height) : cornerRadius
    }
}

正如@iDeveloper已经提到的，最好使用图层cornerRadius。但是，如果您需要使用形状图层，您也可以在此类中执行此操作。

确保在此视图上剪裁边界。

Answer 2

确保在调用函数后重新加载表视图

yourTableView.reloadData() 

Answer 3

您可以根据内容使用自调整大小的表格视图单元格。现在，您可以按照前面的圆角单元格实现。

将以下代码放在 viewDidLoad 中。

表视图.估计行高度 = 您的估计表视图高度表视图.行高度 = UITableViewAutomaticDimension

注意：您必须正确为内容提供顶部和底部约束。

对于详细实现，您可以遵循自调整大小表视图单元格