iOS 8 UITableView separator inset 0 not working
Arg!!! After playing around either doing this in your Cell
subclass:
- (UIEdgeInsets)layoutMargins
{
return UIEdgeInsetsZero;
}
or setting the cell.layoutMargins = UIEdgeInsetsZero;
fixed it for me.
Let's take a moment to understand the problem before blindly charging in to attempt to fix it.
A quick poke around in the debugger will tell you that separator lines are subviews of UITableViewCell
. It seems that the cell itself takes a fair amount of responsibility for the layout of these lines.
iOS 8 introduces the concept of layout margins. By default, a view's layout margins are 8pt
on all sides, and they're inherited from ancestor views.
As best we can tell, when laying out out its separator line, UITableViewCell
chooses to respect the left-hand layout margin, using it to constrain the left inset.
Putting all that together, to achieve the desired inset of truly zero, we need to:
- Set the left layout margin to
0
- Stop any inherited margins overriding that
Put like that, it's a pretty simple task to achieve:
cell.layoutMargins = UIEdgeInsetsZero;
cell.preservesSuperviewLayoutMargins = NO;
Things to note:
- This code only needs to be run once per cell (you're just configuring the cell's properties after all), and there's nothing special about when you choose to execute it. Do what seems cleanest to you.
- Sadly neither property is available to configure in Interface Builder, but you can specify a user-defined runtime attribute for
preservesSuperviewLayoutMargins
if desired. - Clearly, if your app targets earlier OS releases too, you'll need to avoid executing the above code until running on iOS 8 and above.
- Rather than setting
preservesSuperviewLayoutMargins
, you can configure ancestor views (such as the table) to have0
left margin too, but this seems inherently more error-prone as you don't control that entire hierarchy. - It would probably be slightly cleaner to set only the left margin to
0
and leave the others be. - If you want to have a 0 inset on the "extra" separators that
UITableView
draws at the bottom of plain style tables, I'm guessing that will require specifying the same settings at the table level too (haven't tried this one!)
iOS 8.0 introduces the layoutMargins property on cells AND table views.
This property isn't available on iOS 7.0 so you need to make sure you check before assigning it!
The easy fix is to subclass your cell and override the layout margins property as suggested by @user3570727. However you will lose any system behavior like inheriting margins from the Safe Area so I do not recommend the below solution:
(ObjectiveC)
-(UIEdgeInsets)layoutMargins {
return UIEdgeInsetsZero // override any margins inc. safe area
}
(swift 4.2):
override var layoutMargins: UIEdgeInsets { get { return .zero } set { } }
If you don't want to override the property, or need to set it conditionally, keep reading.
In addition to the layoutMargins
property, Apple has added a property to your cell that will prevent it from inheriting your Table View's margin settings. When this property is set, your cells are allowed to configure their own margins independently of the table view. Think of it as an override.
This property is called preservesSuperviewLayoutMargins
, and setting it to NO
will allow the cell's layoutMargin
setting to override whatever layoutMargin
is set on your TableView. It both saves time (you don't have to modify the Table View's settings), and is more concise. Please refer to Mike Abdullah's answer for a detailed explanation.
NOTE: what follows is a clean implementation for a cell-level margin setting, as expressed in Mike Abdullah's answer. Setting your cell's preservesSuperviewLayoutMargins=NO
will ensure that your Table View does not override the cell settings. If you actually want your entire table view to have consistent margins, please adjust your code accordingly.
Setup your cell margins:
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
// Remove seperator inset
if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
[cell setSeparatorInset:UIEdgeInsetsZero];
}
// Prevent the cell from inheriting the Table View's margin settings
if ([cell respondsToSelector:@selector(setPreservesSuperviewLayoutMargins:)]) {
[cell setPreservesSuperviewLayoutMargins:NO];
}
// Explictly set your cell's layout margins
if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
[cell setLayoutMargins:UIEdgeInsetsZero];
}
}
Swift 4:
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
// Remove seperator inset
if cell.responds(to: #selector(setter: UITableViewCell.separatorInset)) {
cell.separatorInset = .zero
}
// Prevent the cell from inheriting the Table View's margin settings
if cell.responds(to: #selector(setter: UITableViewCell.preservesSuperviewLayoutMargins)) {
cell.preservesSuperviewLayoutMargins = false
}
// Explictly set your cell's layout margins
if cell.responds(to: #selector(setter: UITableViewCell.layoutMargins)) {
cell.layoutMargins = .zero
}
}
Setting the preservesSuperviewLayoutMargins
property on your cell to NO should prevent your table view from overriding your cell margins. In some cases, it seems to not function properly.
If all fails, you may brute-force your Table View margins:
-(void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
// Force your tableview margins (this may be a bad idea)
if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)]) {
[self.tableView setSeparatorInset:UIEdgeInsetsZero];
}
if ([self.tableView respondsToSelector:@selector(setLayoutMargins:)]) {
[self.tableView setLayoutMargins:UIEdgeInsetsZero];
}
}
Swift 4:
func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// Force your tableview margins (this may be a bad idea)
if tableView.responds(to: #selector(setter: UITableView.separatorInset)) {
tableView.separatorInset = .zero
}
if tableView.responds(to: #selector(setter: UITableView.layoutMargins)) {
tableView.layoutMargins = .zero
}
}
...and there you go! This should work on iOS 7 and 8.
EDIT: Mohamed Saleh brought to my attention a possible change in iOS 9. You may need to set the Table View's cellLayoutMarginsFollowReadableWidth
to NO
if you want to customize insets or margins. Your mileage may vary, this is not documented very well.
This property only exists in iOS 9 so be sure to check before setting.
if([myTableView respondsToSelector:@selector(setCellLayoutMarginsFollowReadableWidth:)])
{
myTableView.cellLayoutMarginsFollowReadableWidth = NO;
}
Swift 4:
if myTableView.responds(to: #selector(setter: self.cellLayoutMarginsFollowReadableWidth)) {
myTableView.cellLayoutMarginsFollowReadableWidth = false
}
(above code from iOS 8 UITableView separator inset 0 not working)
EDIT: Here's a pure Interface Builder approach:
NOTE: iOS 11 changes & simplifies much of this behavior, an update will be forthcoming...