Introduction

We shall be using the RemindMe template to design the app we created in Part 1. At the end of this tutorial, you will be able to design the app you see below.

Prerequisites

  • The iOS Simulator does not support iCloud at the moment. The tutorial will only work on a device with iCloud enabled.
  • I made this tutorial in Xcode 4.5. Please download and install this version from iTunes or your Apple Developer account. This will make sure you don’t encounter any errors using a previous version of Xcode may cause.
  • This tutorial runs using the iOS 6 SDK. The final app will be compatible with iOS 5 but while going through the tutorial, please make sure you have downloaded the iOS 6 SDK for Xcode.
  • Please make sure the iOS 6 software is also installed on your device (iPhone/iPad)
  • This is a full on multi-part course so please grab a cup of coffee and happy coding!
  • You can download the final sample project here. But watch the videos to see how it all ties together

Video 0: Using the Appearance SDK

In this video, we can get some quick wins by implementing the UIAppearance SDK. We will use that to skin the navigation bar, the back button and UIBarButtonItems on the app

Download the video here

Video 1: Designing the UITableViewCell

The list of reminders is displayed using custom cells. In this video, you will learn how to create these custom cells and how to add a unique design to them.

Download the video here

Video 2: Adding Shadows To a Table

Shadows sometimes makes your app look unique by adding a depth of field illusion. In this video, you will learn how to add shadows to the last element in a Table view to bring it to life.

Download the video here

Video 3: Adding New Reminders – Designing the UI

In our app, we add a new User interface element at the bottom that we will use to create new reminders. I call this the big plus button. Anyway, you have to see it to understand. Watch the video.

Download the video here

Video 4: Designing the Detail view

In this video, you will see how you can design a detail view. The details view in this app has a UITextField, UIButton and a UIDatePicker. We use elements from the RemindMe template to configure these UI elements.

Download the video here

Video 5: Implementing the “Check box” functionality

To decide which task/reminder has been done, the user toggles the state of a check box. We don’t have checkboxes in iOS, (at least not yet)… So we have to roll our own.

Watch the video to see how to achieve that.

Download the video here

Video 6: Adding a new View controller – Part 1

At the moment, we are giving our reminders default names when we create a new one. So we need to add a new view controller that will display elements with which we can use to configure our new reminder. Also, we need to pass this information back to our list and show it there..

Watch Part 1 below to see how to achieve that

Download the video here

Video 7: Adding a new View controller – Part 2

At the moment, we are giving our reminders default names when we create a new one. So we need to add a new view controller that will display elements with which we can use to configure our new reminder. Also, we need to pass this information back to our list and show it there..

Watch Part 2 below to see how to achieve that

Download the video here

Video 8: Adding a Nested Table

Just to switch things up, we want to add a nested table to show grouped versions of our reminders. This is a step ahead of the default UITableView. Watch the video to see what we want to achieve and how we achieve it.

Download the video here

Video 9: Configuring the Nested cells – Main

At this point, we have the default table design from our Nested table. It is time to add our brand to it and make it ours.

Download the video here

Video 10: Configuring the Nested cells – Sub cells

At this point, we have the default table design from our Nested table. It is time to add our brand to it and make it ours.

Download the video here

Video 11: Grouping reminders – Part 1

Now that the Nested table now looks in harmony with our app design. We need to add some content to it. But before we do that, we will add an algorithm to decide which reminders goes where.

Download the video here

Video 12: Grouping reminders – Part 2

We need to add some content to our grouped table. But before we do that, we will add an algorithm to decide which reminders goes where.

In Part 2 we will finish up with our algorithm.

Download the video here

Video 13: Showing the Grouped Reminders

We have the information for our grouped reminders. Now we want to show this in the app UI.

The video below shows how to achieve this.

Download the video here

Video 14: Showing the Details Grouped Reminders

In this video, we shall see how to connect the Grouped table view to the main list we had before. The main list will only show the reminders for the selected type and subtype.

The video below shows how to achieve this.

Download the video here

Download the final source code here

Sample project