【ios学习记录】-如何定制UITableView的圆角单元格
2016-03-31 10:46
756 查看
自从ios7更新以来,UITableView控件的边角style由默认圆角变成了直角,更加适应UI扁平化设计的效果了。但对于某种情况来说,如果tableview宽度不是拉伸到与父视图等宽,那么使用直角的tableview则会显得不好看。如下图分组列表(group tableview)所示。
而如果此时采用圆角效果的话,则会显示圆润温和,用户会觉得好看,体验很好。如下图所示。
要实现以上分组列表(group tableview)的圆角效果,主要是通过Core Graphics API来实现图层重绘。于是根据在网上找到的资料和个人搜集的信息,在这里主要通过实现UITableViewDelegate协议中的willDisplayCell函数进行自定义cell的操作。
主要思路:
cell背景色设为透明-》新建图层-》圆角矩形图层绘制-》把该图层作为自子图层赋给UIView-》UIView赋给cell的backgroundView。所谓千言万语,不如一句代码,现贴出核心代码并给出最详细的注释。
函数分析:
红色边部分的路径会被写入到path中。
绘制path流程:
简单的圆角cell实现OK!整体代码可在这下载:CornerRadiusTableView
而如果此时采用圆角效果的话,则会显示圆润温和,用户会觉得好看,体验很好。如下图所示。
要实现以上分组列表(group tableview)的圆角效果,主要是通过Core Graphics API来实现图层重绘。于是根据在网上找到的资料和个人搜集的信息,在这里主要通过实现UITableViewDelegate协议中的willDisplayCell函数进行自定义cell的操作。
主要思路:
cell背景色设为透明-》新建图层-》圆角矩形图层绘制-》把该图层作为自子图层赋给UIView-》UIView赋给cell的backgroundView。所谓千言万语,不如一句代码,现贴出核心代码并给出最详细的注释。
/** * 将要为每行row绘制cell,可自定义cell显示方法 */ - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { if ([cell respondsToSelector:@selector(tintColor)]) { if (tableView == self.mainTableView) { // 圆角弧度半径 CGFloat cornerRadius = 5.f; // 设置cell的背景色为透明,如果不设置这个的话,则原来的背景色不会被覆盖 cell.backgroundColor = UIColor.clearColor; // 创建一个shapeLayer CAShapeLayer *layer = [[CAShapeLayer alloc] init]; // 创建一个可变的图像Path句柄,该路径用于保存绘图信息 CGMutablePathRef pathRef = CGPathCreateMutable(); // 获取cell的size CGRect bounds = CGRectInset(cell.bounds, 0, 0); // CGRectGetMinY:返回对象顶点坐标 // CGRectGetMaxY:返回对象底点坐标 // CGRectGetMinX:返回对象左边缘坐标 // CGRectGetMaxX:返回对象右边缘坐标 BOOL addLine = NO; //只有一行 if ([tableView numberOfRowsInSection:indexPath.section] == 1) { // 初始起点为cell的左下角坐标 CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds)); // 起始坐标为左下角,设为p1,(CGRectGetMinX(bounds), CGRectGetMinY(bounds))为左上角的点,设为p1(x1,y1),(CGRectGetMidX(bounds), CGRectGetMinY(bounds))为顶部中点的点,设为p2(x2,y2)。然后连接p1和p2为一条直线l1,连接初始点p到p1成一条直线l,则在两条直线相交处绘制弧度为r的圆角。 CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius); CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius); CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius); CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMinX(bounds), CGRectGetMidY(bounds), cornerRadius); }else { // 这里要判断分组列表中的第一行,每组section的第一行,每组section的中间行 //BOOL addLine = NO; // CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius); if (indexPath.row == 0) { // 初始起点为cell的左下角坐标 CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds)); // 起始坐标为左下角,设为p1,(CGRectGetMinX(bounds), CGRectGetMinY(bounds))为左上角的点,设为p1(x1,y1),(CGRectGetMidX(bounds), CGRectGetMinY(bounds))为顶部中点的点,设为p2(x2,y2)。然后连接p1和p2为一条直线l1,连接初始点p到p1成一条直线l,则在两条直线相交处绘制弧度为r的圆角。 CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius); CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius); // 终点坐标为右下角坐标点,把绘图信息都放到路径中去,根据这些路径就构成了一块区域了 CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds)); addLine = YES; } else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) { // 初始起点为cell的左上角坐标 CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds)); CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius); CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius); // 添加一条直线,终点坐标为右下角坐标点并放到路径中去 CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds)); } else { // 添加cell的rectangle信息到path中(不包括圆角) CGPathAddRect(pathRef, nil, bounds); addLine = YES; } } // 把已经绘制好的可变图像路径赋值给图层 layer.path = pathRef; // 注意:但凡通过Quartz2D中带有creat/copy/retain方法创建出来的值都必须要释放 CFRelease(pathRef); // 按照shape layer的path填充颜色,类似于渲染render layer.fillColor = [UIColor colorWithWhite:1.f alpha:0.8f].CGColor; // 添加分隔线图层 if (addLine == YES) { CALayer *lineLayer = [[CALayer alloc] init]; CGFloat lineHeight = (1.f / [UIScreen mainScreen].scale); lineLayer.frame = CGRectMake(CGRectGetMinX(bounds), bounds.size.height-lineHeight, bounds.size.width, lineHeight); // 分隔线颜色取自于原来tableview的分隔线颜色 lineLayer.backgroundColor = tableView.separatorColor.CGColor; // 添加子图层 [layer addSublayer:lineLayer]; } // view大小与cell一致 UIView *roundView = [[UIView alloc] initWithFrame:bounds]; // 添加自定义圆角后的子图层到roundView中 [roundView.layer insertSublayer:layer atIndex:0]; roundView.backgroundColor = UIColor.clearColor; //cell的背景view //cell.selectedBackgroundView = roundView; cell.backgroundView = roundView; } } }
函数分析:
CGPathAddArcToPoint(p1, nil, x1, y1, x2, y2, r); //把起点和终点绘制的圆角路径添加到graphics path中,包含直线和圆角。
红色边部分的路径会被写入到path中。
绘制path流程:
// 只举例列表第一行 // 初始起点为cell的左下角坐标 CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds)); // 起始坐标为左下角,设为p1,(CGRectGetMinX(bounds), CGRectGetMinY(bounds))为左上角的点,设为p1(x1,y1),(CGRectGetMidX(bounds), CGRectGetMinY(bounds))为顶部中点的点,设为p2(x2,y2)。然后连接p1和p2为一条直线l1,连接初始点p到p1成一条直线l,则在两条直线相交处绘制弧度为r的圆角。 CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius);
// 绘制右上角的圆角,包含顶端直线和右上角圆角路径并写入path中 CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
// 右边直线路径写入到path中,构成了一个左上角和右上角为圆角的矩形,然后调用layer.fillColor = [UIColor colorWithWhite:1.f alpha:0.8f].CGColor;,按照layer的path绘图路径进行颜色填充,相当于渲染的功能 CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));
简单的圆角cell实现OK!整体代码可在这下载:CornerRadiusTableView
相关文章推荐
- 反编译 (dex2jar和jd_gui)
- 自增ID与GUID(UUID)
- 《iOS Human Interface Guidelines》——Slider
- iOS - UITextField输入错误的震动动画
- E QUERY [thread1] TypeError: db.foo.batchInsert is not a function :
- 微软 Build 2016年开发者大会发布多项功能升级
- UITableViewAutomaticDimension
- AIX /var/adm/wtmp: Value too large to be stored in data type.
- EasyUI datagrid表格双击操作的实现
- UISearchBar
- opencv在iOS中的使用[几个滤波]以及uiimage与iplimage互转
- ios UIScrollview UIImageView点击事件处理
- 使用Autolayout实现UITableView的Cell动态布局和高度动态改变
- UIAlertControllr的使用
- Druid基本配置及内置监控使用
- UITableView滚动到底部(用于评论回复)
- UIImage,CGImage和CGImageRef 区别
- continue 与break 的区别
- IOS学习笔记45--UITableView性能优化
- NSTimer 回调事件被UI交互阻塞的解决方法