iOS学习笔记iOS ScrollView类族首页投稿(暂停使用,暂停投稿)

分组圆角TableView

2015-11-29  本文已影响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

上一篇 下一篇

猜你喜欢

热点阅读