cell圆角效果的绘制

圆角的cell,之前iOS 6的时候是这种的(拟物),iOS 7 (扁平化)之后就进行了修改!

主要的实现在tableView的代理方法中 - (void)tableView:willDisplayCell: forRowAtIndexPath: ,绘制table view cell 的背景view。

下面的代码,你可以直接拷贝到控制器中演示效果,如果要集成到你自己的代码中,你需要把 - (void)tableView:willDisplayCell: forRowAtIndexPath: 这个方法中的东西拷贝过去,还要修改table view 的样式是分组和分割线为 none,这些在 - viewDidLoad中你也可以找到。


//  圆角cell

#import "ViewController.h"

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>


@property (strong, nonatomic)NSArray *dataSource;


@end

@implementation ViewController

//懒加载--数据源
- (NSArray *)dataSource
{
    if (!_dataSource) {
        _dataSource = @[@[@"我发布的",@"我回复的",@"我喜欢的"],@[@"关于我们",@"退出登录"]];
    }
    
    return  _dataSource;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
#pragma mark - 这里注意样式--分组
    UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStyleGrouped];

    
    tableView.dataSource = self;
    tableView.delegate = self;
#pragma mark - 把原生的分割线去掉
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
#pragma mark - 这里我不让cell选择了
    tableView.allowsSelection = NO;
    [self.view addSubview:tableView];
}



#pragma mark- UITableViewDelegate or dataSource

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return  self.dataSource.count;
}
//单元格的个数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    NSArray *array = self.dataSource[section];
    return  array.count;
}
//cell创建
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *ID = @"cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
        
    }

    cell.textLabel.text = self.dataSource[indexPath.section][indexPath.row];
    cell.imageView.image = [UIImage imageNamed:@"icon"];
    return  cell;
}

#pragma mark- cell 将要显示的时候调用这个方法,就在这个方法内进行圆角绘制
/**
本质:就是修改cell的背景view,这个view的layer层自己分局cell的类型(顶,底和中间)来绘制*/
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([cell respondsToSelector:@selector(tintColor)])
    {
        CGFloat cornerRadius = 5.f;//圆角大小
        cell.backgroundColor = [UIColor clearColor];
        CAShapeLayer *layer = [[CAShapeLayer alloc] init];
        CGMutablePathRef pathRef = CGPathCreateMutable();
        CGRect bounds = CGRectInset(cell.bounds, 10, 0);
        BOOL addLine = NO;
        
        if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1)
        {
            CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius);

        }
        else if (indexPath.row == 0)
        {   //最顶端的Cell(两个向下圆弧和一条线)
            CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));
            CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius);
            CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
            CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));
            addLine = YES;
        }
        else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1)
        {   //最底端的Cell(两个向上的圆弧和一条线)
            CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));
            CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius);
            CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
            CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));
        }
        else
        {   //中间的Cell
            CGPathAddRect(pathRef, nil, bounds);
            addLine = YES;
        }
        layer.path = pathRef;
        CFRelease(pathRef);
        layer.fillColor = [UIColor whiteColor].CGColor; //cell的填充颜色
        layer.strokeColor = [UIColor lightGrayColor].CGColor; //cell 的边框颜色
        
        if (addLine == YES) {
            CALayer *lineLayer = [[CALayer alloc] init];
            CGFloat lineHeight = (1.f / [UIScreen mainScreen].scale);
            lineLayer.frame = CGRectMake(CGRectGetMinX(bounds), bounds.size.height-lineHeight, bounds.size.width, lineHeight);
            lineLayer.backgroundColor = [UIColor lightGrayColor].CGColor;        //绘制中间间隔线
            [layer addSublayer:lineLayer];
        }
        
        UIView *bgView = [[UIView alloc] initWithFrame:bounds];
        [bgView.layer insertSublayer:layer atIndex:0];
        bgView.backgroundColor = UIColor.clearColor;
        cell.backgroundView = bgView;
    }
}


@end

效果图:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值