在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:];

    self.bgView= bgView;

    CAShapeLayer *shadow = [CAShapeLayer layer];

    shadow.shadowColor = [UIColor blackColor].CGColor;

    shadow.shadowOffset=CGSizeMake(,);

    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== && self.rowInSection==) {//单组单行

        self.bgView.clipsToBounds=NO;

        self.bgView.frame=self.bounds;

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

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

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

        self.bgView.clipsToBounds=YES;

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

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

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

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

        self.bgView.clipsToBounds=YES;

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

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

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

    }else{// 中间行

        self.bgView.clipsToBounds=YES;

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

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

        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==&&self.rowInSection==) && !(self.indexPath.row==self.rowInSection-)) {

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

    }

}

@end

UITableView section 圆角 阴影的更多相关文章

  1. IOS UIView圆角,阴影,边框,渐增光泽

    圆角 sampleView.layer.cornerRadius = 2.5; // 圓角的弧度sampleView.layer.masksToBounds = YES; 阴影 sampleView. ...

  2. UWP Button添加圆角阴影(三)

    原文:UWP Button添加圆角阴影(三) Composition DropShadow是CompositionAPI中的东西,使用Storyboard设置某个属性,就是频繁的触发put_xxx() ...

  3. UWP Button添加圆角阴影(二)

    原文:UWP Button添加圆角阴影(二) 阴影 对于阴影呢,WindowsCommunityToolkit中已经有封装好的DropShadowPanel啦,只要引用Microsoft.Toolki ...

  4. UWP Button添加圆角阴影(一)

    原文:UWP Button添加圆角阴影(一) 众所周知,17763之前的UWP控件,大部分是没有圆角属性的:而阴影也只有17763中的ThemeShadow可以直接在xaml中使用,之前的版本只能用D ...

  5. CSS3圆角,阴影,透明

    CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. ...

  6. Qt之圆角阴影边框

    Qt的主窗体要做出类似WIN7那种圆角阴影边框,这一直是美工的需求. 这里是有一些门道的,尤其是,这里藏着一个很大的秘密. 这个秘密是一个QT的至少横跨3个版本,存在了2年多的BUG... https ...

  7. 让group tableview每个section拥有阴影和圆角

    #import <UIKit/UIKit.h> @class GroupShadowTableView; @protocol GroupShadowTableViewDelegate &l ...

  8. iOS tableView Section圆角方案

    给tableView的section设置圆角 首先给让cell左右偏移一点的距离,通过重写cell的setframe方法来实现 -(void)setFrame:(CGRect)frame{ CGFlo ...

  9. 设置UITableView section间距

    - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 0 ...

随机推荐

  1. Servlet之Filter

    一 .过滤器(filter) 处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改.判断等,把不符合规则的请求在中途拦截或修改.也可以对响应进行过滤,拦截或 ...

  2. vue 无限递归级联组件实现方案

    最终组件效果图: 无限级联组件实现思想: 在这里有一个很重要的地方就是前端组件如何与后端匹配方法协调好,无限级联很好实现,但是如何让服务器端可以成功的匹配到条件是一个问题,在这里我借鉴了html元素的 ...

  3. VS2013 中 CString类型转换为LPCSTR类型

    HWND hWnd = ::FindWindow(NULL, L"XXXXXXX"); if (hWnd != NULL) { DWORD dwReadBytes; unsigne ...

  4. 注册测绘师20180301-CNSS

    GNSS:Global Navigation Satellite System(全球卫星导航系统)GPS:Global Positioning System(全球定位系统)GPS是美国的卫星导航系统. ...

  5. smb 访问时 提示权限不够

    1. 确认 防火墙关闭和getenforce 为Permissive 状态. 关闭防火墙 service iptables stop 关闭  setenforce 0 2.windows 登录切换 身 ...

  6. zabbix实现对磁盘性能动态监控

    前言 zabbix一直是小规模互联网公司服务器性能监控首选,首先是免费,其次,有专门的公司和社区开发维护,使其稳定性和功能都在不断地增强和完善.zabbix拥有详细的UI界面和分组策略,在被监控的服务 ...

  7. logging 使用的一些问题

    python 脚本加载是递归加载,被引用的脚本要先与调用者脚本加载,所以不能在函数外部获取logger,否则会导致配置被错过

  8. 解决Sublime的package control被墙

    主要是https://packagecontrol.io 这个被墙了 下载不下来导致的错误,把下载链接改为国内的. 操作步骤: 打开: Preferences > Package Setting ...

  9. Problem after converting keras model into Tensorflow pb - 将keras模型转换为Tensorflow pb后的问题

    I'm using keras 2.1.* with tensorflow 1.13.* backend. I save my model during training with .h5 forma ...

  10. tensorflow 经典教程及案例

    导语:本文是TensorFlow实现流行机器学习算法的教程汇集,目标是让读者可以轻松通过清晰简明的案例深入了解 TensorFlow.这些案例适合那些想要实现一些 TensorFlow 案例的初学者. ...