UITableview border hide section cell

Question

I am trying to create UITableview with border, section header and cell. I am using xib files. UITableview and cell created using xib file where "viewForHeaderInSection" used for section header but when I try to set border to UITableview it hide section and cell behind it.

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.

self.tableView.delegate = (id) self;
self.tableView.dataSource = (id) self;
self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
self.tableView.layer.borderWidth = 20.0;
self.tableView.layer.borderColor = [UIColor colorWithRed:204/255.0 green:204/255.0 blue:204/255.0 alpha:1.0f].CGColor;

}

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{

NSDictionary *dict = [[NSDictionary alloc] initWithDictionary:[self.array objectAtIndex:section] copyItems:YES];

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 5, tableView.frame.size.width, 50)];
view.backgroundColor = [UIColor colorWithRed:81/255.0 green:190/255.0 blue: 168/255.0 alpha:1.0f];

UIView *seperatoreView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 10)];
seperatoreView.backgroundColor = [UIColor colorWithRed:204/255.0 green:204/255.0 blue:204/255.0 alpha:1.0f];

[view addSubview:seperatoreView];

UILabel *numberLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 100, 30)];
numberLabel.backgroundColor = [UIColor clearColor];
numberLabel.text = [NSString stringWithFormat:@"%@",[dict objectForKey:@"key"]];
numberLabel.textColor = [UIColor whiteColor];
[numberLabel setFont:[UIFont boldSystemFontOfSize:17.0f]];

[view addSubview:numberLabel];

NSDateFormatter *formate = [[NSDateFormatter alloc] init];
[formate setDateFormat:@"yyyy-MM-dd"];
NSDate *SDate = [formate dateFromString:[dict objectForKey:@"sDateKey"]];
NSDate *EDate = [formate dateFromString:[dict objectForKey:@"eDateKey"]];

[formate setDateFormat:@"MMM d"];
NSString *StartDateStr = [formate stringFromDate:SDate];
NSString *EndDateStr = [formate stringFromDate:EDate];

if([StartDateStr isEqual:[NSNull null]]){
    StartDateStr = @"";

}
if([EndDateStr isEqual:[NSNull null]]){

    EndDateStr = @"";
}

UILabel *weekDateLabel = [[UILabel alloc] initWithFrame:CGRectMake(view.frame.size.width-140, 10, 150, 30)];
weekDateLabel.backgroundColor = [UIColor clearColor];
weekDateLabel.text = [NSString stringWithFormat:@"%@ - %@",StartDateStr,EndDateStr];
weekDateLabel.textColor = [UIColor whiteColor];
[weekDateLabel setFont:[UIFont boldSystemFontOfSize:17.0f]];

[view addSubview:weekDateLabel];

return view;
}

I want UITableview border but with full section header and cell, Do anyone know how to achieve it?

Answer 1

You could try and fake the behaviour that you want. Instead of using borders, you will have to use UIView added on all four corners of the UITableViewCell with appropriate height/width of each UIView and gray color as background color. Now in your cellForRow you will have to check the position of the cell and based on that hide/unhide the top and bottom UIView (The left and right side UIView will always be visible). Something like this:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    .....
    if(indexPath.row == 0){

        [cell.topBorderView setHidden: NO];
        [cell.bottomBorderView setHidden: YES];

    }else if(indexPath.row == dataSourceArray.count - 1){

        [cell.topBorderView setHidden: YES];
        [cell.bottomBorderView setHidden: NO];

    }else{

        [cell.topBorderView setHidden: YES];
        [cell.bottomBorderView setHidden: YES];
    }

    return cell;
} 

And of course remove the border on the entire UITableView

Answer 2

Your borderWidth is too much what you have to add is for Profile picture in Cell you should set profile Picture imageView left with increment of Border width.

let margin_left =  BorderWidth  + space_from_left. 
ProfileImageView.frame = CGRect(x: margin_left,y:Y,width:yourRequiredWidth,  height:requiredHeight)

and same for section header label

 let margin_left =  BorderWidth  + space_from_left. 
    headerLabel.frame = CGRect(x: margin_left,y:Y, width:yourRequiredWidth,  height:requiredHeight)