美文网首页表示图分类iOS常用
iOS UITableView section圆角阴影

iOS UITableView section圆角阴影

作者: 倪大头 | 来源:发表于2019-11-30 14:11 被阅读0次

    来源:https://www.jianshu.com/p/739408a7aae1

    给section添加圆角和阴影效果,效果如下:


    image.png

    全部实现都在UITableView的willDisplayCell代理方法里:
    给每个section第一个和最后一个cell分别添加顶部和底部圆角

    - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
        // 圆角角度
        CGFloat radius = 10.f;
        // 设置cell 背景色为透明
        cell.backgroundColor = UIColor.clearColor;
        // 创建两个layer
        CAShapeLayer *normalLayer = [[CAShapeLayer alloc] init];
        CAShapeLayer *selectLayer = [[CAShapeLayer alloc] init];
        // 获取显示区域大小
        CGRect bounds = CGRectInset(cell.bounds, kScaleX * 20, 0);
        // cell的backgroundView
        UIView *normalBgView = [[UIView alloc] initWithFrame:bounds];
        // 获取每组行数
        NSInteger rowNum = [tableView numberOfRowsInSection:indexPath.section];
        // 贝塞尔曲线
        UIBezierPath *bezierPath = nil;
        
        if (rowNum == 1) {
            // 一组只有一行(四个角全部为圆角)
            bezierPath = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(radius, radius)];
            normalBgView.clipsToBounds = NO;
        }else {
            normalBgView.clipsToBounds = YES;
            if (indexPath.row == 0) {
                normalBgView.frame = UIEdgeInsetsInsetRect(bounds, UIEdgeInsetsMake(-5, 0, 0, 0));
                CGRect rect = UIEdgeInsetsInsetRect(bounds, UIEdgeInsetsMake(5, 0, 0, 0));
                // 每组第一行(添加左上和右上的圆角)
                bezierPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight) cornerRadii:CGSizeMake(radius, radius)];
            }else if (indexPath.row == rowNum - 1) {
                normalBgView.frame = UIEdgeInsetsInsetRect(bounds, UIEdgeInsetsMake(0, 0, -5, 0));
                CGRect rect = UIEdgeInsetsInsetRect(bounds, UIEdgeInsetsMake(0, 0, 5, 0));
                // 每组最后一行(添加左下和右下的圆角)
                bezierPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:(UIRectCornerBottomLeft|UIRectCornerBottomRight) cornerRadii:CGSizeMake(radius, radius)];
            }else {
                // 每组不是首位的行不设置圆角
                bezierPath = [UIBezierPath bezierPathWithRect:bounds];
            }
        }
        
        // 阴影
        normalLayer.shadowColor = [UIColor blackColor].CGColor;
        normalLayer.shadowOpacity = 0.2;
        normalLayer.shadowOffset = CGSizeMake(0, 0);
        normalLayer.path = bezierPath.CGPath;
        normalLayer.shadowPath = bezierPath.CGPath;
        
        // 把已经绘制好的贝塞尔曲线路径赋值给图层,然后图层根据path进行图像渲染render
        normalLayer.path = bezierPath.CGPath;
        selectLayer.path = bezierPath.CGPath;
        
        // 设置填充颜色
        normalLayer.fillColor = [UIColor whiteColor].CGColor;
        // 添加图层到nomarBgView中
        [normalBgView.layer insertSublayer:normalLayer atIndex:0];
        normalBgView.backgroundColor = UIColor.clearColor;
        cell.backgroundView = normalBgView;
        
        // 替换cell点击效果
        UIView *selectBgView = [[UIView alloc] initWithFrame:bounds];
        selectLayer.fillColor = [UIColor colorWithWhite:0.95 alpha:1.0].CGColor;
        [selectBgView.layer insertSublayer:selectLayer atIndex:0];
        selectBgView.backgroundColor = UIColor.clearColor;
        cell.selectedBackgroundView = selectBgView;
    }
    

    相关文章

      网友评论

        本文标题:iOS UITableView section圆角阴影

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