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?

Do one thing. I don't know this is correct answer. But just try it. Increase size of border height and set labels at bottom of section header. We can customize the section header. One delegate method is there. — phani, Apr 10 '17 at 06:18
You can do one more thing to avoid this issue. Set border color of tableView as background color or tableView's parentView and left padding according to your border Width. This way, you can avoid this issue. — Surjeet Singh, Apr 10 '17 at 06:38
You set the border width to 20 px which hides the top area of section header which has the height of 50 px. In effect you will see the 30 px of the section header. You should either increase the section height and add height offset 20 px for subviews or reduce the border width to see the subviews you placed — Aravind Bhuvanendran, Apr 10 '17 at 06:39

score 0 · Answer 1 · answered Apr 10 '17 at 06:58

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

score 0 · Answer 2 · answered Sep 28 '17 at 08:32

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)

UITableview border hide section cell

2 Answers2