84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
如图:所示
OC纯代码布局TableviewCell 的两端并没有对齐屏幕(箭头中指的线就是屏幕的边框)还有就是上面三个cell.第0行的左上和右上有圆角.第1行的是没有圆角的.第2行的左下和右下有圆角这样的效果怎么封装?快快快,代码贴出来啊...谢谢啦...
OC纯代码布局
左上
右上
没有圆角
左下
右下
业精于勤,荒于嬉;行成于思,毁于随。
圆角的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给带圆角的背景图,然后自定义里面的视图就行。
自定义cell然后重写 setframe
- (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); }]; } @end
Controller关键代码:
#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; } }
圆角的cell,之前iOS 6的时候是这种的(拟物),iOS 7 (扁平化)之后就进行了修改!
主要的实现在tableView的代理方法中 - (void)tableView:willDisplayCell: forRowAtIndexPath: ,绘制table view cell 的背景view。
下面的代码,你可以直接拷贝到控制器中演示效果,如果要集成到你自己的代码中,你需要把 - (void)tableView:willDisplayCell: forRowAtIndexPath: 这个方法中的东西拷贝过去,还要修改table view 的样式是分组和分割线为 none,这些在 - viewDidLoad中你也可以找到。
效果图:
![](http://img.php.cn/upload/image/000/000/000/e60c481a08fa93eafeaf428cb79e6756-0.png)
我之前这种排列也可以不用UITableViewCell,而是直接用自定义UIView.外面整个有圆角,里面放两个按钮即可。
假如用UITableViewCell,那么其圆角最好是UI给带圆角的背景图,然后自定义里面的视图就行。
自定义cell
然后重写 setframe
这个方法比layoutSubviews方法先调用,以至于我在layoutSubviews方法修改了Cell的宽度.
Controller关键代码: