分组圆角TableView

作者: 那时天很蓝 | 来源:发表于2015-11-29 21:37 被阅读2653次

2016.4.6 更新
增加边框功能,调用的时候设置边框线宽度与颜色即可,具体见Github
效果预览:

带边框

2016.2.4 更新
重新修改了代码,一句话即可使用,具体见 Github


自己写的一个实现TableView的每个分组四角是圆角。
效果如下:

我是通过自定义TableViewCell来实现这个功能的,外部引用的时候,通过判断该cellsection中所处的位置来判断其圆角类型。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *kCellID = @"CELLID";
    KKRoundCornerCell *cell = [tableView dequeueReusableCellWithIdentifier:kCellID];
    if (!cell) {
        cell = [[KKRoundCornerCell alloc] initWithCornerRadius:10.0f Style:UITableViewCellStyleDefault reuseIdentifier:kCellID];
    }
    
    if ([tableView numberOfRowsInSection:indexPath.section] == 1) {
        cell.roundCornerType = KKRoundCornerCellTypeSingleRow;
    } else if (indexPath.row == 0) {
        cell.roundCornerType = KKRoundCornerCellTypeTop;
    } else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) {
        cell.roundCornerType = KKRoundCornerCellTypeBottom;
    } else {
        cell.roundCornerType = KKRoundCornerCellTypeDefault;
    }
    
    cell.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 256.0
                                          green:arc4random() % 256 / 256.0
                                           blue:arc4random() % 256 / 256.0
                                          alpha:1.0];
    cell.textLabel.text = [NSString stringWithFormat:@"第%ld组第%ld行", indexPath.section + 1, indexPath.row + 1];
    
    return cell;
}

圆角是使用贝赛尔曲线画出来然后使用layer.mask实现。

- (void)setFrame:(CGRect)frame {
    [super setFrame:frame];
    UIBezierPath *path;
    switch (_roundCornerType) {
        case KKRoundCornerCellTypeTop: {
            path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(_cornerRadius, _cornerRadius)];
            break;
        }
        
        case KKRoundCornerCellTypeBottom: {
            path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(_cornerRadius, _cornerRadius)];
            break;
        }
            
        case KKRoundCornerCellTypeSingleRow: {
            path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(_cornerRadius, _cornerRadius)];
            break;
        }
        
        case KKRoundCornerCellTypeDefault:
        default: {
            self.layer.mask = nil;
            return;
        }
    }
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.bounds;
    maskLayer.path = path.CGPath;
    self.layer.mask = maskLayer;
    
}

代码其实很简单,操作过程中发现系统刚创建出来的TableViewCell的宽度默认是320,要把mask写在setFrame:里面。

代码已上传至Github

相关文章

网友评论

  • d25f64c0d9b3:动态添加cell的时候(点击一条cell,添加一个),cell的分割线还是也会添加上哦
  • 努力奔跑的小男孩:你好, 如果我想用 XIB 定制一个cell , cell 需要继承 KSKRoundCornerCell ,但是里面的实例方法怎么 调用
    d25f64c0d9b3:动态添加cell的时候(点击一条cell,添加一个),cell的分割线还是也会添加上哦
    那时天很蓝:@china_swift 你是想调用方法还是设置属性?
  • sensencoder:亲您好,我自定义label向上滑动为撒数据消失,有时候还会乱,用系统的就没事谢谢
    sensencoder:@那时天很蓝 我下载的你的demo写上也是向上滑动的时候也会重影 :flushed: 我没改好,谢谢你啊
    sensencoder:@那时天很蓝 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    XFDetailTableViewCell *cell = [XFDetailTableViewCell cellWithTableView:tableView style:UITableViewCellStyleSubtitle radius:10.0f indexPath:indexPath strokeLineWidth:0.5 strokeColor:nil];


    UILabel * namelabel = [[UILabel alloc] initWithFrame:CGRectMake(100, 0, 100, 50)];
    namelabel.text = @"123";
    [cell.contentView addSubview:namelabel];


    return cell;

    }
    亲你好我QQ1508062870感谢感谢有点急
    那时天很蓝:可以提供一下自定义的代码吗?我看看
  • 丶皮蛋菌:请问楼主,这个 demo,能不能给外围加上边框?cell 的真实宽度能不能改变?我试了试改变的都是中间那个有颜色的,系统的 cell 改变不了呢?
    那时天很蓝:@漠然丶情到深处 setFrame是系统调用的,我那个方法是通过拿到系统给的宽高来设定显示区域的,所以你看到只改了有颜色的地方,我的QQ:492237154
    丶皮蛋菌:@那时天很蓝 我在自定义 cell 的那个类的 - (void)setFrame:(CGRect)frame 方法里和- (UIBezierPath *)bezierPathWithCellType:(KSKRoundCornerCellType)cellType width:(CGFloat)width height:(CGFloat)height方法里都尝试改了一下数值,变化不太理想。楼主能否留个 QQ
    那时天很蓝:@漠然丶情到深处 不好意思才看到,你是通过什么方法改变cell的宽度的?外围的边框是可以加的,这个我待会添加进去,感谢。
  • Easy_VO:每个cell之间的间距,请问楼主有什么方法可以设置
    那时天很蓝:@Easyzhan drawRect中绘制一个cell的子视图容器和一个空白呢?
    Easy_VO:@那时天很蓝 cell之间留空,
    我在setframe 里处理的,cell之间的间距,不知还有什么其他方式
    那时天很蓝:@Easyzhan 你是指cell的高度吗?
  • 5029c8de48f2:这种方式画圆角后,单元格右侧的红色删除按钮就不出现了
    那时天很蓝:@DoubleDan 已经修复

本文标题:分组圆角TableView

本文链接:https://www.haomeiwen.com/subject/sycjhttx.html