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.

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.

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.

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.

iOS Developer in walmart