Readable Width of Table View Cells

Do you want the layout of your table view cells to follow the readable content width? If you were unlucky you may have even noticed the layout of your table view cells changing from iOS 8 to iOS 9. The extra wide margins are most noticeable on larger iPad screens.

Apple added readable content guides in iOS 9. In this post I look at how you configure your table view cells to use or avoid the extra wide margins they can cause.

Table View Cells and Readable Content Guides

Here is a table view with two rows both using the default table view cell style (image view + label). The screenshot is from a simulated iPad Air in landscape:

Full width layout

Here is the same table view with our cells using the readable content guides. Notice the much greater spacing for the left margin:

Readable width layout

The readable content guide layout is only available on iOS 9. You use it when you want to keep text to a readable width for the user.

A Basic Table View with Interface Builder

Let’s create a simple table view with Interface Builder and add a single prototype cell using the default Basic cell style.

Basic Table View

This table view cell has an image view and a text label:

Basic Cell

Note that you cannot add auto layout constraints to one of the built-in table view cell styles. If we run this our table view cell does not follow the readable content guides (see first screenshot in this post). This seems like a good default for table views we create in Interface Builder. If we want to change this default behaviour we have two choices:

Using Interface Builder

With the table view highlighted in Interface Builder use the size inspector to tick the Follow Readable Width box.

Follow Readable Width

You must set this on the table view. It has no effect if you set it on the table view cell or on the content view in the cell.

In Code

If you prefer you can also change the default behaviour in code using the cellLayoutMarginsFollowReadableWidth property of the table view. For example, in the viewDidLoad method of our table view controller:

if #available(iOS 9.0, *) {
  tableView.cellLayoutMarginsFollowReadableWidth = true
}

This is new in iOS 9 so remember to test for availability first if you still support iOS 8.

Using Custom Table View Cells

The cellLayoutMarginsFollowReadableWidth property only works if you are using one of the default table view cells (Basic, Subtitle, Left Detail, Right Detail). Once you use a custom table view cell and use auto layout for the cell content view you are on your own. Luckily it is trivial to support. Here is what my custom table view cell looks like in Interface Builder:

Custom Table View Cell

I have constraints set to pin my weather icon image to the leading margin and the text label to the trailing margin of the cell contentView. Choose the contentView in Interface Builder and again use the size inspector to tick the Follow Readable Width box:

Follow Readable Width

Note you must do this on the content view, not the table view cell.

If you doing this with code create the constraints using the readableContentGuide property of the view instead of layoutMargingsGuide. See my earlier post on readable content guides for more details.

Defaults for a Table Created in Code

If you create table views in code you need to be careful as the default setting for cellLayoutMarginsFollowReadableWidth is true. I am not sure why this is different from Interface Builder but it can lead to surprises. If you are using one of the default table view styles and want to keep the iOS 8 layout when running on an iOS 9 device you need to change the default when creating the table:

let myTableView = UITableView(frame: view.frame, style: .Plain)
if #available(iOS 9.0, *) {
    myTableView.cellLayoutMarginsFollowReadableWidth = false
}

In Summary

Your choices if you want a table view cell to follow the readable width of a device:

Using Interface Builder

In Code

Also remember if you create a table view in code the default for cellLayoutMarginsFollowReadableWidth is true.

Never miss a post!

iOS Size Classes Cheat Sheet

Subscribe and get my free iOS Size Classes Cheat Sheet

Success! Now check your email to confirm your subscription and download your free guide to iOS Size Classes.

There was an error submitting your subscription. Please try again.

Unsubscribe at any time.
No time to watch WWDC videos?

Sign up to get my iOS posts direct to your inbox and I will send you a free PDF of my iOS Size Classes Cheat Sheet.

OK! Check your inbox (or spam folder) for an email to confirm your details and download your free guide to iOS Size Classes.

There was an error submitting your subscription. Please try again.

Unsubscribe at any time.
Archives Categories