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