IOS中UITableviewCell 这种效果怎么实现?

如图:所示

OC纯代码布局TableviewCell 的两端并没有对齐屏幕箭头中指的线就是屏幕的边框
还有就是上面三个cell.
第0行的左上右上有圆角.第1行的是没有圆角的.第2行的左下右下有圆角
这样的效果怎么封装?
快快快,代码贴出来啊…谢谢啦…

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

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

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


// 圆角cell #import "ViewController.h" @interface ViewController <UITableViewDelegate,UITableViewDataSource> @property strong, nonatomicNSArray *dataSource; @end @implementation ViewController //懒加载--数据源
- NSArray *dataSource
{ if !_dataSource { _dataSource = @[@[@"我发布的",@"我回复的",@"我喜欢的"],@[@"关于我们",@"退出登录"]]; } return _dataSource;
} - voidviewDidLoad { [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 - NSIntegernumberOfSectionsInTableView:UITableView *tableView
{ return self.dataSource.count;
}
//单元格的个数
- NSIntegertableView:UITableView *tableView numberOfRowsInSection:NSIntegersection
{ 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的类型(顶,底和中间)来绘制*/
- voidtableView:UITableView *tableView willDisplayCell:UITableViewCell *cell forRowAtIndexPath:NSIndexPath *indexPath
{ if [cell respondsToSelector:@selectortintColor] { CGFloat cornerRadius = 5.f;//圆角大小 cell.backgroundColor = [UIColor clearColor]; CAShapeLayer *layer = [[CAShapeLayer alloc] init]; CGMutablePathRef pathRef = CGPathCreateMutable; CGRect bounds = CGRectInsetcell.bounds, 10, 0; BOOL addLine = NO; if indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1 { CGPathAddRoundedRectpathRef, nil, bounds, cornerRadius, cornerRadius; } else if indexPath.row == 0 { //最顶端的Cell(两个向下圆弧和一条线) CGPathMoveToPointpathRef, nil, CGRectGetMinXbounds, CGRectGetMaxYbounds; CGPathAddArcToPointpathRef, nil, CGRectGetMinXbounds, CGRectGetMinYbounds, CGRectGetMidXbounds, CGRectGetMinYbounds, cornerRadius; CGPathAddArcToPointpathRef, nil, CGRectGetMaxXbounds, CGRectGetMinYbounds, CGRectGetMaxXbounds, CGRectGetMidYbounds, cornerRadius; CGPathAddLineToPointpathRef, nil, CGRectGetMaxXbounds, CGRectGetMaxYbounds; addLine = YES; } else if indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1 { //最底端的Cell(两个向上的圆弧和一条线) CGPathMoveToPointpathRef, nil, CGRectGetMinXbounds, CGRectGetMinYbounds; CGPathAddArcToPointpathRef, nil, CGRectGetMinXbounds, CGRectGetMaxYbounds, CGRectGetMidXbounds, CGRectGetMaxYbounds, cornerRadius; CGPathAddArcToPointpathRef, nil, CGRectGetMaxXbounds, CGRectGetMaxYbounds, CGRectGetMaxXbounds, CGRectGetMidYbounds, cornerRadius; CGPathAddLineToPointpathRef, nil, CGRectGetMaxXbounds, CGRectGetMinYbounds; } else { //中间的Cell CGPathAddRectpathRef, nil, bounds; addLine = YES; } layer.path = pathRef; CFReleasepathRef; 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 = CGRectMakeCGRectGetMinXbounds, 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

效果图:

我之前这种排列也可以不用UITableViewCell,而是直接用自定义UIView.外面整个有圆角,里面放两个按钮即可。
假如用UITableViewCell,那么其圆角最好是UI给带圆角的背景图,然后自定义里面的视图就行。

自定义cell
然后重写 setframe

- voidtableView:UITableView *tableView willDisplayCell:UITableViewCell *cell forRowAtIndexPath:NSIndexPath *indexPath

这个方法比layoutSubviews方法先调用,以至于我在layoutSubviews方法修改了Cell的宽度.

#import "LMSMeViewCell.h" @implementation LMSMeViewCell - voidlayoutSubviews { [super layoutSubviews]; //修改cell的frame CGRect rect = self.frame; //如果已经修改过就不用修改了 if self.frame.size.width == SCREEN_WIDTH { NSLog@"%f",SCREEN_WIDTH; rect = CGRectMakeself.frame.origin.x + 10, self.frame.origin.y, self.frame.size.width - 20, self.frame.size.height; } self.frame = rect; NSLog@"**********%@",NSStringFromCGRectrect; self.textLabel.font = [UIFont systemFontOfSize:13]; self.textLabel.textColor = [UIColor colorWithRed:0.51 green:0.51 blue:0.51 alpha:1]; [self.imageView mas_makeConstraints:^MASConstraintMaker *make { make.left.equalToself.contentView.offset10; make.width.height.offset22; make.centerY.equalToself.contentView; }]; [self.textLabel mas_makeConstraints:^MASConstraintMaker *make { make.left.equalToself.imageView.mas_right.offset20; make.centerY.equalToself.imageView.mas_centerY; }];
}
@end

Controller关键代码:

#pragma mark- cell 将要显示的时候调用这个方法,就在这个方法内进行圆角绘制
/** 本质:就是修改cell的背景view,这个view的layer层自己分局cell的类型(顶,底和中间)来绘制*/
- voidtableView:UITableView *tableView willDisplayCell:UITableViewCell *cell forRowAtIndexPath:NSIndexPath *indexPath
{ NSLog@"___"; if [cell respondsToSelector:@selectortintColor] { CGFloat cornerRadius = 6.f;//圆角大小 cell.backgroundColor = [UIColor clearColor]; CAShapeLayer *layer = [[CAShapeLayer alloc] init]; CGMutablePathRef pathRef = CGPathCreateMutable; CGRect bounds = CGRectInsetcell.bounds, 0, 0; NSLog@"___%@",NSStringFromCGRectbounds; // CGRect bounds = CGRectInsetcell.frame, 0, 0; BOOL addLine = NO; if indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1 { CGPathAddRoundedRectpathRef, nil, bounds, cornerRadius, cornerRadius; } else if indexPath.row == 0 { //最顶端的Cell(两个向下圆弧和一条线) CGPathMoveToPointpathRef, nil, CGRectGetMinXbounds, CGRectGetMaxYbounds; CGPathAddArcToPointpathRef, nil, CGRectGetMinXbounds, CGRectGetMinYbounds, CGRectGetMidXbounds, CGRectGetMinYbounds, cornerRadius; CGPathAddArcToPointpathRef, nil, CGRectGetMaxXbounds, CGRectGetMinYbounds, CGRectGetMaxXbounds, CGRectGetMidYbounds, cornerRadius; CGPathAddLineToPointpathRef, nil, CGRectGetMaxXbounds, CGRectGetMaxYbounds; addLine = YES; } else if indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1 { //最底端的Cell(两个向上的圆弧和一条线) CGPathMoveToPointpathRef, nil, CGRectGetMinXbounds, CGRectGetMinYbounds; CGPathAddArcToPointpathRef, nil, CGRectGetMinXbounds, CGRectGetMaxYbounds, CGRectGetMidXbounds, CGRectGetMaxYbounds, cornerRadius; CGPathAddArcToPointpathRef, nil, CGRectGetMaxXbounds, CGRectGetMaxYbounds, CGRectGetMaxXbounds, CGRectGetMidYbounds, cornerRadius; CGPathAddLineToPointpathRef, nil, CGRectGetMaxXbounds, CGRectGetMinYbounds; } else { //中间的Cell CGPathAddRectpathRef, nil, bounds; addLine = YES; } layer.path = pathRef; CFReleasepathRef; layer.fillColor = [UIColor orangeColor].CGColor; //cell的填充颜色
// layer.strokeColor = [UIColor lightGrayColor].CGColor; //cell 的边框颜色 layer.strokeColor = [UIColor colorWithRed:0.8 green:0.8 blue:0.8 alpha:1].CGColor; if addLine == YES { CALayer *lineLayer = [[CALayer alloc] init]; CGFloat lineHeight = 1.f / [UIScreen mainScreen].scale; lineLayer.frame = CGRectMakeCGRectGetMinXbounds, 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; }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注