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

Liam 发表于 Dev

利亚姆

我的一个表格视图有问题。我正在为我的应用程序编写一个消息传递页面，该页面使用表格视图显示发送和接收的消息。表格单元格需要根据每个单元格的内容更改高度。我的大小调整工作正常，但是现在需要调整单元格边缘以适合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
    }

如果我尝试调用此函数，但是单元格是动态调整大小的，则左边缘会切掉半厘米。如果您将单元格从屏幕上滚动出来，然后将其修复，则再次返回。希望您能找到解决我的问题的方法，颈部一直疼了一段时间。谢谢。

Matic Oblak

可能还需要覆盖框架的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一个层。但是，如果您需要使用形状图层，则在此类中也可以这样做。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。