UITableView section 圆角 阴影

 

 

在UITableView实现图片上面的效果,百度一下看了别人的实现方案有下面2种:

1.UITableView section里面嵌套UITableView然后在上面实现圆角和阴影,  弊端代码超多我看了下就不想看了立马放弃.

2.UICollectionView 实现,  但是我原来的UI是UITableView写的就懒得重写.

找来找去都没一种简单的实现方案,自己有事了几个绘图API,没有达到图片的效果.想了两天灵光一闪,一个超简单的方法就能实现section+圆角+阴影 .  分享出来给有需要的人

UITableViewCell 是系统的没有自定义,直接在上面插入一个UIView做阴影图层就能达到效果,原理就是利用clipsToBounds属性UIView的layer图层超出view的部分不显示

贴代码

//============阴影层===========

@interface SubCellShadowView :UIView

@property (nonatomic, strong) CAShapeLayer *shadowLayer;

@property (nonatomic, strong) CALayer *separatorLine;

@end

@implementation SubCellShadowView

@end

//===============Cell==================

@interface SubCell : UITableViewCell

@property (nonatomic, strong) SubCellShadowView *bgView;

@property (nonatomic, strong) NSIndexPath *indexPath;

@property (nonatomic) NSInteger rowInSection;//每一组的行数

@end

@implementation SubCell

- (void)awakeFromNib {

    [super awakeFromNib];

    self.selectionStyle = UITableViewCellSelectionStyleNone;

    self.clipsToBounds = NO;

 

    SubCellShadowView *bgView = [[SubCellShadowView alloc] init];

    [self insertSubview:bgView atIndex:0];

    self.bgView= bgView;

 

    CAShapeLayer *shadow = [CAShapeLayer layer];

    shadow.shadowColor = [UIColor blackColor].CGColor;

    shadow.shadowOffset=CGSizeMake(0,0);

    shadow.shadowOpacity=0.15;

    [bgView.layeraddSublayer:shadow];

    bgView.shadowLayer= shadow;

 

    CALayer*line = [CALayerlayer];

    line.backgroundColor = [UIColor groupTableViewBackgroundColor].CGColor;

    [bgView.layeraddSublayer:line];

    bgView.separatorLine= line;

}

-(void)layoutSubviews{

    [super layoutSubviews];

    UIBezierPath*bgBezierPath =nil;

    CGFloat cornerRaduis =7.0;//觉得阴影大的可以把半径调小,半径大的话阴影面积会变大

 

    if(self.indexPath.row==0 && self.rowInSection==1) {//单组单行

        self.bgView.clipsToBounds=NO;

        self.bgView.frame=self.bounds;

        CGRect rect = UIEdgeInsetsInsetRect(self.bgView.bounds, UIEdgeInsetsMake(0, 15, 0, 15));

        bgBezierPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(cornerRaduis, cornerRaduis)];

 

    }elseif(self.indexPath.row==0) {// 第一行

        self.bgView.clipsToBounds=YES;

        self.bgView.frame = UIEdgeInsetsInsetRect(self.bounds, UIEdgeInsetsMake(-5, 0, 0, 0));

        CGRect rect = UIEdgeInsetsInsetRect(self.bgView.bounds, UIEdgeInsetsMake(5, 15, 0, 15));

        bgBezierPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight) cornerRadii:CGSizeMake(cornerRaduis, cornerRaduis)];

 

    }elseif(self.indexPath.row==self.rowInSection-1) {// 最后一行

        self.bgView.clipsToBounds=YES;

        self.bgView.frame = UIEdgeInsetsInsetRect(self.bounds, UIEdgeInsetsMake(0, 0, -5, 0));

        CGRect rect = UIEdgeInsetsInsetRect(self.bgView.bounds, UIEdgeInsetsMake(0, 15, 5, 15));

        bgBezierPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:(UIRectCornerBottomLeft|UIRectCornerBottomRight)  cornerRadii:CGSizeMake(cornerRaduis, cornerRaduis)];

 

    }else{// 中间行

        self.bgView.clipsToBounds=YES;

        self.bgView.frame = UIEdgeInsetsInsetRect(self.bounds, UIEdgeInsetsMake(0, 0, 0, 0));

        CGRect rect = UIEdgeInsetsInsetRect(self.bgView.bounds, UIEdgeInsetsMake(0, 15, 0, 15));

        bgBezierPath = [UIBezierPathbezierPathWithRect:rect];

 

    }

 

    self.bgView.shadowLayer.path= bgBezierPath.CGPath;

    self.bgView.shadowLayer.shadowPath= bgBezierPath.CGPath;

    self.bgView.shadowLayer.fillColor = [UIColor whiteColor].CGColor;

 

 

    //分割线 非单组单行 非最后一行

    if(!(self.indexPath.row==0&&self.rowInSection==1) && !(self.indexPath.row==self.rowInSection-1)) {

        self.bgView.separatorLine.frame = CGRectMake(self.bgView.frame.origin.x+30, self.bgView.frame.size.height-1, self.bgView.frame.size.width-30*2, 1.0);

    }

}

 

@end