修改 UITableView 的 UITableViewCell 圆角和 Section 圆角

1、修改 UITableViewCell 的圆角,只需要在自定义的 cell 中重写 cell 的 frame 和设置 layer 的cornerRadius和masksToBounds两个属性。

即:

 

 1 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
 2     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
 3     if (self) {
 4         self.layer.cornerRadius = 5;
 5         self.layer.masksToBounds = YES;
 6         
 7         self.selectionStyle = UITableViewCellSelectionStyleNone;
 8     }
 9     
10     return self;
11 }
12 
13 
14 - (void)setFrame:(CGRect)frame{
15     
16     CGRect f = frame;
17     f.origin.x = 10;
18     f.size.width = frame.size.width - 20;
19     [super setFrame:f];
20 }

 

 

 

 

2、设置 UITableView 中 section 的圆角

 

 1 - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
 2 {
 3     if ([cell respondsToSelector:@selector(tintColor)]) {
 4         if (tableView == self.tableView) {
 5             // 圆角弧度半径
 6             CGFloat cornerRadius = 5.f;
 7             // 设置cell的背景色为透明,如果不设置这个的话,则原来的背景色不会被覆盖
 8             cell.backgroundColor = UIColor.clearColor;
 9             
10             // 创建一个shapeLayer
11             CAShapeLayer *layer = [[CAShapeLayer alloc] init];
12             CAShapeLayer *backgroundLayer = [[CAShapeLayer alloc] init]; //显示选中
13             // 创建一个可变的图像Path句柄,该路径用于保存绘图信息
14             CGMutablePathRef pathRef = CGPathCreateMutable();
15             // 获取cell的size
16             CGRect bounds = CGRectInset(cell.bounds, 0, 0);
17             
18             // CGRectGetMinY:返回对象顶点坐标
19             // CGRectGetMaxY:返回对象底点坐标
20             // CGRectGetMinX:返回对象左边缘坐标
21             // CGRectGetMaxX:返回对象右边缘坐标
22             
23             // 这里要判断分组列表中的第一行,每组section的第一行,每组section的中间行
24             BOOL addLine = NO;
25             // CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius);
26             if (indexPath.row == 0) {
27                 // 初始起点为cell的左下角坐标
28                 CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));
29                 // 起始坐标为左下角,设为p1,(CGRectGetMinX(bounds), CGRectGetMinY(bounds))为左上角的点,设为p1(x1,y1),(CGRectGetMidX(bounds), CGRectGetMinY(bounds))为顶部中点的点,设为p2(x2,y2)。然后连接p1和p2为一条直线l1,连接初始点p到p1成一条直线l,则在两条直线相交处绘制弧度为r的圆角。
30                 CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius);
31                 CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
32                 // 终点坐标为右下角坐标点,把绘图信息都放到路径中去,根据这些路径就构成了一块区域了
33                 CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));
34                 addLine = YES;
35             } else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {
36                 // 初始起点为cell的左上角坐标
37                 CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));
38                 CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius);
39                 CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
40                 // 添加一条直线,终点坐标为右下角坐标点并放到路径中去
41                 CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));
42             } else {
43                 // 添加cell的rectangle信息到path中(不包括圆角)
44                 CGPathAddRect(pathRef, nil, bounds);
45                 addLine = YES;
46             }
47             // 把已经绘制好的可变图像路径赋值给图层,然后图层根据这图像path进行图像渲染render
48             layer.path = pathRef;
49             backgroundLayer.path = pathRef;
50             // 注意:但凡通过Quartz2D中带有creat/copy/retain方法创建出来的值都必须要释放
51             CFRelease(pathRef);
52             // 按照shape layer的path填充颜色,类似于渲染render
53             // layer.fillColor = [UIColor colorWithWhite:1.f alpha:0.8f].CGColor;
54             layer.fillColor = [UIColor whiteColor].CGColor;
55             // 添加分隔线图层
56             if (addLine == YES) {
57                 CALayer *lineLayer = [[CALayer alloc] init];
58                 CGFloat lineHeight = (1.f / [UIScreen mainScreen].scale);
59                 lineLayer.frame = CGRectMake(CGRectGetMinX(bounds), bounds.size.height-lineHeight, bounds.size.width, lineHeight);
60                 // 分隔线颜色取自于原来tableview的分隔线颜色
61                 lineLayer.backgroundColor = tableView.separatorColor.CGColor;
62                 [layer addSublayer:lineLayer];
63             }
64             
65             // view大小与cell一致
66             UIView *roundView = [[UIView alloc] initWithFrame:bounds];
67             // 添加自定义圆角后的图层到roundView中
68             [roundView.layer insertSublayer:layer atIndex:0];
69             roundView.backgroundColor = UIColor.clearColor;
70             //cell的背景view
71             //cell.selectedBackgroundView = roundView;
72             cell.backgroundView = roundView;
73             
74             //以上方法存在缺陷当点击cell时还是出现cell方形效果,因此还需要添加以下方法
75             UIView *selectedBackgroundView = [[UIView alloc] initWithFrame:bounds];
76             backgroundLayer.fillColor = tableView.separatorColor.CGColor;
77             [selectedBackgroundView.layer insertSublayer:backgroundLayer atIndex:0];
78             selectedBackgroundView.backgroundColor = UIColor.clearColor;
79             cell.selectedBackgroundView = selectedBackgroundView;
80         }
81     }
82 }

 

posted @ 2016-11-25 13:48  Now,OnMyWay  阅读(6396)  评论(0编辑  收藏  举报