iOS 7 TableView就像在iPad上的设置应用程序

我想拥有一个类似于iOS 7的“iPad设置”应用程序详细信息视图的组UITableView。

这是一个圆angular的tableView。 详情请查看附件。

是一些默认设置，使其看起来像，或我们需要做一些自定义绘图相同。

任何提示正确的方向将不胜感激。

谢谢

Answer 1

我已经提前进一步定制了willDisplayCell，以更好地模拟设置应用程序中的单元格样式。

目标C

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { if ([cell respondsToSelector:@selector(tintColor)]) { if (tableView == self.tableView) { 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); layer.fillColor = [UIColor colorWithWhite:1.f alpha:0.8f].CGColor; if (addLine == YES) { CALayer *lineLayer = [[CALayer alloc] init]; CGFloat lineHeight = (1.f / [UIScreen mainScreen].scale); lineLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-lineHeight, bounds.size.width-10, 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; } } } 

迅速

 override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { if (cell.respondsToSelector(Selector("tintColor"))){ if (tableView == self.tableView) { let cornerRadius : CGFloat = 12.0 cell.backgroundColor = UIColor.clearColor() var layer: CAShapeLayer = CAShapeLayer() var pathRef:CGMutablePathRef = CGPathCreateMutable() var bounds: CGRect = CGRectInset(cell.bounds, 25, 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 layer.fillColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 0.8).CGColor if (addLine == true) { var lineLayer: CALayer = CALayer() var lineHeight: CGFloat = (1.0 / UIScreen.mainScreen().scale) lineLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-lineHeight, bounds.size.width-10, 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 } } } 

Swift 3

 func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { let cornerRadius: CGFloat = 5 cell.backgroundColor = .clear let layer = CAShapeLayer() let pathRef = CGMutablePath() let bounds = cell.bounds.insetBy(dx: 20, dy: 0) var addLine = 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: .init(x: bounds.minX, y: bounds.maxY)) pathRef.addArc(tangent1End: .init(x: bounds.minX, y: bounds.minY), tangent2End: .init(x: bounds.midX, y: bounds.minY), radius: cornerRadius) pathRef.addArc(tangent1End: .init(x: bounds.maxX, y: bounds.minY), tangent2End: .init(x: bounds.maxX, y: bounds.midY), radius: cornerRadius) pathRef.addLine(to: .init(x: bounds.maxX, y: bounds.maxY)) addLine = true } else if indexPath.row == tableView.numberOfRows(inSection: indexPath.section) - 1 { pathRef.move(to: .init(x: bounds.minX, y: bounds.minY)) pathRef.addArc(tangent1End: .init(x: bounds.minX, y: bounds.maxY), tangent2End: .init(x: bounds.midX, y: bounds.maxY), radius: cornerRadius) pathRef.addArc(tangent1End: .init(x: bounds.maxX, y: bounds.maxY), tangent2End: .init(x: bounds.maxX, y: bounds.midY), radius: cornerRadius) pathRef.addLine(to: .init(x: bounds.maxX, y: bounds.minY)) } else { pathRef.addRect(bounds) addLine = true } layer.path = pathRef layer.fillColor = UIColor(white: 1, alpha: 0.8).cgColor if (addLine == true) { let lineLayer = CALayer() let lineHeight = 1.0 / UIScreen.main.scale lineLayer.frame = CGRect(x: bounds.minX + 10, y: bounds.size.height - lineHeight, width: bounds.size.width - 10, height: lineHeight) lineLayer.backgroundColor = tableView.separatorColor?.cgColor layer.addSublayer(lineLayer) } let testView = UIView(frame: bounds) testView.layer.insertSublayer(layer, at: 0) testView.backgroundColor = .clear cell.backgroundView = testView } 

Answer 2

回答@NarasimhaiahKolli，关于如何设置单元格的背景视图，使整个单元格看起来不像突出显示。 希望这可以帮助。

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { InfoCell *cell; ... if ([cell respondsToSelector:@selector(tintColor)]) { cell.selectedBackgroundView = [self backgroundCellView:cell indexPath:indexPath tableView:tableView]; } return cell; } - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { if ([cell respondsToSelector:@selector(tintColor)]) { cell.backgroundColor = UIColor.clearColor; UIColor *cellColor = [UIColor colorWithWhite:0.90f alpha:.95f]; CAShapeLayer *layer = [self tableView:tableView layerForCell:cell forRowAtIndexPath:indexPath withColor:cellColor]; CGRect bounds = CGRectInset(cell.bounds, 10, 0); UIView *testView = [[UIView alloc] initWithFrame:bounds]; [testView.layer insertSublayer:layer atIndex:0]; testView.backgroundColor = UIColor.clearColor; cell.backgroundView = testView; } } - (UIView *)backgroundCellView:(InfoCell *)cell indexPath:(NSIndexPath *)indexPath tableView:(UITableView *)tableView { UIColor *cellColor = [UIColor lightGrayColor]; CAShapeLayer *layer = [self tableView:tableView layerForCell:cell forRowAtIndexPath:indexPath withColor:cellColor]; CGRect bounds = CGRectInset(cell.bounds, 10, 0); UIView *testView = [[UIView alloc] initWithFrame:bounds]; [testView.layer insertSublayer:layer atIndex:0]; return testView; } - (CAShapeLayer *)tableView:(UITableView *)tableView layerForCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath withColor:(UIColor *)color { CGFloat cornerRadius = 5.f; 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); // layer.fillColor = [UIColor colorWithWhite:1.f alpha:1.0f].CGColor; layer.fillColor = color.CGColor; if (addLine == YES) { CALayer *lineLayer = [[CALayer alloc] init]; CGFloat lineHeight = (1.f / [UIScreen mainScreen].scale); lineLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-lineHeight, bounds.size.width-10, lineHeight); lineLayer.backgroundColor = tableView.separatorColor.CGColor; [layer addSublayer:lineLayer]; } return layer; } 

Answer 3

@jvanmetre的答案很好，它的工作原理。 build立在它的顶部和@SergiySalyukbuild议在评论中。 我已经更新了代码来使用UIBezierPath，而不是使它更容易理解并稍微快一点。

我的版本还修复了分隔符错误，并添加了一个适合单元格的选定背景视图。

请记住将您的表视图设置为无分隔符： tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

Objective-C的

 - (void)tableView:(UITableView*)tableView willDisplayCell:(UITableViewCell*)cell forRowAtIndexPath:(NSIndexPath*)indexPath { // Set transparent background so we can see the layer cell.backgroundColor = UIColor.clearColor; // Declare two layers: one for the background and one for the selecetdBackground CAShapeLayer *backgroundLayer = [CAShapeLayer layer]; CAShapeLayer *selectedBackgroundLayer = [[CAShapeLayer alloc] init]; CGRect bounds = CGRectInset(cell.bounds, 0, 0);//Cell bounds feel free to adjust insets. BOOL addSeparator = NO;// Controls if we should add a seperator // Determine which corners should be rounded if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) { // This is the only row in its section, round all corners backgroundLayer.path = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(7, 7)].CGPath; } else if (indexPath.row == 0) { // First row, round the top two corners. backgroundLayer.path = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(7, 7)].CGPath; addSeparator = YES; } else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) { // Bottom row, round the bottom two corners. backgroundLayer.path = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(7, 7)].CGPath; } else { // Somewhere between the first and last row don't round anything but add a seperator backgroundLayer.path = [UIBezierPath bezierPathWithRect:bounds].CGPath;// So we have a background addSeparator = YES; } // Copy the same path for the selected background layer selectedBackgroundLayer.path = CGPathCreateCopy(backgroundLayer.path); // Yay colors! backgroundLayer.fillColor = [UIColor colorWithWhite:1.f alpha:0.8f].CGColor; selectedBackgroundLayer.fillColor = [UIColor grayColor].CGColor; // Draw seperator if necessary if (addSeparator == YES) { CALayer *separatorLayer = [CALayer layer]; CGFloat separatorHeight = (1.f / [UIScreen mainScreen].scale); separatorLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-separatorHeight, bounds.size.width-10, separatorHeight); separatorLayer.backgroundColor = tableView.separatorColor.CGColor; [backgroundLayer addSublayer:separatorLayer]; } // Create a UIView from these layers and set them to the cell's .backgroundView and .selectedBackgroundView UIView *backgroundView = [[UIView alloc] initWithFrame:bounds]; [backgroundView.layer insertSublayer:backgroundLayer atIndex:0]; backgroundView.backgroundColor = UIColor.clearColor; cell.backgroundView = backgroundView; UIView *selectedBackgroundView = [[UIView alloc] initWithFrame:bounds]; [selectedBackgroundView.layer insertSublayer:selectedBackgroundLayer atIndex:0]; selectedBackgroundView.backgroundColor = UIColor.clearColor; cell.selectedBackgroundView = selectedBackgroundView; } 

Answer 4

我试图在tableviewcells上实现相同的设置应用程序四舍五入的外观。 我的答案也是基于如何设置一个UIView的左上angular和右上angularcornerRadius的SO回答？ 。

 - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath]; [cell setClipsToBounds:YES]; // rowsArray has cell titles for current group NSArray *rowsArray = [self.sectionsArray objectAtIndex:indexPath.section]; [[cell textLabel] setText:[rowsArray objectAtIndex:indexPath.row]]; float cornerSize = 11.0; // change this if necessary // round all corners if there is only 1 cell if (indexPath.row == 0 && [rowsArray count] == 1) { UIBezierPath *maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft | UIRectCornerBottomRight) cornerRadii:CGSizeMake(cornerSize, cornerSize)]; CAShapeLayer *mlayer = [[CAShapeLayer alloc] init]; mlayer.frame = cell.bounds; mlayer.path = maskPath.CGPath; cell.layer.mask = mlayer; } // round only top cell and only top-left and top-right corners else if (indexPath.row == 0) { UIBezierPath *maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(cornerSize, cornerSize)]; CAShapeLayer *mlayer = [[CAShapeLayer alloc] init]; mlayer.frame = cell.bounds; mlayer.path = maskPath.CGPath; cell.layer.mask = mlayer; } // round bottom-most cell of group and only bottom-left and bottom-right corners else if (indexPath.row == [rowsArray count] - 1) { UIBezierPath *maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight) cornerRadii:CGSizeMake(cornerSize, cornerSize)]; CAShapeLayer *mlayer = [[CAShapeLayer alloc] init]; mlayer.frame = cell.bounds; mlayer.path = maskPath.CGPath; cell.layer.mask = mlayer; } } 

Answer 5

我创build了一个名为addRoundedCornersWithRadius:(CGFloat)radius ForCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath的方法addRoundedCornersWithRadius:(CGFloat)radius ForCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath将在每个部分的顶部和底部创build圆angular。

使用UITableViewCell的maskView属性的好处是，当您select单元格时，圆angular仍然可见。

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CellIdentifier"]; [cell.textLabel setText:[NSString stringWithFormat:@"Row %d in Section %d", indexPath.row, indexPath.section]]; [tableView addRoundedCornersWithRadius:12.0f ForCell:cell atIndexPath:indexPath]; return cell; } - (void)addRoundedCornersWithRadius:(CGFloat)radius ForCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath { NSInteger MBRows = [self numberOfRowsInSection:indexPath.section] - 1; CAShapeLayer *MBLayer = [[CAShapeLayer alloc] init]; CGRect cellBounds = CGRectMake(0, 0, self.bounds.size.width, cell.bounds.size.height); BOOL shouldAddSeperator = NO; if (indexPath.row == 0 && indexPath.row == MBRows) { [MBLayer setPath:[UIBezierPath bezierPathWithRoundedRect:cellBounds cornerRadius:radius].CGPath]; } else if (indexPath.row == 0) { [MBLayer setPath:[UIBezierPath bezierPathWithRoundedRect:cellBounds byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight) cornerRadii:CGSizeMake(radius, radius)].CGPath]; shouldAddSeperator = YES; } else if (indexPath.row == MBRows) { [MBLayer setPath:[UIBezierPath bezierPathWithRoundedRect:cellBounds byRoundingCorners:(UIRectCornerBottomLeft|UIRectCornerBottomRight) cornerRadii:CGSizeMake(radius, radius)].CGPath]; } else { [MBLayer setPath:[UIBezierPath bezierPathWithRect:cell.bounds].CGPath]; shouldAddSeperator = YES; } [cell setMaskView:[[UIView alloc] initWithFrame:cell.bounds]]; [cell.maskView.layer insertSublayer:MBLayer atIndex:0]; if (shouldAddSeperator == YES) { CGFloat seperator = (1.0f / [UIScreen mainScreen].scale); CALayer *cellSeperator = [[CALayer alloc] init]; [cellSeperator setFrame:CGRectMake(15.0f, cell.bounds.size.height - seperator, cell.bounds.size.width - 15.0f, seperator)]; [cellSeperator setBackgroundColor:self.separatorColor.CGColor]; [cell.layer addSublayer:cellSeperator]; } [cell.maskView.layer setMasksToBounds:YES]; [cell setClipsToBounds:YES]; } 

---

Answer 6

在尝试了一些答案之后，我决定在整个UITableView和UITableViewCell上实现一个完整的子类来复制iOS 7中的圆angular分组表格视图。

https://github.com/TimOliver/TORoundedTableView

它最终成为一个非常复杂的过程：

• 我不得不layoutSubviews UITableView layoutSubviews来重新布局每个单元格和附件视图，以便它们不再是边缘到边缘。
• 我不得不UITableViewCell子类，以删除顶部和底部的分隔线细部视图（但保留部分内的部分未触及）。
• 然后我创build了一个自定义的UITableViewCell背景视图，可以select在顶部和底部有圆angular，用于每个部分的第一个和最后一个单元格。 这些元素必须是CALayer以避免UITableView在用户点击单元格时改变背景视图颜色的隐式行为。
• 因为他们现在是CALayer实例，不响应layoutSubviews ，所以我不得不做一些核心animation修补，以确保顶部和底部单元格的大小以与用户旋转设备时其他单元格相同的速度进行调整。

总而言之，这是可以做到的，但是由于它需要一点点的努力，并且花费less量的性能（因为它不断地与苹果的代码试图设置所有的东西背道而驰），所以最好是向苹果公司提出要求正式揭露这种风格。 在此之前，请随时使用我的图书馆。 🙂

Answer 7

恐怕这似乎不是一个简单的方法。 你将不得不自定义你的UITableViewCell，就像这样工作：

设置你的tableView的风格分组。

设置您的TableView背景颜色清除颜色。

在你的 – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)使单元格背景清晰，并创build一个UIView所需的圆angular作为背景。 像这样的东西：

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"]; if(cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"]; } [cell setBackgroundColor:[UIColor clearColor]]; UIView *roundedView = [[UIView alloc] initWithFrame:cell.frame]; [roundedView setBackgroundColor:[UIColor whiteColor]]; roundedView.layer.cornerRadius = 10.0; [[cell contentView] addSubview:roundedView]; return cell; } 

你可能需要进一步的打磨，但这是主要的想法。

Answer 8

我想要达到相同的效果，但每个部分都有边框（iOS6中的线条）。 由于我没有find一个简单的修改build议的解决scheme，我想出了我自己的。 这是罗伯托·弗拉兹在这个话题中给出的答案的修改。 我创build了一个inheritance自UITableViewCell的自定义类。 在其中我添加了一个适当大小的容器视图（在我的情况下，两边15px缩小）。 比在课堂上我做到了这一点：

 - (void)layoutSubviews { [super layoutSubviews]; CGFloat cornerRadius = 10.0f; self.vContainerView.layer.cornerRadius = cornerRadius; self.vContainerView.layer.masksToBounds = YES; self.vContainerView.layer.borderWidth = 1.0f; if (self.top && self.bottom) { // nothing to do - cell is initialized in prepareForReuse } else if (self.top) { // cell is on top - extend height to hide bottom line and corners CGRect frame = self.vContainerView.frame; frame.size.height += cornerRadius; self.vContainerView.frame = frame; self.vSeparatorLine.hidden = NO; } else if (self.bottom) { // cell is on bottom - extend height and shift container view up to hide top line and corners CGRect frame = self.vContainerView.frame; frame.size.height += cornerRadius; frame.origin.y -= cornerRadius; self.vContainerView.frame = frame; self.vSeparatorLine.hidden = YES; } else { // cell is in the middle - extend height twice the height of corners and shift container view by the height of corners - therefore hide top and bottom lines and corners. CGRect frame = self.vContainerView.frame; frame.size.height += (2 * cornerRadius); frame.origin.y -= cornerRadius; self.vContainerView.frame = frame; self.vSeparatorLine.hidden = NO; } } - (void)prepareForReuse { // establish original values when cell is reused CGRect frame = self.vBorderView.frame; frame.size.height = BORDER_VIEW_HEIGHT; frame.origin.y = 0; self.vBorderView.frame = frame; self.vSeparatorLine.hidden = YES; } 

然后在你的数据源中，你这样做：

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { ... // only one cell in section - must be rounded on top & bottom if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) { cell.top = YES; cell.bottom = YES; } // first cell - must be rounded on top else if (indexPath.row == 0) { cell.top = YES; cell.bottom = NO; } // last cell - must be rounded on bottom else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) { cell.top = NO; cell.bottom = YES; } else { cell.top = NO; cell.top = NO; } return cell; } 

瞧 – 你有圆angular和边界在你的部分。

希望这可以帮助！

PS进行了一些编辑，因为我发现原始代码中的一些错误 – 主要是我没有在所有情况下设置所有的值，当单元格被重用时导致一些非常惊人的效果:)

Answer 9

我的答案可能太晚了，但对于Swift版本（任何），它肯定是有用的，并且非常容易使用它。

 func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { if (tableView == self.tableViewMovies) { //Top Left Right Corners let maskPathTop = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 5.0, height: 5.0)) let shapeLayerTop = CAShapeLayer() shapeLayerTop.frame = cell.bounds shapeLayerTop.path = maskPathTop.cgPath //Bottom Left Right Corners let maskPathBottom = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 5.0, height: 5.0)) let shapeLayerBottom = CAShapeLayer() shapeLayerBottom.frame = cell.bounds shapeLayerBottom.path = maskPathBottom.cgPath if (indexPath as NSIndexPath).section == 0 { if indexPath.row == 0 { cell.layer.mask = shapeLayerTop }else if indexPath.row == 2 { cell.layer.mask = shapeLayerBottom } }else if (indexPath as NSIndexPath).section == 1 { if indexPath.row == 0 { cell.layer.mask = shapeLayerTop }else { cell.layer.mask = shapeLayerBottom } }else if (indexPath as NSIndexPath).section == 2 { if indexPath.row == 0 { cell.layer.mask = shapeLayerTop }else if indexPath.row == 2 { cell.layer.mask = shapeLayerBottom } } } } 

PS：我已经使用了Swift 3.0的以下代码。

Answer 10

  func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { if (tableView == self.orderDetailsTableView) { //Top Left Right Corners let maskPathTop = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.TopLeft, .TopRight], cornerRadii: CGSize(width: 5.0, height: 5.0)) let shapeLayerTop = CAShapeLayer() shapeLayerTop.frame = cell.bounds shapeLayerTop.path = maskPathTop.CGPath //Bottom Left Right Corners let maskPathBottom = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.BottomLeft, .BottomRight], cornerRadii: CGSize(width: 5.0, height: 5.0)) let shapeLayerBottom = CAShapeLayer() shapeLayerBottom.frame = cell.bounds shapeLayerBottom.path = maskPathBottom.CGPath //All Corners let maskPathAll = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.TopLeft, .TopRight, .BottomRight, .BottomLeft], cornerRadii: CGSize(width: 5.0, height: 5.0)) let shapeLayerAll = CAShapeLayer() shapeLayerAll.frame = cell.bounds shapeLayerAll.path = maskPathAll.CGPath if (indexPath.row == 0 && indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1) { cell.layer.mask = shapeLayerAll } else if (indexPath.row == 0) { cell.layer.mask = shapeLayerTop } else if (indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1) { cell.layer.mask = shapeLayerBottom } } } 

swift的工作代码…实际上我们正在做的是，如果部分只有一行，那么我们在所有方面做，如果部分有多行，那么我们做第一行的顶部和最后一行的底部…属性BottomLeft，BottomRight，topLeft，TopRight应该是types矩形的angular落（当你input时xcode的build议…有另一个同名的属性内容angular落，所以检查）

Answer 11

添加这个删除tableview中的第一行self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

Answer 12

这个Git项目就是这样做的。 https://github.com/KingIsulgard/iOS-InApp-Settings-TableView

这是非常容易使用和教程如何实现它是非常简单的。

Answer 13

这将在swift 3上工作，您还可以自定义边框的颜色：

UITableView部分周围的圆angular和边框

Answer 14

此代码将为整个表格视图设置圆angular，而不是单个单元格。

 UIView *roundedView = [[UIView alloc] initWithFrame:CGRectInset(table.frame, 5, 0)]; roundedView.backgroundColor = [UIColor colorWithWhite:1.f alpha:0.8f]; roundedView.layer.cornerRadius = 5.f; [self.view addSubview:roundedView]; [roundedView release]; [self.view addSubview:table]; 

并清除cellForRow中每个单元格的背景颜色

 cell.backgroundColor=[UIColor clearColor];