iOS 7 TableView like in Settings App on iPad

Question

I want to have a group UITableView with the style same like the iPad Settings application Detail view for iOS 7.

It is a tableView with rounded corner. Please check the attachment for details.

Is some default settings to make it look like that or we need to do some custom drawing for the same.

Any hint in right direction will be appreciated.

Thanks

Answer 1

I've gone ahead and further customized the willDisplayCell to get a better simulation of the cell styles in the settings app.

Objective-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;         }     } } 

Swift

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 } 

Swift 4.2

override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {      if (cell.responds(to: #selector(getter: UIView.tintColor))){         if tableView == self.tableView {             let cornerRadius: CGFloat = 12.0             cell.backgroundColor = .clear             let layer: CAShapeLayer = CAShapeLayer()             let path: CGMutablePath = CGMutablePath()             let bounds: CGRect = cell.bounds             bounds.insetBy(dx: 25.0, dy: 0.0)             var addLine: Bool = false              if indexPath.row == 0 && indexPath.row == ( tableView.numberOfRows(inSection: indexPath.section) - 1) {                 path.addRoundedRect(in: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius)              } else if indexPath.row == 0 {                 path.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))                 path.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.minY), tangent2End: CGPoint(x: bounds.midX, y: bounds.minY), radius: cornerRadius)                 path.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.minY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)                 path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))              } else if indexPath.row == (tableView.numberOfRows(inSection: indexPath.section) - 1) {                 path.move(to: CGPoint(x: bounds.minX, y: bounds.minY))                 path.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.midX, y: bounds.maxY), radius: cornerRadius)                 path.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)                 path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))              } else {                 path.addRect(bounds)                 addLine = true             }              layer.path = path             layer.fillColor = UIColor.white.withAlphaComponent(0.8).cgColor              if addLine {                 let lineLayer: CALayer = CALayer()                 let lineHeight: CGFloat = 1.0 / UIScreen.main.scale                 lineLayer.frame = CGRect(x: bounds.minX + 10.0, 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 = .clear             cell.backgroundView = testView         }     } }