Example of topLayoutGuide and bottomLayoutGuide UIViewController properties

Question

I will appreciate if someone can show how to use the topLayoutGuide and bottomLayoutGuide properties of UITableViewController introduced in iOS 7. Thank you.

Answer 1

The topLayoutGuide and bottomLayoutGuide properties are inherited from UIViewController and implements the UILayoutSupport protocol. They are designed to be used with AutoLayout, but can also be used directly without the use of AutoLayout.

In the case of topLayoutGuide, the property indicates the highest vertical extent for content that you don't want to appear behind a translucent or transparent UIKit bar (such as a status or navigation bar). So, if your view controller has been pushed onto a UINavigationController stack, topLayoutGuide will tell you how many points from the top of the screen the status bar and navigation bar cover. You can use this value scroll content in a UIScrollView to just below the navigation bar or ensure other content in your view isn't being covered by the UINavigationBar.

Keep in mind that the value of topLayoutGuide depends on the view controller and whether or not it's contained within another view controller. From Apple's UIViewController documentation:

The object that constrains the value for this property depends on whether or not the view controller is a child of a container view controller (such as a navigation or tab bar controller), as follows:

• A view controller not within a container view controller constrains this property to indicate the bottom of the status bar, if visible, or else to indicate the top edge of the view controller's view.

• A view controller within a container view controller does not set this property's value. Instead, the container view controller constrains the value to indicate:

• The bottom of the navigation bar, if a navigation bar is visible

• The bottom of the status bar, if only a status bar is visible

• The top edge of the view controller’s view, if neither a status bar nor navigation bar is visible

Here's a piece of code I use to move a UITextField in response to the showing of the keyboard. I move the textfield to just below the navigation bar.

CGFloat length = self.topLayoutGuide.length;
_feedback.frame = CGRectMake(_feedback.frame.origin.x, length + 5.0, _feedback.frame.size.width, _feedback.frame.size.height);

Using bottomLayoutGuide is exactly like using topLayoutGuide, except the bottomLayoutGuide refers to the lowest vertical extent for content.