tableview的section圆角设置

406 阅读2分钟

类似于这种效果 截屏 2024-09-13 19.42.52.jpeg

搜索了很久,大概有以下几种方案 方案一:tabview的style设置为insetGrouped,这个在iOS13上才支持,然后自定义圆角大小。

final class InsetsGroupedLayer: CALayer {
override var cornerRadius: CGFloat {

     get { 32 }

  set { }

  }
}

class WLDefaultCell:WLBaseCell{
    override class var layerClass: AnyClass {
        InsetsGroupedLayer.self
    }
}

方案二:通过自己绘制一个带圆角的贝塞尔曲线,生成一个layer,导出背景图片。

 

extension UITableView{
    //设置section分区圆角
    func addTableViewSectionCorner(_ tableView: UITableView,_ cell: UITableViewCell, row indexPath: IndexPath){
            // 圆角弧度半径
            let cornerRadius: CGFloat = 8.0
            // 设置cell的背景色为透明,如果不设置这个的话,则原来的背景色不会被覆盖
            cell.backgroundColor = UIColor.clear
            // 创建一个shapeLayer
            let layer = CAShapeLayer()
            // 创建一个可变的图像Path句柄,该路径用于保存绘图信息
            let pathRef = CGMutablePath()
            // 获取cell的size
            // 第一个参数,是整个 cell 的 bounds, 第二个参数是距左右两端的距离,第三个参数是距上下两端的距离
            let bounds = cell.bounds.insetBy(dx: 16, dy: 0)
            
            // 这里要判断分组列表中的第一行,每组section的第一行,每组section的中间行
            if indexPath.row == 0 && indexPath.row == tableView.numberOfRows(inSection: indexPath.section) - 1 {
                pathRef.addRoundedRect(in: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius)
            }else if indexPath.row == 0{
                pathRef.move(to: CGPoint(x: bounds.minX, y: bounds.maxY), transform: .identity)
                pathRef.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.minY), tangent2End: CGPoint(x: bounds.midX, y: bounds.minY), radius: cornerRadius, transform: .identity)
                pathRef.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.minY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius, transform: .identity)
                pathRef.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY), transform: .identity)
            }else if indexPath.row == (tableView.numberOfRows(inSection: indexPath.section)-1) {
                pathRef.move(to: CGPoint(x: bounds.minX, y: bounds.minY), transform: .identity)
                pathRef.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.midX, y: bounds.maxY), radius: cornerRadius, transform: .identity)
                pathRef.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius, transform: .identity)
                pathRef.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY), transform: .identity)
            }else{
                pathRef.addRect(bounds)
            }
            // 把已经绘制好的可变图像路径赋值给图层,然后图层根据这图像path进行图像渲染render
            layer.path = pathRef;
 
            //颜色修改
            layer.fillColor = UIColor.white.cgColor
            let testView = UIView(frame: cell.bounds)
            testView.layer.insertSublayer(layer, at: 0)
            testView.backgroundColor = UIColor.clear
            cell.backgroundView = testView
       }
}

我才用了这个方案,原因是比较简单。

方案三:整个section用一个tableview,然后对tablew进行画圆角。