One of the new features in iOS 7 is the in-line UIDatePicker. You might have noticed in the Calendar app or in the Reminder app that when you want to select a date for your event, instead of seeing the UIDatePicker come up from the bottom of the screen like the keyboard, now you see it below the cell that contains the date. This is how it looks like in the Calendar app:
Today we are going to see how to replicate this behaviour. We are going to create a small project that will demonstrate how to display in-line date pickers in both dynamic and static UITableView cells. Our demo app will display a list of people represented by their name and their date of birth. When you select one person an in-line date picker will appear and allow you to change the date of birth. This is the implementation that will use the dynamic prototype cell. On the navigation bar there is a + button that allows you to add a new person. A modal screen will appear and it will allow you to enter the name of the person, its date of birth and the place of birth. This is where we will use static cells. The finished app will look like this:
Let’s get started by going to File->New Project in Xcode and selecting the Master-Detail Application template.
Name your project InlineDatePicker. We’re not using Core Data so deselect that check box. Press Next when ready and on the next screen select where you want to store your project and then click Create. When you run the project you will see something like this:
You can tap the “+” button to create a new entry and then tap on the new row to see a detail view for it:
We already have a working project thanks to Xcode’s template and it is quite close to what we want. We have a table view and a detail view, all we need to do is customise them to suit our needs.
Table view setup
The template created the following file structure for us:
We are going to make VCMasterViewController display our list of people, so let’s start by giving it a more suitable name. Select VCMasterViewController.h file, then in that file right click on the name of the view controller and choose Refactor->Rename… The new name will be VCPeopleViewController.