Monday, July 13, 2015

How to Completely Eliminate UITableView Content and Separator Indent on UITableVIewCell

TL;DR

overridefunc viewDidLoad() {

    super.viewDidLoad()

         

    self.tableView.separatorInset = UIEdgeInsetsZero

    self.tableView.layoutMargins = UIEdgeInsetsZero

}

 

override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

    cell.layoutMargins = UIEdgeInsetsZero

}

Versions: OS X 10.10.4 Xcode 6.4 iOS SDK 8.4

Almost every iOS app has at least one and usually more UITableViews and associated UIViewController or UITableViewControllers to manage them.

The view’s ubiquity has to make implementing it very tough and I don’t envy the team that has to account for all the use cases.

Over time, UITableView, UITableViewDelegate, UITableViewDataSource, and UITableViewCell have become very large. Throw in their subclasses, UIScrollView & UIView, and developers have to remember a lot of stuff to get all the behavior they want.

Or in this case, don’t want. UITableView enforces default layout margins and separator margins that are not obvious…once you use AutoLayout.

This is what you see in your storyboard:

UITableView Storyboard

 

This is what you see in the app:

UITableView Insets

Notice the left hand margin? There is no option you can change in the Storyboard to fix it, you just get an indent/margin/inset you didn’t ask for. The storyboard doesn’t show this, so I’m not sure if this is a bug in the Storyboard editor, or in runtime in UITableView.

What’s happened is that I added a few AutoLayout constraints to the left red bar (margins t: -8, l: -8, b: -9).

When I do this, the tableView.layoutMargins appear to be their default value of 8. It looks like without AutoLayout, UITableView resets layoutMargins to UIEdgeInsetsZero, but with AutoLayout, it either wants the default margins or there’s a bug.

You have to add the following code to fix the pre-cell tableView display:

override func viewDidLoad() {

    super.viewDidLoad()

         

    self.tableView.separatorInset = UIEdgeInsetsZero

    self.tableView.layoutMargins = UIEdgeInsetsZero

But that’s not enough to get the cells looking right. Based in part on this StackOverflow post, but with my own testing, you have to implement the delegate callback willDisplayCell like this:

override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

    cell.layoutMargins = UIEdgeInsetsZero

}

Why do we have to set layoutMargins again in willDisplayCell? Apparently the cell’s layoutMargins get reset again right UITableView decides where to draw the separator line, so you have to make them whatever you want. Curiously, willDisplayCell has existed since iOS 2, but I don’t remember needing to use it before iOS 8.

Now we get what we want.

UITableView Insets fixed

Another Workaround That’s Incomplete...

This other StackOverflow post mentions the UIView property preservesSuperviewLayoutMargins. It defaults to NO/false, but for a UITableViewCell is set to YES/true.

You could have mostly solved the problem by explicitly setting that property to NO/false, but it would not have fixed the separator issue.

iOS 9 Beta 

I haven’t run through this on iOS 9 beta, so I don’t know what the the default indent situation is there.