Custom Settings Screen With Inline UIDatePicker Controls

In this article I’m going to take a tour of an app settings screen sample that has multiple inline UIDatePicker controls and a few other widgets, all presented in a UITableView with multiple sections.

Update 14 August 2017: Looking for a Swift Inline UIDatePicker? I have a new tutorial and full demo app for a Swift inline UIDatePicker that has some advanced features and is easy to port into an app.

Apple published a sample of how to put an inline UIDatePicker into a UITableView so I based my strategy for the UIDatePicker on the same techniques.  Additionally, Ajay Gautam modified Apple’s Storyboard based sample into a non-storyboard version, so I actually used this modified version as a base.  I customized according to my requirements and also incorporated the following features.

  • Support for multiple UIDatePicker cells.
  • Support for multiple settings sections with headers and footers.
  • Using custom Nibs for UITableViewCell.
  • Auto layout to support all devices and orientations.
  • Storing settings using NSUserDefaults.
  • Examples of using UISwitch and UIButton on settings screen, in addition to the inline UIDatePicker controls.
  • Extension class for UIColor to use custom colours (for example to match Apple’s settings screen colours)

The completed project is written in Objective-C and can be found here on GitHub. This is a reusable screen that can serve as a base for any project that needs a settings screen, especially where date picking is required.

Here are screenshots of the app for this project.

iOS Simulator Screen Shot Jun 23, 2015, 12.10.02 PM
iOS Simulator Screen Shot Mar 11, 2015, 6.22.47 PM

Bearing in mind that the Settings screen has rather generic text reflecting that this is a sample (but reusable) implementation, you can see the Main Screen, the Settings screen as it is when it opens, and then the third screenshot shows the inline UIDatePicker after having selected the First Date. Note that in this sample, I’ve chosen to illustrate how one can use the UIDatePicker to display a time only.  

Let’s take a tour of the implementation, but first I’d suggest you download the project so you can follow along as I discuss some of the features and design.

Project Structure and Basic Design

As mentioned above, I’ve used a non-storyboard approach and in this example there is one main controller, MainViewController, with a corresponding xib file. MainViewController defines the UIBarButtonItem for displaying the Settings screen via the SettingsViewController class, which also has a corresponding xib file.  SettingsViewController is the main class for handling the various App settings capabilities. The controls presented for settings are in a UITableView, and SettingsViewController is a UITableViewDataSource, UITableViewDelegate, and also a UIAlertViewDelegate.

For the UITableView, each UITableViewCell is implemented as a custom Xib (and corresponding .h and .m files) that is loaded for the relevant cell type.  With this as a sample, you can add other controls and groups and create your own settings screen that has UIDatePicker controls for settings that require a time and/or date.  Even if you do not have UIDatePicker controls, you can still base a settings screen on the design presented and put whatever controls you need into it using the same patterns.

Auto Layout 

This project uses auto layout and size classes so that it is compatible with all devices and orientations. For example, on the Title field of the DateTableViewCell.xib, there are different font sizes for compact and regular width devices, as seen in the screenshot below where the Label attributes are displayed.

Screen Shot 2015-05-22 at 7.06.55 PM

Constraints are used on all xib files so that controls respond appropriately to device orientation changes, and the constraints also ensure correct sizing for each device type.

Custom UITableViewCells for Each Widget

I prefer to define most of the UI in Interface Builder with xib files and corresponding .h and .m files.  I’ve done just that for all of the table cells. In this project, there are four types of cells (date pickers, date display, switch, and button), therefore you’ll see the 3 files for each of the four cell types.

The controls on each table cell that need to be accessed from the SettingsViewController have corresponding IBOutlet properties defined in the relevant .h file.

The creation of the cells within the table starts with the cellForRowAtIndexPath method, which defers to the createCellWithIdentifier method to do the actual instantiation of each cell control by registering the Nib for reuse. Call actions are also added as necessary for handling events and responding to changes in settings.

Inline UIDatePicker Design

As mentioned earlier, the basics for the UIDatePicker are from Apple sample code.  There is quite a bit to it, so I won’t go into all the details, but the technique is to display a UIDatePicker in the table when the user clicks on a displayed date cell. It is removed once a date is updated and the UIDatePicker is closed.

When a date picker is added to the table, the dateAction method is added as the target for when the value is changed by the date picker. This action includes saving the new value into NSUserDefaults as a user preference, which I’ll talk about shortly.

Storing User Preferences

When a setting is changed from user interaction, the appropriate action is called and the updated setting is stored using NSUserDefaults. Keys are defined for each setting, so that the value is stored and retrieved using the defined key. Here is an example of storing the value of the Switch in the sample project:

Summary

This has been a quick tour of a custom Settings screen for an iOS app. I hope it helps in some of your projects.

The app I’m currently developing is using Swift, and I am looking forward to posting some design solutions for Swift apps.

If you have comments, suggestions, improvements, or any general feedback, feel free to leave a comment or contact me by email, and thanks for checking out my website!

Leave a Comment: