Tag: interface builder

Recently I’ve been looking into ways to create an interface that allows the user to navigate through full-page views using both vertical and horizontal scrolling. Each view provides a data chart (replaced by a simple label in this example) for a specific day, week or month. By swiping left/right the user can navigate between days, while swiping up/down they can switch to the weekly (and further down, monthly) view and back up. The navigation works in a very similar way to Sony PS3’s and PS4’s menu interface.

iOS provides different ways to display scrolling and paged content, namely UIPageView, UIScrollView and UICollectionView. The last of the three was the last to be introduced and it is the most versatile thanks to the ability to use a custom UICollectionViewLayout to create a grid interface.
At first, a grid interface with only one view at a time on-screen seemed like the way to go, but then the horizontal and vertical navigation would have been tied together: if the user navigates 3 days back in time (horizontally) and then swipes down to the week view, they would be provided with the data from 3 weeks back, and this would be counterintuitive and confusing.

The solution was to have three different UICollectionView to handle the horizontal navigation independently and a UIPageView to navigate vertically between the three.

I added a UIPageViewController to the storyboard, and in the Attribute Inspector I set the navigation direction to vertical and the transition style to scroll. This will be the initial view controller.

Then I added a UICollectionViewController and set its storyboard ID to “collectionViewController” in the Identity Inspector. I navigated the view hierarchy down one level to the UICollectionView and configured it as follows.

The header files for these two classes just declare the public properties and the protocols the two classes conform to. Using a custom subclass of UICollectionViewCell allows to declare its outlets and to design its interface easily in the storyboard.

If everything has been wired and set correctly in the storyboard, these few lines of code will allow you to create a pretty neat and complex UI!

UIContainerView can be super useful while designing iOS/OS X apps, but unfortunately you are limited to only one embed segue per container view. Using this neat workaround from Michael Luton over at sandmoose.com you can embed multiple view controllers in a single container view and decide programmatically which one to load at every given time!