View controllers inside view controllers. Wat? 😦
AKA Container Views are great.
One of the first things we learn as iOS developers is that each screen is supposed to be one view controller, and that view controllers in general are very expensive to create.
In fact, if you have used UINavigationController or UISplitViewController before. You are already making multi view controller screens. Just to make sure, lets take a quick look at how UISplitViewController is composed. Its very easy to see on an iPad, but the same concept illustrated below works for iPhone.
The previous diagram mostly explains itself. A Split View Controller is in fact 3 view controllers: itself, the master view controller (A), and the detail view controller (B).
Packed with this knowledge, think back of all those times you added custom views to a view controller and ending up with a massive view controller. Can be easily seen in the following example.
Putting this knowledge to use
If you follow me in Twitter, you may have noticed I have an app called “Emoji Stickers”. While designing the app I was faced with a small challenge, I wanted to present all categories of emojis as well as some UI on top of it (a search bar and a quick category picker). Given that the screen was a UIPageController it wasn’t going to be a simple addSubview on top of the already UICollectionView inside of it.
If I had done that, each category would have a category picker, and a search bar of its own. Which is not something that we want.
The solution? custom view controllers. We can see its final form in the following image.
Thankfully, we can change the content and scroll bar insets. By doing so, our screen looks as it was a single view controller which is key in app development. Resulting in the user experience expected by our possible customers.
The final code of the screenshot below is as simple as this, we simply append our two child view controllers.
And finally, each of those functions are very simple. Just taking the view and setting up the constraints that will work in our situation. The only “new” thing we are doing is using Apple’s built in addChildViewController and didMove(toParentViewController:) that we register our nested controllers with the parent one.
That is all 👋. Do you remember anything you have built that could use this technique? Get in touch on Twitter: @raulriera
