Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Border around UITableView Section

Tags:

How we can have the border around each section of tableview? Attached is the image to show what I am looking for. If you look at the image, it has a border around each tableview section.

enter image description here

like image 986
itsaboutcode Avatar asked Aug 06 '13 11:08

itsaboutcode


1 Answers

For this issue I made an adaptation of jvanmetre answer for rounding tableviews corners, just add the tableView:willDisplayCell:forRowAtIndexPath: delegate method with the following code (a simple copy/paste should work), it should work for grouped tables too. I commented where you should set the width and color of the border.

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

Also, remember to set the separator property of the table to none in the Interface Builder, (it's by default to single line), if you are creating the table programmatically you should set the property like this

yourTableView.separatorStyle = UITableViewCellSeparatorStyleNone 
like image 71
Boris Avatar answered Oct 04 '22 01:10

Boris