iPhone X TableView Footer problems - ios

Question

Ok, two things first: I'm still new to iOS development and I bet this question was already answered a few times, so feel free to link it to a working solution 😊
Now to the problem: I have a UITableViewController including custom footer views. (They are custom to add a little border on the bottom, the build-in footer is just plain grey). Everything looks ok for the old school iPhones, however on the new X ones I get the following:
Is there a way to extend the footer view all down to the bottom of the view area?

Answer 1

The default layout is like this because of safe area. If you want to let the footer view cover the content I can give you 2 solutions.
Use UITableViewStyleGrouped instead, but the footer view will not static on the screen.
I don't think this is the best practise, but I think the layout should be you are looking for. This is a little bit tricky. The step is:
Create an extend view that the height equal to the bottom safe area.
Put this extend view below the footer view and set the background color same as header view's background color.
Make sure the header view height equals to the bottom safe area height. (This step is the tricky point)
Sample code
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
UILabel *footerView = [[UILabel alloc] init];
footerView.backgroundColor = [UIColor colorWithRed:0.968 green:0.968 blue:0.968 alpha:1]; //Section Header Background Color
footerView.textAlignment = NSTextAlignmentRight;
footerView.text = #"Footer";
UIView *extendView = [[UIView alloc] init];
extendView.translatesAutoresizingMaskIntoConstraints = NO;
extendView.backgroundColor = footerView.backgroundColor;
[footerView addSubview:extendView];
[footerView addConstraints:#[
[NSLayoutConstraint constraintWithItem:extendView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:footerView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0],
[NSLayoutConstraint constraintWithItem:extendView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:footerView
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0],
[NSLayoutConstraint constraintWithItem:extendView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:footerView
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0],
[NSLayoutConstraint constraintWithItem:extendView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:footerView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:self.view.safeAreaInsets.bottom]
]];
return footerView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return self.view.safeAreaInsets.bottom;
}
Screen Record GIF