如何使UITableView看起来像一个带圆角的分组表?

时间:2017-12-28 22:15:03

标签: ios swift uitableview rounded-corners cornerradius

在我的应用中,我的目标是iOS 9及以上,我希望分组UITableView看起来像以前的iOS版本中的分组表:

enter image description here

也就是说,在单元格中有一些左右填充和圆角。

对于填充,这是有效的:

在我的自定义UITableViewCell子类中:

override func layoutSubviews() {
    super.layoutSubviews()
    contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(0, 12, 0, 12))
}

然后在处理表视图的UIViewController子类中:

cell.backgroundColor = UIColor.clear
cell.contentView.backgroundColor = UIColor.orange

有效。但现在对于圆角,我正试图这样做:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

    // Top corners
    let maskPathTop = UIBezierPath(roundedRect: cell.contentView.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 10.0, height: 10.0))
    let shapeLayerTop = CAShapeLayer()
    shapeLayerTop.frame = cell.contentView.bounds
    shapeLayerTop.path = maskPathTop.cgPath

    //Bottom corners
    let maskPathBottom = UIBezierPath(roundedRect: cell.contentView.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 5.0, height: 5.0))
    let shapeLayerBottom = CAShapeLayer()
    shapeLayerBottom.frame = cell.contentView.bounds
    shapeLayerBottom.path = maskPathBottom.cgPath

    // All corners
    let maskPathAll = UIBezierPath(roundedRect: cell.contentView.bounds, byRoundingCorners: [.topLeft, .topRight, .bottomRight, .bottomLeft], cornerRadii: CGSize(width: 5.0, height: 5.0))
    let shapeLayerAll = CAShapeLayer()
    shapeLayerAll.frame = cell.contentView.bounds
    shapeLayerAll.path = maskPathAll.cgPath

    if indexPath.row == 0 && indexPath.row == tableView.numberOfRows(inSection: indexPath.section) - 1 {
        cell.contentView.layer.mask = shapeLayerAll
    } else if indexPath.row == 0 {
        cell.contentView.layer.mask = shapeLayerTop
    } else if indexPath.row == tableView.numberOfRows(inSection: indexPath.section) - 1 {
        cell.contentView.layer.mask = shapeLayerBottom
    }
}

但是,出于某种原因,当我运行应用程序时,只有左角(顶部和底部)显示为圆形。

但是,如果我用相同的方法尝试这个:

cell.contentView.layer.cornerRadius = 10.0

所有角都显示为圆形。但这对我来说不是一个解决方案,因为我需要根据每个部分的单元格显示不同的圆角。

有人可以帮助我实现这个目标吗?

0 个答案:

没有答案