ios - 自定义 UITableViewCell 内的圆形 UIView 底角

Question

我试图将表格 View 单元格内的自定义 View 的底角圆化。我正在使用的代码无法正常工作，我不明白为什么...

因此，我有一个 UItableViewCell，在 contentView 中有一个自定义 View containerView。在里面，在顶部，我有两个标签，在底部有另一个 View 。该 View 必须具有圆底角。

我的代码:

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) View 显示但没有圆角。

我不记得我做了什么，但在某个时候我实现了我在 View 顶部看到一个黑色圆形层，但前提是单元格在屏幕之外然后再次加载 dequeueReuseableCell 。我在 Internet 上找到的每个解决方案都指向我拥有的相同代码，也许它必须在其他地方完成？

编辑 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")
}
}

我还按照 Duncan 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)
}
}

现在一切正常，除了如果我放大，如果我仔细看，我可以在角落看到一点底部 View 。它们没有完全对齐。底线没问题，只是角落。

Answer 1

添加 CAShapeLayer 作为 View mask 层的代码非常接近。这一行:

shapeLayer.frame = bottomDetailsView.frame

应该阅读

shapeLayer.frame = bottomDetailsView.bounds

View /图层的框架在其父 View 的坐标系中表示。 View 的边界定义了它的坐标系。

我没有尝试您的复杂 TableView 案例，但我确实创建了 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
    }
}