自定义UIView内部的圆形UITableViewCell底部角

Question

我试图绕过一个自定义视图的底部角在一个tableview单元格内。我用的代码不管用，我不明白为什么.

因此，我有一个UItableViewCell，在contentView中有一个自定义视图containerView。在里面，在上面，我有两个标签，在底部有另一个视图。这个视图必须有圆角的底部。

我的代码：

class HomeTableViewCell: UITableViewCell {

var containerView: UIView!
var bottomDetailsView: UIView!
var titleLabel: UILabel!
var timeLabel: UILabel!

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: "tableCell")

    containerView = UIView()
    bottomDetailsView = UIView()
    timeLabel = UILabel()
    titleLabel = UILabel()


    self.contentView.addSubview(containerView)
    containerView.addSubview(bottomDetailsView)
    containerView.addSubview(titleLabel)
    containerView.addSubview(timeLabel)

    containerView.snp.makeConstraints({ (maker) in
        maker.top.equalTo(self.contentView.snp.top)
        maker.bottom.equalTo(self.contentView.snp.bottom)
        maker.left.equalTo(self.contentView.snp.left).inset(10)
        maker.right.equalTo(self.contentView.snp.right).inset(10)
    })

    bottomDetailsView.snp.makeConstraints { (maker) in
        maker.top.equalTo(containerView.snp.centerY).offset(30)
        maker.left.equalTo(containerView.snp.left)
        maker.right.equalTo(containerView.snp.right)
        maker.bottom.equalTo(containerView.snp.bottom)
    }

    timeLabel.snp.makeConstraints { (maker) in
        maker.centerX.equalTo(containerView.snp.centerX)
        maker.centerY.equalTo(containerView.snp.centerY).offset(10)
    }

    titleLabel.snp.makeConstraints { (maker) in
        maker.left.equalTo(containerView.snp.left).inset(10)
        maker.top.equalTo(containerView.snp.top).inset(10)
        maker.right.equalTo(containerView.snp.right).inset(10)
    }
}

override func layoutSubviews() {
    super.layoutSubviews()

    bottomDetailsView.backgroundColor = #colorLiteral(red: 0.9607843161, green: 0.7058823705, blue: 0.200000003, alpha: 1)
    containerView.backgroundColor = #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)
    containerView.layer.cornerRadius = 15.0
    timeLabel.font = timeLabel.font.withSize(24)
    timeLabel.textColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
    titleLabel.textColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)

    let path = UIBezierPath(roundedRect: bottomDetailsView.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 15, height: 15))
    let shapeLayer = CAShapeLayer()
    shapeLayer.frame = bottomDetailsView.frame
    shapeLayer.path = path.cgPath
    bottomDetailsView.layer.backgroundColor = UIColor.red.cgColor
    bottomDetailsView.layer.mask = shapeLayer
}


required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}
}

我用SnapKit做自动布局。有问题的代码是

let path = UIBezierPath(roundedRect: bottomDetailsView.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 15, height: 15))
let shapeLayer = CAShapeLayer()
shapeLayer.frame = bottomDetailsView.frame
shapeLayer.path = path.cgPath
bottomDetailsView.layer.backgroundColor = UIColor.red.cgColor
bottomDetailsView.layer.mask = shapeLayer

我用这段代码尝试了不同的组合，但是什么都不能用。它不显示绝对什么都没有。如果不是bottomDetailsView.layer.mask = shapeLayer，而是写bottomDetailsView.layer.addSublayer(shapeLayer)，视图显示，但没有圆角。

我不记得我做了什么，但在某种程度上，我实现了在视图顶部看到一个黑色的圆形图层，但前提是该单元格在屏幕外，然后再次加载dequeueReuseableCell。我在互联网上找到的每一个解决方案都指向相同的代码，也许必须在其他地方完成？

编辑1:

在得到答案之后，我更新了代码，现在看起来如下：

class HomeTableViewCell: UITableViewCell {

var containerView: UIView!
var bottomDetailsView: BottomDetailsView!
var titleLabel: UILabel!
var timeLabel: UILabel!

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: "tableCell")

    containerView = UIView()
    bottomDetailsView = BottomDetailsView(frame: .zero)
    timeLabel = UILabel()
    titleLabel = UILabel()

    self.contentView.addSubview(containerView)

    containerView.addSubview(titleLabel)
    containerView.addSubview(timeLabel)
    containerView.addSubview(bottomDetailsView)

    containerView.snp.makeConstraints({ (maker) in
        maker.top.bottom.left.right.equalToSuperview()
    })

    titleLabel.snp.makeConstraints { (maker) in
        maker.height.equalTo(15)
        maker.top.left.right.equalTo(containerView)
        maker.bottom.equalTo(timeLabel.snp.top)
    }

    timeLabel.snp.makeConstraints { (maker) in
        maker.height.equalTo(34)
        maker.top.equalTo(titleLabel.snp.bottom)
        maker.centerX.equalTo(containerView.snp.centerX)
        maker.bottom.equalTo(bottomDetailsView.snp.top)
    }
    bottomDetailsView.snp.makeConstraints { (maker) in
        maker.top.equalTo(timeLabel.snp.bottom)
        maker.left.equalTo(containerView.snp.left)
        maker.right.equalTo(containerView.snp.right)
        maker.bottom.equalTo(containerView.snp.bottom)
    }
}

override func layoutSubviews() {
    super.layoutSubviews()

    bottomDetailsView.backgroundColor = #colorLiteral(red: 0.9607843161, green: 0.7058823705, blue: 0.200000003, alpha: 1)

    containerView.backgroundColor = #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)
    containerView.layer.cornerRadius = 15.0

    timeLabel.font = timeLabel.font.withSize(24)
    timeLabel.textColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
    titleLabel.textColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
    titleLabel.numberOfLines = 0
}


required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}
}

此外，正如邓肯C所建议的那样，我创建了一个UIView子类：

class BottomDetailsView: UIView {
var shapeLayer: CAShapeLayer!

//If the view's bounds change, update the shapeLayer's frame and also rebuild the path
override var bounds: CGRect {
    didSet {
        shapeLayer.frame = self.bounds
        createShapeLayerPath()
    }
}

func createShapeLayerPath() {
    let path = UIBezierPath(roundedRect: bounds,
                            byRoundingCorners: [.bottomLeft, .bottomRight],
                            cornerRadii: CGSize(width: 15.0, height: 15.0))
    shapeLayer.path = path.cgPath
}

override init(frame: CGRect) {
    super.init(frame: frame)

    shapeLayer = CAShapeLayer()
    shapeLayer.frame = bounds
    layer.mask = shapeLayer
}

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

现在一切都正常，除了我放大，如果我仔细看，我可以看到角落下面的一点视图。它们不是完全一致的。底线没问题，只是拐角处。

Answer 1

添加CAShapeLayer作为视图掩码层的代码非常接近。这一行：

shapeLayer.frame = bottomDetailsView.frame

应改为

shapeLayer.frame = bottomDetailsView.bounds

视图/图层的帧表示在其superview的坐标系中。视图的边界定义了它的坐标系。

我没有尝试复杂的表视图情况，但我确实创建了一个UIView的子类，该子类创建了一个底部圆角掩码：

class RoundedBottomCornersView: UIView {
    var shapeLayer: CAShapeLayer!

    //If the view's bounds change, update the shapeLayer's frame and also rebuild the path
    override var bounds: CGRect {
        didSet {
            shapeLayer.frame = self.bounds
            createShapeLayerPath()
        }
    }

    func createShapeLayerPath() {
        let path = UIBezierPath(roundedRect: bounds,
                                byRoundingCorners: [.bottomLeft, .bottomRight],
                                cornerRadii: CGSize(width: 15, height: 15))
        shapeLayer.path = path.cgPath
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        layer.borderWidth = 1.0

        shapeLayer = CAShapeLayer()
        shapeLayer.frame = bounds
        layer.backgroundColor = UIColor.red.cgColor
        layer.mask = shapeLayer
    }
}

Answer 2

当您给containerView时，您的约束不足以布局单元格的子视图。

顶部，左.right，底部

和标签timeLabel

centerX，Y

titleLabel

左，右，上

如果您查看这些约束，没有从上到下的约束的垂直创建，单元格期望从它的子视图from到containeView的高度，但是您做了相反的操作，所以您需要将标签titleLabel顶部与容器挂钩(您做了)，它的底部到标签的timeLabel顶部，而后者的底部到容器的底部，容器的底部已经连接到contentView，这就是自动布局可以计算单元格的正确高度的方式，通过这个任意舍入都会显示

BTW :，我不知道您想要的设计，但是您必须遵循自上而下的约束挂钩，不仅要显示四舍五入，更重要的是要显示您想要将舍入应用到的视图。