分组圆角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的高度吗?
      • DoubleDan:这种方式画圆角后,单元格右侧的红色删除按钮就不出现了
        那时天很蓝:@DoubleDan 已经修复

      本文标题:分组圆角TableView

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