Readable Width Table Views With iOS 12

The defaults for creating a readable width table view have changed in iOS 12. If you create your layouts with Interface Builder you are not impacted. Create your table views in code though and you may need to make changes when building against the iOS 12 SDK.

A Recap

The readable content guide was introduced in iOS 9 as a way to keep lines of text at a comfortable reading width. It is useful when you have a table view cell showing multiple lines of text like this:

Table view cells with long lines of text

Restricting the cell content to the readable content guide limits the line length to a more comfortable width:

Table view cells using a readable width

I covered how to use the readable width of table view cells back when they were introduced in iOS 9. It is a bit confusing and was made worse when the table view setting disappeared from Xcode (it is back in Xcode 9 and 10).

The good news is that the above approach with Interface Builder works unchanged with iOS 12.

What Changed?

Things get interesting if you are creating your table views in code. Starting in iOS 12 the default for the cellLayoutMarginsFollowReadableWidth property of a table view has changed. In previous iOS releases it was true by default but Apple engineers have changed their minds. Starting in iOS 12 the default is now false.

If you are not using Interface Builder and you want the cell margins to follow the readable width you need to explicitly set the property for iOS 12:

tableView.cellLayoutMarginsFollowReadableWidth = true

Likewise if you do not want to use the readable width you need to remember to set it to false if deploying back to those earlier iOS releases where it defaults to true.

What Do I Need To Do?

Possibly nothing. If you are using Interface Builder to create your table views then nothing has changed. You still set the property on the table view or content view of a custom cell if you want to use the readable width. By default a table view created in Interface Builder does not use the readable width.

If you are creating your table views and cell layouts in code you might have work to do:

My recommendation if you are building a custom table view cell layout in code and want to use the readable width is to create your constraints with the readable content guide of the content view. This makes your layout independent of the table view property so it works across all iOS versions.

Further Details

Want To Learn More?

If you want to learn more about building adaptive layouts you should get my book - Modern Auto Layout.

Never miss a post

iOS Size Classes Cheat Sheet

Subscribe and also 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. See Privacy Policy
Archives Categories