Blog

We believe there is something unique at every business that will ignite the fuse of innovation.

Like it or not, Auto Layout has become the de facto standard for controlling the position and size of views within an iOS. Auto Layout allows you to specify the relationships between views or the relationship of a view to a constant to determine the size and position of the view.

One of the weaknesses of Auto Layout has been controlling negative, or empty, space within a layout. Some examples of where you need to control empty space are: controlling groups of views, centering multiple views together within a space, or implementing equal spacing between views.

You can control empty space by adding ‘invisible’ views. Invisible views are views that are either clear or have the same background color as it’s parent view. The problem is that UIViews are never truly invisible. A UIView contains at least 1 CALayer which introduces rendering overhead. UIViews also have an impact on UIEvent handling. If you’re not careful these invisible views will interfere with user events.

In preparing my talk on Auto Layout for 360iDev this year (www.360iDev.com) I decided to dig into some new things in iOS 9. One of those new things is the UILayoutGuide.

In iOS 9 Apple provides a new improved way of controlling negative space called a UILayoutGuide. A UILayoutGuide, or layout guide, is an empty rectangle in a layout against which constraints can be applied to define the it’s relationship to other UILayoutGuides or UIViews. UIlayoutGuides don’t have a hierarchy and they are not part of the view hierarchy. They are owned by a UIView, but they cannot own a UIView or another UILayoutGuide. UILayoutGuides do not contain a CALayer and they are not a UIResponder. This means that there is no drawing overhead added to to the render phase by adding a UILayoutGuide and there is no impact on the UIEvent handling process by having a UILayoutGuide.

As of writing this, with Xcode 7 beta 4, there is not a way to add a UILayoutGuide to a view structure when you’re using Interface Builder (IB). Hopefully, Apple will remedy this before Xcode 7 is out of beta.

Because UILayoutGuides cannot yet be created in IB, you need to create them in code. Once created in code they can be added to your view’s constraint structure exactly like UIViews.

The first step is to add the UILayoutGuide to the view:

var containerLayoutGuide = UILayoutGuide()

// add the layout guide to the view

self.view.addLayoutGuide(containerLayoutGuide)

 

There are now three ways to programmatically add constraints to a view, NSLayoutConstraint objects, visual format language, and           NSLayoutAnchor objects. UILayoutGuides are supported by all three methods. The following example code sets constraints on a layout guide that extends the layout guide between edges of a view.

 

// Visual Format Language

let dict = ["view":self.view,
            "containerLayoutGuide":containerLayoutGuide]

self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|containerLayoutGuide|", 
    options: nil, metrics: nil, views: dict))

// NSLayoutConstraint objects

self.view.addConstraints([
            NSLayoutConstraint(item: self.view, 
                   attribute: .Leading, 
                   relatedBy: .Equal, 
                   toItem: containerLayoutGuide, 
                   attribute: .Leading, 
                   multiplier: 1, 
                   constant: 0),
            NSLayoutConstraint(item: self.view, 
                   attribute: .Trailing, 
                   relatedBy: .Equal, 
                   toItem: containerLayoutGuide, 
                   attribute: .Trailing, 
                   multiplier: 1, 
                   constant: 0)
            ])

// NSLayoutAnchor objects
self.view.leadingAnchor
       .constraintEqualToAnchor(containerLayoutGuide.leadingAnchor)
       .active = true
self.view.trailingAnchor
       .constraintEqualToAnchor(containerLayoutGuide.leadingAnchor)
       .active = true

 

An interesting attribute of the UILayoutGuide is that it doesn’t need to be fully constrained to be useful within a layout; meaning that you don’t necessarily need to provide height, width, X location, and Y location for the UILayoutGuide to be useful. If you need the guide to control the horizontal axis then you can just apply horizontal constraints. The resulting layout will not report any ambiguity on the horizontal axis.

In working with UILayoutGuides I found it problematic that I couldn’t see them on screen. To provide this capability I developed a UIView extension that draws the frames of all UILayoutGuides in a view hierarchy. It does this by adding a CALayer to the owning view of each UILayoutGuide and animating the border of that layer. The result is a marching dashed red line highlighting each UILayoutGuide, shown below.

 

Code for all examples found in this article can be found at https://github.com/jack-cox-captech/LayoutGuideExamples This example app includes examples of how to use UILayoutGuides to center groups of views or evenly

To utilize this functionality, add the file DisplayUIGuideLayerExtension.swift to your Xcode 7 project. This file includes an extension to UIView and a sub-class of CAShapeLayer.

To highlight the layout guides, add the following code to your view controller

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    // show where my layout guides are
    self.view.showLayoutGuides()
}

Each time the view hierarchy is laid out the view extension adds highlighting indicating where each UILayoutGuide resides.

 

 

 

About the Author

Jack Cox
Jack Cox has over a decade of experience helping Fortune 500 clients build mobile strategy through technology, security and cryptography. He is a software developer, systems architect, and a Fellow at CapTech where he is responsible for the firm’s mobile software practice. Jack’s love of software development and all things mobile has driven a career developing software for businesses of all sizes including large-scale transaction processing systems, embedded software, and smart-phone software. Jack co-authored the book ‘Professional iOS Network Programming’ (Wiley). He has been involved in several startups, holds multiple patents and frequently speaks nationally. Jack is based in CapTech’s Richmond, Virginia office and helps clients both locally and across the US.