Easier Auto Layout: Coding Constraints in iOS 9

Laying Out Views Manually

Occasionally you’ll want to access a view’s frame. This can only safely be done in layoutSubviews() after all the views have been laid out by the Auto Layout engine.

If you run Wonderland on a smaller device such as the iPhone 4s or 5s, there are two problems. Firstly imageView in landscape is really tiny, and secondly socialMediaView is too large and draws over text.

To fix this, you’ll check the size of imageView‘s frame and if it’s below a certain threshold, you’ll hide imageView. You’ll also check that socialMediaView fits within avatarView‘s bounds and if not hide socialMediaView.

Override layoutSubviews() in AvatarView:

override func layoutSubviews() {
  super.layoutSubviews()
  if bounds.height < socialMediaView.bounds.height {
    socialMediaView.alpha = 0
  } else {
    socialMediaView.alpha = 1
  }
  if imageView.bounds.height < 30 {
    imageView.alpha = 0
  } else {
    imageView.alpha = 1
  }
}

Here you set socialMediaView to be transparent if avatarView's height is less than socialMediaView's height. You also set imageView to be transparent if its height is less than 30 points. The image is too small to see at this size.

Build and run, and imageView is hidden if it's too small and socialMediaView is hidden if it's too big. This is an iPhone 4s:

Cleaning Up

Congratulations! You've now finished Wonderland, so you can remove all the background colors.

In ViewController.swift, remove the following line from viewDidLoad():

colorViews()

In AvatarView.swift, remove the following lines from setup():

imageView.backgroundColor = UIColor.magenta
titleLabel.backgroundColor = UIColor.orange

Make sure you run the app on various iPhone and iPad simulators in both portrait and landscape to see the resulting effect:

Note: The best transformation happens when you run in landscape on the iPad Air 2 simulator. This allows for multitasking, so if you pull in another application by swiping at the right edge, your size class changes instantly from Regular to Compact. Neat!

Where to Go From Here?

You can download the final project here.

The best resource for understanding Auto Layout is Apple's WWDC 2015 video Mysteries of Auto Layout 2.

The app demonstrated in that WWDC video is AstroLayout. Although this is in Objective-C, it is well documented. It describes layout guides and constraint animation with keyframes.

There's a whole guide to Auto Layout here.

Finally, there's the excellent Ray Wenderlich Auto Layout Video Series.

We hope you enjoyed this Auto Layout tutorial, and if you have any questions or comments, please join the forum discussion below!