UITableViewCell with autolayout left margin different on iPhone and iPad

by

 How to fix it

After fighting with the apple bug reporting team with many sample projects and screenshots and dissecting that answer, I’ve found that the solution to have your custom-style cells behave consistently regarding their margins and be just like the default UITableViewCells, you have to do the following (mostly based on Becky’s answer, I’ve highlighted what’s different and what made it work for me) :

  1. Select your cell’s content view in IB

  2. Go to the Size Inspector

  3. In the Layout Margins section, check Preserve Superview Margins (do not click the plus-sign)

    Checking preserve superview margins

  4. (And here’s the key) Do the same for the cell itself (the content view’s parent if you will)

    The cell and not the content view this time

  5. Setup your constraints as follows : Label.Leading = Superview.Leading Margin (with a constant of 0)

    Setting the constraint for the custom cell's label

Now all your cells will have their label consistent with the default cells! This works for me in Xcode 7 and up and it includes the fix mentioned in the thread I referred to. IB and the simulator should now show properly aligned labels.

Final result in the simulator

You could also do some of this programmatically, for example in the View Controller’s class :

cell.preservesSuperviewLayoutMargins = true
cell.contentView.preservesSuperviewLayoutMargins = true

Or you could have it set up by calling UIAppearance once at startup (I only know Swift, sorry) :

UITableViewCell.appearance().preservesSuperviewLayoutMargins = true
UITableViewCell.appearance().contentView.preservesSuperviewLayoutMargins = true

How and why it works

As Ethan kindly pointed out, Apple’s own documentation on UIView describes preservesSuperviewLayoutMargins as follows :

When the value of this property is true, the superview’s margins are also considered when laying out content. This margin affects layouts where the distance between the edge of a view and its superview is smaller than the corresponding margin. For example, you might have a content view whose frame precisely matches the bounds of its superview. When any of the superview’s margins is inside the area represented by the content view and its own margins, UIKit adjusts the content view’s layout to respect the superview’s margins. The amount of the adjustment is the smallest amount needed to ensure that content is also inside the superview’s margins.

Therefore, if you want your cell’s content to align with the TableView’s margins (it’s great-grandparent if you will), you need to have your content’s two ascendants, Content View and the Table Cell itself, preserve the margins of their own superview.

Why this isn’t default behavior surprises me : I feel like most developers who don’t want to customize everything would expect this “inheritance” by default.

More Related Contents:

  1. Using Auto Layout in UITableView for dynamic cell layouts & variable row heights
  2. What is NSLayoutConstraint “UIView-Encapsulated-Layout-Height” and how should I go about forcing it to recalculate cleanly?
  3. reloadData() of UITableView with Dynamic cell heights causes jumpy scrolling
  4. How to resize superview to fit all subviews with autolayout?
  5. Auto layout constraints issue on iOS7 in UITableViewCell
  6. How do I set the height of tableHeaderView (UITableView) with autolayout?
  7. Is it possible to obtain a dynamic table view section header height using Auto Layout?
  8. Multiple UILabels inside a self sizing UITableViewCell
  9. UITableView within UIScrollView using autolayout
  10. UITableView dynamic cell heights only correct after some scrolling
  11. Auto-layout: What creates constraints named UIView-Encapsulated-Layout-Width & Height?
  12. table header view height is wrong when using auto layout, IB, and font sizes
  13. Trouble with AutoLayout on UITableViewCell
  14. Using autolayout in a tableHeaderView
  15. When should translatesAutoresizingMaskIntoConstraints be set to true?
  16. UITableView auto resizing row constraint breaking mysteriously on iPhone 6Plus
  17. Why is there extra padding at the top of my UITableView with style UITableViewStyleGrouped in iOS7
  18. Custom edit view in UITableViewCell while swipe left. Objective-C or Swift
  19. UITableview: How to Disable Selection for Some Rows but Not Others
  20. Change the color of default red color delete button in UITableViewCell when swiping rows or click on edit button
  21. Using ScrollView Programmatically in Swift 3
  22. JSON parsing swift, array has no value outside NSURLSession
  23. NSIndexpath.item vs NSIndexpath.row
  24. Are there any advantages to using a UITableViewController over a UIViewController that implements tableview delegate and datasource methods? [closed]
  25. Pull to refresh UITableView without UITableViewController
  26. UITableViewCells with UIButton overlaps while scrolling
  27. Need assistance setting two buttons of equal width, side by side Autolayout
  28. How can I get a view’s current width and height when using autolayout constraints?
  29. iOS ScrollView needs constraint for y position or height
  30. How to implement UISearchController in UITableView – Swift

Leave a Comment