ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【iOS】UITableViewCell实现分区圆角

2021-06-30 16:32:06  阅读:237  来源: 互联网

标签:圆角 maskLayer section iOS bounds cell radius UITableViewCell UIBezierPath


可以在tableView的willDisplayCell回调中实现,常用的实现方式有两种

  • 根据cell在section中的位置,利用UIBezierPath绘制蒙层,从而实现分区圆角

cell可分为4种:

1. 当前section有且仅有1行,此时该行cell既是第一行的cell,也是最后一行的cell,四个角都要绘制圆角

2. 每个section中第一行的cell,且当前section不止1行,此时cell的左上角和右上角需要绘制圆角

3. 每个section中最后一行的cell,且当前section不止1行,此时cell的左下角和右下角需要绘制圆角

4. 当前cell既不是所在section的第一行,也不是最后一行,则cell的四个角都不需要绘制圆角

实现代码参考:

 

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    
    // Cell 分区圆角
    CGFloat radius = 10;
    if ([tableView numberOfRowsInSection:indexPath.section] == 1) {
        // 当前section有且仅有1行,则四个角都要绘制圆角
        UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:radius];
        CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
        maskLayer.frame = cell.bounds;
        maskLayer.path = maskPath.CGPath;
        cell.layer.mask = maskLayer;
    } else {
        // 当前section不止1行
        if (indexPath.row == 0) {
            // 当前cell为第一行
            UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds
                                                       byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                                             cornerRadii:CGSizeMake(radius, radius)];
            CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
            maskLayer.frame = cell.bounds;
            maskLayer.path = maskPath.CGPath;
            cell.layer.mask = maskLayer;
          
        } else if (indexPath.row == [tableView numberOfRowsInSection] - 1) {
            // 当前cell为最后一行
            UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds
                                                       byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
                                                             cornerRadii:CGSizeMake(radius, radius)];
            CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
            maskLayer.frame = cell.bounds;
            maskLayer.path = maskPath.CGPath;
            cell.layer.mask = maskLayer;
        } else {
            // 当前cell为中间行
            cell.layer.mask = nil;
        }
    }
}

 

注意当cell为中间行时需要将cell.layer.mask置为nil,否则由于cell的重用机制,会出现section中间行的cell也被绘制圆角的异常情况。

 

  • 用UIBezierPath绘制蒙层,之后通过设置UITableViewCell的backgroundView和selectedBackgroundView实现分区圆角

cell的分类方式与第一种方法相同

实现代码参考:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
        // Cell 分区圆角
    cell.backgroundColor = [UIColor clearColor];
    CGFloat radius = 10;

    CAShapeLayer *normalLayer = [[CAShapeLayer alloc] init];
    CAShapeLayer *selectLayer = [[CAShapeLayer alloc] init];

    NSInteger rowNumber = [tableView numberOfRowsInSection:indexPath.section];

    UIBezierPath *bezierPath = nil;
    if (rowNumber == 1) {
        bezierPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds
                                           byRoundingCorners:UIRectCornerAllCorners
                                                 cornerRadii:CGSizeMake(radius, radius)];
    } else {
        if (indexPath.row == 0) {
            bezierPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds
                                               byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                                     cornerRadii:CGSizeMake(radius, radius)];
        } else if (indexPath.row == rowNumber - 1) {
            bezierPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds
                                               byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
                                                     cornerRadii:CGSizeMake(radius, radius)];
        } else {
            bezierPath = [UIBezierPath bezierPathWithRect:cell.bounds];
        }
    }

    normalLayer.path = bezierPath.CGPath;
    selectLayer.path = bezierPath.CGPath;

    UIView *normalBgView = [[UIView alloc] initWithFrame:cell.bounds];
    normalLayer.fillColor = [[UIColor whiteColor] CGColor];
    [normalBgView.layer insertSublayer:normalLayer atIndex:0];
    normalBgView.backgroundColor = [UIColor clearColor];
    cell.backgroundView = normalBgView;

    UIView *selectBgView = [[UIView alloc] initWithFrame:cell.bounds];
    selectLayer.fillColor = [[UIColor blackColor] CGColor];
    [selectBgView.layer insertSublayer:selectLayer atIndex:0];
    selectBgView.backgroundColor = [UIColor clearColor];
    cell.selectedBackgroundView = selectBgView;

这种方法的好处在于可以设置cell的fillColor,即选中时的颜色,记得要用UIColor.CGColor,否则颜色无法展示。但是这种实现比第一种方法更加重量级,如果只需要给UITableViewCell绘制分区圆角,推荐第一种方式

 

标签:圆角,maskLayer,section,iOS,bounds,cell,radius,UITableViewCell,UIBezierPath
来源: https://www.cnblogs.com/ksdeng/p/14955123.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有