iOS macOS 处理 UITableViewCell 第一行和最后一行圆角设置圆角,包括一个Cell也可以
先说我自己的处理
先看效果:
上代码这里只列出关键部分
cellForRowAtIndexPath方法下
// 判断是否为第一行或最后一行 NSInteger firstRow = 0; NSInteger lastRow = [tableView numberOfRowsInSection:indexPath.section] - 1; if (indexPath.row == firstRow || indexPath.row == lastRow) { // 设置圆角 cell.layer.masksToBounds = YES; cell.layer.cornerRadius = 10.0; // 根据需要调整圆角大小 // 仅对第一行设置顶部圆角,仅对最后一行设置底部圆角 if (indexPath.row == firstRow) { cell.layer.maskedCorners = kCALayerMinXMinYCorner | kCALayerMaxXMinYCorner; cell.cellLine.hidden = YES;//处理分割线,第一个不显示!!!!!! } else if (indexPath.row == lastRow) { cell.layer.maskedCorners = kCALayerMinXMaxYCorner | kCALayerMaxXMaxYCorner; } } else { // 中间行不需要圆角,或者根据需要设置其他样式 }
对应的cell文件中的设置
.h
@property (nonatomic, strong) UIView *cellLine;//分割线
.m
#pragma mark - Setter && Getter 懒加载 - (UIView *)cellLine{ if (!_cellLine) { _cellLine = [[UIView alloc] init]; _cellLine.backgroundColor = [XLColor(@"eeeeee") colorWithAlphaComponent:1.0];//背景色 } return _cellLine; } - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{ self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { [self setUpView]; [self setUpLayouts]; } return self; } - (void)setUpView{ [self addSubview:self.cellLine]; } - (void)setUpLayouts{ [self.cellLine mas_makeConstraints:^(MASConstraintMaker *make) { make.top.mas_equalTo(1); make.left.mas_equalTo(16); make.right.mas_equalTo(-16); make.height.mas_equalTo(1); }]; }
接下来我们看看👀其他选手的方法
其实和网上大多数的cell设置圆角方法一样,调用cell 的代理方法willDisplayCell在里边进行cell的当前位置判断进行layer渲染。
- 首先获取每组的行数
// 获取每组行数
NSInteger rowNum = [tableView numberOfRowsInSection:indexPath.section];
- 判断条件
if (rowNum == 1) {///只有一行时
}else{
if (indexPath.row == 0) {///第一行
// 每组第一行(添加左上和右上的圆角)
}else if (indexPath.row == rowNum - 1){///最后一行
// 每组最后一行(添加左下和右下的圆角)
}else{///中间行
// 每组不是首位的行不设置圆角
}
}
- 完整OC代码
- (void)tableView:(UITableView *)tableView willDisplayCell:(nonnull UITableViewCell *)cell forRowAtIndexPath:(nonnull NSIndexPath *)indexPath {
// 圆角角度
CGFloat radius = 10.f;
// 设置cell 背景色为透明
cell.backgroundColor = UIColor.clearColor;
// 创建两个layer
CAShapeLayer *normalLayer = [[CAShapeLayer alloc] init];
CAShapeLayer *selectLayer = [[CAShapeLayer alloc] init];
// 获取显示区域大小
CGRect bounds = CGRectInset(cell.bounds, 15, 0);
// 获取每组行数
NSInteger rowNum = [tableView numberOfRowsInSection:indexPath.section];
// 贝塞尔曲线
UIBezierPath *bezierPath = nil;
if (rowNum == 1) {
bezierPath = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(radius, radius)];
}else{
if (indexPath.row == 0) {
// 每组第一行(添加左上和右上的圆角)
bezierPath = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(radius, radius)];
}else if (indexPath.row == rowNum - 1){
// 每组最后一行(添加左下和右下的圆角)
bezierPath = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(radius, radius)];
}else{
// 每组不是首位的行不设置圆角
bezierPath = [UIBezierPath bezierPathWithRect:bounds];
}
}
// 把已经绘制好的贝塞尔曲线路径赋值给图层,然后图层根据path进行图像渲染render
normalLayer.path = bezierPath.CGPath;
selectLayer.path = bezierPath.CGPath;
UIView *nomarBgView = [[UIView alloc] initWithFrame:bounds];
// 设置填充颜色
// normalLayer.fillColor = [UIColor colorWithWhite:0.95 alpha:1.0].CGColor;
normalLayer.fillColor = [[UIColor whiteColor] CGColor];
// 添加图层到nomarBgView中
[nomarBgView.layer insertSublayer:normalLayer atIndex:0];
nomarBgView.backgroundColor = UIColor.clearColor;
// nomarBgView.backgroundColor = UIColor.whiteColor;
cell.backgroundView = nomarBgView;
//此时圆角显示就完成了,但是如果没有取消cell的点击效果,还是会出现一个灰色的长方形的形状,再用上面创建的selectLayer给cell添加一个selectedBackgroundView
UIView *selectBgView = [[UIView alloc] initWithFrame:bounds];
selectLayer.fillColor = [[UIColor whiteColor] CGColor];
[selectBgView.layer insertSublayer:selectLayer atIndex:0];
selectBgView.backgroundColor = UIColor.clearColor;
cell.selectedBackgroundView = selectBgView;
}
![](http://upload-images.jianshu.io/upload_images/2797889-137cc2835411d017.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/750/format/webp)
示例
最后编辑于 :2020.09.14 14:22:24
作者:灬小五灬
链接:https://www.jianshu.com/p/dd6f23d3eac8
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。