1. Code
  2. iOS SDK

Design & Build a Small Business App: Custom Detail Views

This post is part of a series called Design & Build a Small Business App.
Design & Build a Small Business App: AQGridView

Welcome to the last of a three part series of tutorials where I show you how to design an iPhone App for small business clients from scratch. In this final lesson, I will teach you how to create and theme a custom detail view describing a company's services.

Tutorial Overview

In this section, I will show you how to design the last page of the app which is going to be the detail page that shows more information about the company's services.

The end result will look similar to the screen below:

This screen has the look and feel of a website article, with a title, image, author info in addition to the article itself. The inspiration for this design is from the BizApp iPhone app design template. The article will be implemented with a UIWebView. This allows us to show rich content with links as well as typography.

Creating the UI Elements

Add a new View Controller to the Xcode project. Call it DetailViewController. Open the DetailViewController.h file and add the following fields to the header. These are the UI elements in the view.

In the DetailViewController. file, we shall create these fields and insert them into the view. This is done in the viewDidLoad method.

Don't forget to synthesize the fields at the top of the file.

The first two elements to be inserted in the viewDidLoad method are a scroll view and a label. The UILabel is added to the scroll view so it can be moved off the screen to allow the user to see more fields below it:

The next element to be inserted is the image for the article itself:

The setContentMode property will make sure the image is not stretched and the setClipsToBounds property will make sure the image doesn't extend over the bounds of the Image View. Next up are the two labels below the image:

The metaLabel will be bluish in color and both have the system font of size 13.

Next are the divider line and the web view that will show the content.

At this point, we have our basic UI elements in place, so we need to hook up the new View Controller into the story board so we can navigate to it somehow.

Adding the View Controller to the Storyboard

Add a new View Controller to the MainStoryboard_iPhone file. Select the View Controller and change the class to the DetailViewController. This will make sure that any code we implement in the DetailViewController file will be connected with this new View on the Storyboard.

To make sure the new View Controller is shown when we tap on a service in the Grid, we can connect it by using a segue. This is a new feature in the iOS 5 SDK. To do that, select the Storyboard file and CTRL+Drag from the GridViewController to the DetailViewController. An action pop-up is shown with some options. select "push". This means the new ViewController will be pushed onto the screen in a normal UITableView way.

After doing that, a link (segue) is created between the two ViewControllers. Click on the segue and name it "detail".

To add the last part of the connection, open the GridViewController.m file and add the following piece of code:

When an item is selected in the grid, this method will perform the operation on the segue called "detail" (which we have just created).

Now if you run the application in the simulator and tap on an item in the Grid, you should see a new View being pushed from the right.

However, the view will be empty because we have not added any data to it.

Adding Data from the Model

The next step is to pass some data from our model (which we created in Part 2) to the Detail View Controller. To do this, the first step is to extend the Model with the data we need.

Let's add three more fields to the model for the title, image, and content of the article in the DataModel.h file

And extend the initialization method in the DataModel.m file.

The next step is to add the sample data. This would be ideally loaded from a web service, but that is out of the scope of this tutorial.
For the sake of saving space, I am going to show the sample data for only one of the models. The others are exactly the same but with a different set of text.

You will have to add the images named "service-1.jpg" to "service-6.jpg" from the sample folder to your project. Our sample data is now complete. Let's hook up our UI elements to show them.

Displaying the Data on the Screen

Add a new field to the DetailViewController.h file. This field is an instance of the BusinessService class. Don't forget to include the BusinessService header file and synthesise it in the implementation.

Add some statements in the viewDidLoad method on the DetailViewController to populate the UI elements with the information from the service that was selected.

Now, you can run the application and navigate to the detail screen by tapping on an item in the Grid. You should see a similar screen below.

Now you can see that our detail view is almost complete. The only thing left is the back button which looks ugly because the default back button does not look on the navigation.

Adding a Custom UIBarButtonItem

To fix that, we will use an image in the resources folder called "back.png". To insert the image as the back button, add this piece of code to the AppDelegate.m file. This should be in the application:didFinishLaunchingWihOptions method.

This uses the iOS 5 SDK to decorate the back button throughout the app. If you run the app, you should see the final screen below.


We are now at the end of this series of tutorials.

I hope you now have an idea of how to design your apps and make them look unique.

Thanks for following it up until the end. If you have any questions, please let me know in the comments!

The following images were used under a Creative Commons license:

Image 1
Image 1
Image 1
Image 1
Image 1

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.