分组圆角TableView

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,670评论 7 249
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,194评论 4 61
  • 分类是我们简化认识、理解世界最常用的方式之一。世界本为一体,我们为了便于理解,把原子及以下层面的事情叫做物理学,原...
    iamsujie阅读 4,707评论 1 38
  • 人生,没有永远的爱情,不能拥有的人,总会忘记。慢慢地,你不会再流泪;慢慢地,一切都过去了,适当的放弃,是人生优雅的...
    98633f187524阅读 1,124评论 1 1
  • 紫色烟华烫染的三月,就像你离开的九月,漂洗的月光就像折弯的霜之哀伤。闪烁着淡紫色幽光的星,就像女神的泪。刚刚残阳铺...
    姽婳如初阅读 1,735评论 0 1