先看以下的效果图
在UITableViewDelegate的willDisplayCell方法中,通过UIBezierPath绘制显示圆角即可
OC实现的方法:
- (void)tableView:(UITableView*)tableViewwillDisplayCell:(UITableViewCell*)cellforRowAtIndexPath:(NSIndexPath*)indexPath {
// 圆角角度
CGFloatradius =10.f;
// 设置cell 背景色为透明
cell.backgroundColor = UIColor.clearColor;
// 创建两个layer
CAShapeLayer*normalLayer = [[CAShapeLayeralloc]init];
CAShapeLayer*selectLayer = [[CAShapeLayeralloc]init];
// 获取显示区域大小
CGRectbounds =CGRectInset(cell.bounds,10,0);
// 获取每组行数
NSIntegerrowNum = [tableViewnumberOfRowsInSection:indexPath.section];
// 贝塞尔曲线
UIBezierPath*bezierPath =nil;
//考虑一行和多行的情况,若行数为1,则这个cell的每个角都是圆角,否则第一行的左上和右上为圆角,最后一行的左下和右下为圆角
if(rowNum ==1) {
// 一组只有一行(四个角全部为圆角)
bezierPath = [UIBezierPathbezierPathWithRoundedRect:bounds
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(radius, radius)];
}else{
if(indexPath.row==0) {
// 每组第一行(添加左上和右上的圆角)
bezierPath = [UIBezierPathbezierPathWithRoundedRect:bounds
byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight)
cornerRadii:CGSizeMake(radius, radius)];
}else if(indexPath.row== rowNum -1) {
// 每组最后一行(添加左下和右下的圆角)
bezierPath = [UIBezierPathbezierPathWithRoundedRect:bounds
byRoundingCorners:(UIRectCornerBottomLeft|UIRectCornerBottomRight)
cornerRadii:CGSizeMake(radius, radius)];
}else{
// 每组不是首位的行不设置圆角
bezierPath = [UIBezierPathbezierPathWithRect:bounds];
}
}
//将贝塞尔曲线的路径赋值给图层,并将图层添加到view
// 把已经绘制好的贝塞尔曲线路径赋值给图层,然后图层根据path进行图像渲染render
normalLayer.path= bezierPath.CGPath;
selectLayer.path= bezierPath.CGPath;
UIView*nomarBgView = [[UIViewalloc]initWithFrame:bounds];
// 设置填充颜色
normalLayer.fillColor = [UIColor colorWithWhite:0.95 alpha:1.0].CGColor;
// 添加图层到nomarBgView中
[nomarBgView.layerinsertSublayer:normalLayeratIndex:0];
nomarBgView.backgroundColor = UIColor.clearColor;
cell.backgroundView= nomarBgView;
//圆角显示就完成了,但是如果没有取消cell的点击效果,会出现一个灰色的长方形的形状,再用上面创建的selectLayer给cell添加一个selectedBackgroundView
UIView*selectBgView = [[UIViewalloc]initWithFrame:bounds];
selectLayer.fillColor = [UIColor colorWithWhite:0.95 alpha:1.0].CGColor;
[selectBgView.layerinsertSublayer:selectLayeratIndex:0];
selectBgView.backgroundColor = UIColor.clearColor;
cell.selectedBackgroundView= selectBgView;
}
swift实现的方法:
func tableView(_tableView:UITableView, willDisplay cell:UITableViewCell, forRowAt indexPath:IndexPath) {
// 圆角角度
let radius =calculate(w:35.0)
// 设置cell 背景色为透明
cell.backgroundColor = UIColor.clear
// 创建两个layer
let normalLayer =CAShapeLayer()
let selectLayer =CAShapeLayer()
// 获取显示区域大小
let bounds = cell.bounds.insetBy(dx:10.0, dy:0)
// 获取每组行数
let rowNum = tableView.numberOfRows(inSection: indexPath.section)
// 贝塞尔曲线
var bezierPath:UIBezierPath
if(rowNum==1) {
// 一组只有一行(四个角全部为圆角)
bezierPath =UIBezierPath(roundedRect: bounds, byRoundingCorners: .allCorners, cornerRadii:CGSize(width: radius, height: radius))
}else{
if(indexPath.row==0) {
// 每组第一行(添加左上和右上的圆角)
bezierPath =UIBezierPath(roundedRect: bounds, byRoundingCorners: [UIRectCorner.topLeft,UIRectCorner.topRight], cornerRadii:CGSize(width: radius, height: radius))
}elseif(indexPath.row==rowNum-1) {
// 每组最后一行(添加左下和右下的圆角)
bezierPath =UIBezierPath(roundedRect: bounds, byRoundingCorners: [UIRectCorner.bottomLeft,UIRectCorner.bottomRight], cornerRadii:CGSize(width: radius, height: radius))
}else{
// 每组不是首位的行不设置圆角
bezierPath =UIBezierPath(rect: bounds)
}
}
// 把已经绘制好的贝塞尔曲线路径赋值给图层,然后图层根据path进行图像渲染render
normalLayer.path= bezierPath.cgPath;
selectLayer.path= bezierPath.cgPath;
let nomarBgView =UIView(frame: bounds);
// 设置填充颜色
normalLayer.fillColor=UIColor.white.cgColor
// 添加图层到nomarBgView中
nomarBgView.layer.insertSublayer(normalLayer, at:0)
nomarBgView.backgroundColor=UIColor.clear
cell.backgroundView= nomarBgView
let selectBgView =UIView(frame: bounds)
selectLayer.fillColor= UIColor.white.cgColor
selectBgView.layer.insertSublayer(selectLayer, at:0)
selectBgView.backgroundColor=UIColor.clear
cell.selectedBackgroundView= selectBgView
}
网友评论