如图:所示
OC纯代码布局TableviewCell 的两端并没有对齐屏幕(箭头中指的线就是屏幕的边框)
还有就是上面三个cell.
第0行的左上和右上有圆角.第1行的是没有圆角的.第2行的左下和右下有圆角
这样的效果怎么封装?
快快快,代码贴出来啊...谢谢啦...
自定义cell
然后重写 setframe
圆角的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
效果图：
我之前这种排列也可以不用UITableViewCell,而是直接用自定义UIView.外面整个有圆角，里面放两个按钮即可。
假如用UITableViewCell，那么其圆角最好是UI给带圆角的背景图，然后自定义里面的视图就行。
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath这个方法比layoutSubviews方法先调用,以至于我在layoutSubviews方法修改了Cell的宽度.
#import "LMSMeViewCell.h"
@implementation LMSMeViewCell
- (void)layoutSubviews {
[super layoutSubviews];
//修改cell的frame
CGRect rect = self.frame;
//如果已经修改过就不用修改了
if (self.frame.size.width == SCREEN_WIDTH) {
NSLog(@"%f",SCREEN_WIDTH);
rect = CGRectMake(self.frame.origin.x + 10, self.frame.origin.y, self.frame.size.width - 20, self.frame.size.height);
}
self.frame = rect;
NSLog(@"**********%@",NSStringFromCGRect(rect));
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.equalTo(self.contentView).offset(10);
make.width.height.offset(22);
make.centerY.equalTo(self.contentView);
}];
[self.textLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.imageView.mas_right).offset(20);
make.centerY.equalTo(self.imageView.mas_centerY);
}];
}
@endController关键代码:
#pragma mark- cell 将要显示的时候调用这个方法，就在这个方法内进行圆角绘制
/**
本质：就是修改cell的背景view，这个view的layer层自己分局cell的类型（顶，底和中间）来绘制*/
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"___");
if ([cell respondsToSelector:@selector(tintColor)])
{
CGFloat cornerRadius = 6.f;//圆角大小
cell.backgroundColor = [UIColor clearColor];
CAShapeLayer *layer = [[CAShapeLayer alloc] init];
CGMutablePathRef pathRef = CGPathCreateMutable();
CGRect bounds = CGRectInset(cell.bounds, 0, 0);
NSLog(@"___%@",NSStringFromCGRect(bounds));
// CGRect bounds = CGRectInset(cell.frame, 0, 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 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 = 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;
}
}