How to Use UIPageViewController to Build Tutorial Screens

Editor’s note: For the very first time you launch an app, you’ll probably find a series of tutorial screens to walk you through the basic features. It’s a common practice to explain how the app works. This week, we’ll show you how to build a similar type of tutorials by using UIPageViewController.

The UIPageViewController class was introduced into the iOS 5 SDK as a mechanism to implement a page turning style of user interface in iOS applications. The UIPageViewController is a highly configurable class that it lets developers to configure:

  • the orientation of the page views – vertical or horizontal
  • the transition style – page turning style or a dot based style
  • the axis (spine) on which the page will turn

In this tutorial we are going to show how to use the UIPageViewController to implement an app that allows users to scroll between multiple screens. You can find examples of this type of page view implementation in games like Angry Birds to show the available levels or in apps that include tutorial/walkthrough screens.

Sample Walkthrough Screens from Path

Sample Walkthrough Screens from Path

Prior to iOS 5 we had to use the UIPageControl class and explicitly control the animations, as well as, transitions between pages. This procedure has been highly simplified with the introduction of the UIPageViewController. We’ll keep the demo app very simple and focus to demonstrate the usage of UIPageViewController. However, with the basic understanding of the page view controller, you can easily build the tutorial screens in your app.
[Read more...]

Handling Single and Multiple Selection in Collection View

In the past two tutorials, we covered the basics of UICollectionView and header/footer customization. You should already know how to display items using UICollectionView. However, we haven’t covered how to interact with the collection view cell.

As mentioned before, the Collection View works in a way pretty much like Table View. But to give you a better idea, we’ll show how to interact with the collection items such as the ways to handle single and multiple item selection. To provide you with a working example of how the item selection works, we’ll continue to improve the Recipe app. Here are what we’re going to implement:

  1. To demonstrate how you can handle single selection, we’ll improve the Recipe app. When user taps a recipe photo, the app will bring up a modal view and display the photo in larger size.
  2. We’ll also implement Facebook sharing in the app in order to show you multiple item selection. Users are allowed to select multiple photos and share them on Facebook.

Recipe App Multiple Selection

The interface of the app is very simple and will not win any design award. However, it’ll give you an idea of how to interact with collection view. To spare you from setting up the Xcode project, you can download this Xcode template. Please note that the Xcode project is created using Xcode 4.6 and tested on iOS 6. If you find any problem opening/compiling the project, please upgrade your Xcode to the latest version.
[Read more...]

Improve the Recipe App With a Better Detail View Controller

Several weeks ago, we showed you how to use Segue in Storyboard to pass data between different view controllers. We’ve built a simple app to display a list of recipes. When user taps on any of the recipes, the app navigates to a detailed view and brings up the recipe name. This is very simple app. But if you understand how it works, this is the foundation to help you advance into a full-fledge iOS developer.

After publishing the tutorial, I got lots of requests to improve the detail view. The original detail view is primitive with the recipe name only. How can we improve it and display more information such as the preparation time, ingredient and the dish photo? In this tutorial, we’ll work on it together and make a better app. Before we move on, however, make sure you check out the below tutorial:

You have to understand the basic OOP concept before you can work on this tutorial. If you haven’t done so, take some time and read through the article. You can’t become a full-fledged iOS developer without learning objects and classes.
[Read more...]