UITableView部分周围的边框

我们如何可以在tableview的每个部分都有边框？ 附上图片来显示我在找什么。 如果您查看图像，则每个tableview部分都有一个边框。

Answer 1

对于这个问题，我做了四舍五入的tableviewangular落jvanmetre答案，只需添加tableView:willDisplayCell:forRowAtIndexPath:委托方法与下面的代码（一个简单的复制/粘贴应该工作），它应该也适用于分组表。 我评论你应该在哪里设置边框的宽度和颜色。

 - (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) { 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) { 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 { CGPathAddRect(pathRef, nil, bounds); addLine = YES; } layer.path = pathRef; CFRelease(pathRef); //set the border color layer.strokeColor = [UIColor lightGrayColor].CGColor; //set the border width layer.lineWidth = 1; layer.fillColor = [UIColor colorWithWhite:1.f alpha:1.0f].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 = tableView.separatorColor.CGColor; [layer addSublayer:lineLayer]; } UIView *testView = [[UIView alloc] initWithFrame:bounds]; [testView.layer insertSublayer:layer atIndex:0]; testView.backgroundColor = UIColor.clearColor; cell.backgroundView = testView; } } 

此外，请记住在Interface Builder中将表的分隔符属性设置为none（默认为单行），如果以编程方式创build表，则应该像这样设置属性

 yourTableView.separatorStyle = UITableViewCellSeparatorStyleNone 

Answer 2

这里是阿萨德的答案更新到迅速3

 func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { if (cell.responds(to: #selector(getter: UIView.tintColor))) { let cornerRadius: CGFloat = 5 cell.backgroundColor = UIColor.clear let layer: CAShapeLayer = CAShapeLayer() let pathRef: CGMutablePath = CGMutablePath() let bounds: CGRect = cell.bounds.insetBy(dx: 10, dy: 0) var addLine: Bool = false if (indexPath.row == 0 && indexPath.row == tableView.numberOfRows(inSection: indexPath.section)-1) { pathRef.__addRoundedRect(transform: nil, rect: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius) } else if (indexPath.row == 0) { pathRef.move(to: CGPoint(x:bounds.minX,y:bounds.maxY)) pathRef.addArc(tangent1End: CGPoint(x:bounds.minX,y:bounds.minY), tangent2End: CGPoint(x:bounds.midX,y:bounds.minY), radius: cornerRadius) pathRef.addArc(tangent1End: CGPoint(x:bounds.maxX,y:bounds.minY), tangent2End: CGPoint(x:bounds.maxX,y:bounds.midY), radius: cornerRadius) pathRef.addLine(to: CGPoint(x:bounds.maxX,y:bounds.maxY)) addLine = true; } else if (indexPath.row == tableView.numberOfRows(inSection: indexPath.section)-1) { pathRef.move(to: CGPoint(x:bounds.minX,y:bounds.minY)) pathRef.addArc(tangent1End: CGPoint(x:bounds.minX,y:bounds.maxY), tangent2End: CGPoint(x:bounds.midX,y:bounds.maxY), radius: cornerRadius) pathRef.addArc(tangent1End: CGPoint(x:bounds.maxX,y:bounds.maxY), tangent2End: CGPoint(x:bounds.maxX,y:bounds.midY), radius: cornerRadius) pathRef.addLine(to: CGPoint(x:bounds.maxX,y:bounds.minY)) } else { pathRef.addRect(bounds) addLine = true } layer.path = pathRef //CFRelease(pathRef) //set the border color layer.strokeColor = UIColor.lightGray.cgColor; //set the border width layer.lineWidth = 1 layer.fillColor = UIColor(white: 1, alpha: 1.0).cgColor if (addLine == true) { let lineLayer: CALayer = CALayer() let lineHeight: CGFloat = (1 / UIScreen.main.scale) lineLayer.frame = CGRect(x:bounds.minX, y:bounds.size.height-lineHeight, width:bounds.size.width, height:lineHeight) lineLayer.backgroundColor = tableView.separatorColor!.cgColor layer.addSublayer(lineLayer) } let testView: UIView = UIView(frame:bounds) testView.layer.insertSublayer(layer, at: 0) testView.backgroundColor = UIColor.clear cell.backgroundView = testView } } 

Answer 3

你可以使用UITableViewStyleGrouped tableview部分样式。

Answer 4

这是接受答案的迅捷版本。

 func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { if (cell.respondsToSelector("tintColor")) { var cornerRadius: CGFloat = 5; cell.backgroundColor = UIColor.clearColor() var layer: CAShapeLayer = CAShapeLayer() var pathRef: CGMutablePathRef = CGPathCreateMutable() var bounds: CGRect = CGRectInset(cell.bounds, 10, 0) var addLine: Bool = false if (indexPath.row == 0 && indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1) { CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius); } else if (indexPath.row == 0) { 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 = true; } else if (indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1) { 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 { CGPathAddRect(pathRef, nil, bounds); addLine = true; } layer.path = pathRef; //CFRelease(pathRef); //set the border color layer.strokeColor = UIColor.lightGrayColor().CGColor; //set the border width layer.lineWidth = 1; layer.fillColor = UIColor(white: 1, alpha: 1.0).CGColor; if (addLine == true) { var lineLayer: CALayer = CALayer(); var lineHeight: CGFloat = (1 / UIScreen.mainScreen().scale); lineLayer.frame = CGRectMake(CGRectGetMinX(bounds), bounds.size.height-lineHeight, bounds.size.width, lineHeight); lineLayer.backgroundColor = tableView.separatorColor!.CGColor; layer.addSublayer(lineLayer); } var testView: UIView = UIView(frame:bounds) testView.layer.insertSublayer(layer, atIndex: 0) testView.backgroundColor = UIColor.clearColor() cell.backgroundView = testView } } 

Answer 5

这是另一种可能帮助别人的方法。 它使用预定义的颜色和宽度为每个部分绘制边框，而不更改单元格的其他属性。 它不会给你一个圆形的部分（可能会相应地修改），但是对绘制的线条有很好的控制。 该方法还处理设备旋转。

 typedef enum CellBorderMask{ CellBorderMaskLeft = 1 << 0, CellBorderMaskRigth = 1 << 1, CellBorderMaskTop = 1 << 2, CellBorderMaskBottom = 1 << 3 }CellBorderMask; - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { CellBorderMask mask; if (indexPath.row == 0){ mask |= CellBorderMaskTop; } if(indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) { mask |= CellBorderMaskBottom; } mask |= CellBorderMaskRigth | CellBorderMaskLeft; [self addBorder:mask forView:cell.contentView]; } -(void)addBorder:(CellBorderMask)mask forView:(UIView *)view{ float onePixel = (1.f / [UIScreen mainScreen].scale); float lineWidth = 1 * onePixel; CGColorRef cgBorderColor = [UIColor redColor].CGColor; CALayer *topBorder = [CALayer layer]; CALayer *bottomBorder = [CALayer layer]; CALayer *leftBorder = [CALayer layer]; CALayer *rightBorder = [CALayer layer]; //tag layers so it's possible to find and remove them later topBorder.name = @"Border"; bottomBorder.name = @"Border"; leftBorder.name = @"Border"; rightBorder.name = @"Border"; //remove previously set border layers so they doesn't produce unwanted effect on orientation change [self cleanUpOldBorderLayers:view]; topBorder.frame = CGRectMake(0.0f, 0.0f, view.bounds.size.width, lineWidth); topBorder.backgroundColor = cgBorderColor; bottomBorder.frame = CGRectMake(0.0f, view.bounds.size.height - lineWidth, view.bounds.size.width, lineWidth); bottomBorder.backgroundColor = cgBorderColor; leftBorder.frame = CGRectMake(0.0f, 0.0f, lineWidth, view.bounds.size.height); leftBorder.backgroundColor = cgBorderColor; rightBorder.frame = CGRectMake(view.bounds.size.width - lineWidth, 0.0f, lineWidth, view.bounds.size.height); rightBorder.backgroundColor = cgBorderColor; if(mask & CellBorderMaskTop){ [view.layer addSublayer:topBorder]; } if(mask & CellBorderMaskBottom){ [view.layer addSublayer:bottomBorder]; } if(mask & CellBorderMaskLeft){ [view.layer addSublayer:leftBorder]; } if(mask & CellBorderMaskRigth){ [view.layer addSublayer:rightBorder]; } } -(void)cleanUpOldBorderLayers:(UIView *)view{ NSMutableArray *layerArray = [NSMutableArray new]; for (CALayer *layer in view.layer.sublayers) { if([@"Border" isEqualToString:layer.name]){ [layerArray addObject:layer]; } } for (CALayer *layer in layerArray) { [layer removeFromSuperlayer]; } } -(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation{ //need to trigger tableView:willDisplayCell: method on orientation change. //Suggest a better method for this if there is one [self.tableView reloadData]; } 

我使用tableView的reloadData方法重绘细胞，我认为这不是最好的方法。 请在意见中的替代方法的build议，我会更新代码。

要将边框添加到页眉/页脚，只需在viewForHeaderInSection / viewForFooterInSection委托方法中创build一个自定义视图，然后在将视图从addBorder:forView返回之前将视图传递给addBorder:forView方法。