Creating a Detail Page

So far, you have managed to build an app that shows a set of contacts on a custom grid in a collection view. This is pretty impressive, but not very useful. Typically, a user will expect to be able to see more information when tapping on an item in an overview. In this case, they would likely expect to see more details about the tapped contact, for instance, their email address and phone number. In this chapter, you will see how to do just that.

You will learn how to use the storyboard to set up a connection between the collection view cells and a detail page. In addition to this, you will learn how to pass some data along when navigating between view controllers to make populating your detail pages with data a breeze. You won't stop there though. Currently, the contacts app is built with the iPhone in mind, but a great app will work on any device. So you're going to make use of Auto Layout and size classes to ensure your layouts look great on all screens, even the iPad!

Setting up a good page with a layout where many objects are placed side by side or above each other can be a tedious job using Auto Layout constraints as you have done so far. In this chapter, you're going to use a new component to make specific layouts a lot easier to set up. This tool is called UIStackView, and it is incredible. You're going to end this content-packed chapter by implementing a feature that allows users to preview the content they're about to navigate to when they 3D Touch on one of their contacts.

To sum them all up at once, these are the topics you will learn about in this chapter:

  • Universal applications
  • Segues
  • Advanced Auto Layout
  • UIStackView
  • Passing data between view controllers
  • 3D Touch