Xcode 7 iOS 9 UITableViewCell Separator Inset issue

Question

This is not a question, rather a solution to the problem I faced.

In Xcode 7, when the application is run on iOS 9 on iPad devices, the UITableView cells leave some margin onto the left side of the tableview. And rotating the device to landscape would increase the margins.

The solution I found is:

Setting "cellLayoutMarginsFollowReadableWidth" to NO.

self.tbl_Name.cellLayoutMarginsFollowReadableWidth = NO;

Since, this property is only available in iOS 9. So, you will have to put a condition to check the iOS version, else it will crash.

if(NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_8_1)
{
    self.tbl_Name.cellLayoutMarginsFollowReadableWidth = NO;
}

Hope it is helpful to others.

Answer 1

Best Solution for iOS 9 and above

This is because of a new feature called readable content guides. It provides margins that are suitable for reading. So, in iPhone and portrait iPad they are very small margins, but in landscape iPad they are bigger. In iOS 9, UITableView's cell margins default to following the readable content guide.

If you want to stop that, just set the tableView's cellLayoutMarginsFollowReadableWidth to NO/false.

Source: https://forums.developer.apple.com/thread/5496

Answer 2

Perfect Solution upto iOS 9

In viewDidLoad

Objective-C

- (void)viewDidLoad {
    [super viewDidLoad];
    //Required for iOS 9
    if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 9.0) {
        self.testTableView.cellLayoutMarginsFollowReadableWidth = NO;
    }
}

Swift

 override func viewDidLoad() {
    super.viewDidLoad()
    if #available(iOS 9.0, *) {
      tableViewDiet.cellLayoutMarginsFollowReadableWidth = false
    }
  }

In TableViewDelegate methods add following code:

Objective-C

- (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

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

    // Remove seperator inset
    if cell.respondsToSelector(Selector("setSeparatorInset:")) {
      cell.separatorInset = UIEdgeInsetsZero
    }

    // Prevent the cell from inheriting the Table View's margin settings
    if cell.respondsToSelector(Selector("setPreservesSuperviewLayoutMargins:")) {
      cell.preservesSuperviewLayoutMargins = false
    }

    // Explictly set your cell's layout margins
    if cell.respondsToSelector(Selector("setLayoutMargins:")) {
      cell.layoutMargins = UIEdgeInsetsZero
    }
  }

Answer 3

A little bit late. I hope is helpful for someone else...

if #available(iOS 9.0, *) {
      myTableView.cellLayoutMarginsFollowReadableWidth = false
}

Answer 4

readableContentGuide is a layout guide that is already added to every UIView

This is to ensure the user doesn't have to turn his head to read the content.

If you want to follow the readable content guide, then do following:

let baseSection = UIView()

contentView.addSubview(baseSection)

baseSection.translatesAutoresizingMaskIntoConstraints = false

let insets = UIEdgeInsets(top: 4, left: 0, bottom: 4, right: 0)

baseSection.leadingAnchor.constraint(equalTo: readableContentGuide.leadingAnchor, constant: insets.left).isActive = true
baseSection.trailingAnchor.constraint(equalTo: readableContentGuide.trailingAnchor, constant: -insets.right).isActive = true
baseSection.topAnchor.constraint(equalTo: contentView.topAnchor, constant: insets.top).isActive = true
baseSection.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -insets.bottom).isActive = true

Note: In the code above the bottom and top anchors use the contentView instead of the readableContentGuide so that the content vertical margins changes based on the tableView.rowHeight.