Layout Guide, ReadableContentGuide in swift

This content guide provides a layout area which can be used to place text and related content. Area width generally be constrained to a size that is easy for the user to read.

Consider an example of label with leading and trailing space of 16points. Top space with 50points. The label has the number of lines set to zero (unlimited) and is using the body dynamic text style. Your label constraint look like this

Constraints of label

• Without ReadableContentGuide view look like this in iPad pro landscape orientation and iPhone portrait orientation.

View looks without ReadableContentGuide

• It’s easy when you read large text in portrait mode but the problem comes when you read this text on a wide device like iPad.
• The line length in iPad pro landscape orientation exceeds 130 characters and is not much fun to read.
• ReadableContentGuide helps to set some constraints for the width of label to make it readable.
• The line length in iPad pro landscape orientation exceeds 130 characters and is not much fun to read.
• ReadableContentGuide helps to set some constraints for the width of label to make it readable.
• The solution is to use readable content guide for the parent view of label.

Add Readable content guide in XIB/Storyboard:-

• Add leading and trailing space to label and make sure constraints to margin is enabled and make sure check mark is enabled for readable content guide of label parent view in IB.

Adding Readable content guide programatically:-

label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
view.addSubview(label)
NSLayoutConstraint.activate([
label.topAnchor.constraint(equalTo: view.topAnchor, constant: 50),
label.leadingAnchor.constraint(equalTo: view.readableContentGuide.leadingAnchor, constant: 16),
label.trailingAnchor.constraint(equalTo: view.readableContentGuide.trailingAnchor, constant: -16)
])

• With ReadableContentGuide view look like this in iPad pro landscape orientation and iPhone portrait orientation.

View looks with ReadableContentGuide

• The readable content guide defines an area that is 664 points wide and inset from the edges of the view in iPad pro.
• The line length is now a much more readable.
• The system tries to maintain the line length to a readable size as the view width changes.
• Rotating the device to portrait keeps the content size the same with smaller margins

Note that the readable content guide will never extend beyond the view’s layout margin guide

Dynamic Type:-

• The interesting thing about the readable content guides is that they adapt not only to the changing size of the view but also to dynamic type size.
• if you choose the smallest dynamic type size the content guide width decreases to maintain the line length.
• if you choose the largest dynamic type size the content guide width increases to maintain the line length.

Thanks for reading! I hope y’all are staying safe at this time. Just want to say hi — feel free to leave a comment! and hit the clap button below 👏 to help others find it!. follow me on Medium.