ios - 在 UITableViewCell 中的不同大小的 UIView 上放置一个 mask 层

Question

我有一个 UITableView，它的单元格包含一个 subview ，我需要在该 subview 上执行三件事:

1. 根据特定于此单元格的对象中的值在运行时更改其宽度限制
2. 根据相同的值更改其背景颜色
3. 围绕 View 的左上角和左下角，但保持右侧的角不变(因此 layer.cornerRadius 不是一个选项)

我在我的自定义 UITableViewCell 子类中使用以下代码来仅在 View 的一侧实现圆角效果，我从 tableView:cellForRowAt: 调用它:

func roundLeadingEdgesOfBar() {
    let roundedLayer = CAShapeLayer()
    roundedLayer.bounds = viewInQuestion.frame
    roundedLayer.position = viewInQuestion.center
    roundedLayer.path = UIBezierPath(roundedRect: viewInQuestion.bounds,
                                     byRoundingCorners: [.topLeft, .bottomLeft],
                                     cornerRadii: CGSize(width: 2, height: 2)).cgPath
    viewInQuestion.layer.mask = roundedLayer
    print("frame: \(viewInQuestion.frame)")
}

然而，当我运行这段代码时，我看到的是这样的效果:

上面代码中的 print 语句产生以下输出，表明 viewInQuestion 每次都有相同的帧，但在屏幕上很明显它没有:

frame: (175.0, 139.5, 200.0, 5.0)
frame: (175.0, 139.5, 200.0, 5.0)
frame: (175.0, 139.5, 200.0, 5.0)
frame: (175.0, 139.5, 200.0, 5.0)

所以我假设在调用此函数时 View 的宽度约束尚未呈现。当我向上滚动整个表格 View 直到所有单元格都在 View 之外，然后将它们滚动回 View 时，一切看起来都是正确的并且打印的框架都不同，就像我期望的那样:

frame: (136.5, 79.5, 238.5, 5.0)
frame: (169.5, 79.5, 205.5, 5.0)
frame: (226.0, 79.5, 149.0, 5.0)
frame: (247.5, 79.5, 127.5, 5.0)

我已经多次阅读 SO 以执行依赖于从 layoutSubviews 中应用的约束的代码，但这给了我相同的结果。我什至尝试从 tableView:willDisplay:forRowAt: 中调用 roundLeadingEdgesOfBar，但无济于事。

我还找到了this response to a similar problem这建议将 mask 层代码放在 drawRect: 中。这实际上为我解决了 99% 的问题(暂且不考虑性能问题)，但是对于非常长的表格 View ，仍然存在极端情况(没有双关语意)，我仍然看到错误的行为。

我最后的办法是通过 performSelector 以 0.00001 延迟调用我的舍入函数，这在某种意义上是有效的，你会在屏幕上看到大约一秒钟的错误然后消失 - 仍然很远理想的行为，更不用说我必须为此编写的糟糕代码了。

有没有什么方法可以使用正确的运行时框架在 UITableViewCell 内的 View 上可靠地应用形状层？

Answer 1

我建议创建一个 UIView 子类并让它处理舍入，而不是调用一个函数来“舍入边缘”。

例如:

class BulletBar: UIView {

    override func layoutSubviews() {

        let roundedLayer = CAShapeLayer()

        roundedLayer.frame = bounds

        roundedLayer.path = UIBezierPath(roundedRect: bounds,
                                         byRoundingCorners: [.topLeft, .bottomLeft],
                                         cornerRadii: CGSize(width: 2, height: 2)).cgPath
        layer.mask = roundedLayer

    }

}

现在，将单元格中的“栏” subview 的类设置为 BulletBar。使用约束将其固定在右侧和底部并限制高度和宽度。为宽度约束创建一个 IBOutlet，然后根据需要设置 barWidthConstraint.constant。

类本身将处理圆角。

结果: