Swift 设置tableView每个分区cell圆角

发表于 | 分类于 | 阅读次数：
本文字数： 3.8k | 阅读时长 ≈ 3 分钟

前言

之前项目tableview cell 圆角,尝试过图片当做背景切换, 也尝试过UIRectCorner ,判断首行和最后一个行,但是老实说,效果一直不是很理想, 经过不停的搜索,在stackoverflow 找到了我想要的答案

原理篇

其实tableview section圆角,并不是很难,实现方式也很多种, 但是总结都是 通过 tableview willDisplay forRowAt 方法,然后判断当前是否为section的第一行, 和section的最后一行, 通过这种方式给tableView 设置一个backgroundView 来实现.

注意了, 这里也是我遇到的坑,可能自己愚钝, backgroundView 是不需要设置大小的, 且backgroundView 的大小就等于你的tableView 大小, 之前一直卡在这里, 我在想，我想调整这没有圆角的左右两侧间距,这可怎么办啊。 愚笨啊,可能自己卡壳了, 其实重写tableView frame 的方法就行了。自己也浪费不少时间在这一点上。现在想想真的有点傻.

TableView Delegate 设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    
    if (cell.responds(to: #selector(getter: UIView.tintColor))){
        if tableView == self.tableView {
            let cornerRadius: CGFloat = 10
            cell.backgroundColor = .clear
            let layer: CAShapeLayer = CAShapeLayer()
            let path: CGMutablePath = CGMutablePath()
            
            cell.updateConstraints()
            let bounds: CGRect = cell.bounds
            bounds.insetBy(dx: 25, dy: 0)
            var addLine: Bool = false
            
            if indexPath.row == 0 && indexPath.row == ( tableView.numberOfRows(inSection: indexPath.section) - 1) {
                path.addRoundedRect(in: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius)
                
            } else if indexPath.row == 0 {
                path.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))
                path.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.minY), tangent2End: CGPoint(x: bounds.midX, y: bounds.minY), radius: cornerRadius)
                path.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.minY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)
                path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
                
            } else if indexPath.row == (tableView.numberOfRows(inSection: indexPath.section) - 1) {
                path.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
                path.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.midX, y: bounds.maxY), radius: cornerRadius)
                path.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)
                path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))
                
            } else {
                path.addRect(bounds)
                addLine = true
            }
            
            layer.path = path
            layer.fillColor = UIColor.HexColor(0x181944).cgColor
            
            if addLine {
                let lineLayer: CALayer = CALayer()
                let lineHeight: CGFloat = 1.0 / UIScreen.main.scale
                lineLayer.frame = CGRect(x: bounds.minX + 10.0, y: bounds.size.height - lineHeight, width: bounds.size.width, height: lineHeight)
                lineLayer.backgroundColor = tableView.separatorColor?.cgColor
                layer.addSublayer(lineLayer)
            }
            
            let testView: UIView = UIView(frame: bounds)
            testView.layer.insertSublayer(layer, at: 0)
            testView.backgroundColor = .clear
            cell.backgroundView = testView
        }
    }
}

TableviewCell 设置

调整tableviewcell 的原因是, 如果你想调整左右两侧间隙, 就要重写tableviewcell 的frame 

1
2
3
4
5
6
7
8
9
10
11
12

override var frame: CGRect {
    get {
        return super.frame
    }
    set {
        var frame = newValue
        frame.origin.x += 15
        frame.size.width -= 2 * 15
        super.frame = frame
    }
}

参考地址

  • stackoverflow
0%