![](https://i-blog.csdnimg.cn/blog_migrate/114e56ea006511835dc1e1afbdb6f532.webp?x-image-process=image/format,png)
在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