iOS Dev Hack of the Week: Extending UITableView Cell Separators to Table Edges
The iOS UITableView default style extends the cell separators all the way to the right edge, but not all the way to the left edge. However, you, or your designers, might decide that your app would look better with table separators taking up the full width of the screen. Something like this, for example:
Unfortunately, it’s not obvious how to get that effect. The default “out-of-the-storyboard” UITableView behavior gives you something like this:
As a first attempt to fix the separators, you might try setting the Table View Separator Inset to Custom, with values of zero for left and right.
That helps a little, but not enough. There’s still a gap.
It turns out that you also need to set a couple values on the UITableViewCell. This is easiest to do in code. One way is to subclass UITableViewCell to make a custom table view cell class, tell storyboard that you’re using that class for your table view cells instead of UITableViewCell, and add the following two lines to your new class’ awakeFromNib() method:
self.layoutMargins = UIEdgeInsetsZero;
self.preservesSuperviewLayoutMargins = false;Or, in Objective-C
self.layoutMargins = UIEdgeInsetsZero;
self.preservesSuperviewLayoutMargins = NO;Now your table looks like this:
Or like this:
One big caveat: preservesSuperviewLayoutMargins is available only on iOS 8 and later.
You can find the demo table app here. The emmerge app for email and task management is coming soon.
