How to Make iPhone Apps

In this tutorial, our guest blogger Tope will be showing you how to design a Table View with custom cells. Why would you want to do this, you ask? Well, sometimes the default list view from Apple just doesn’t cut it anymore. Having a nice, custom design is a good way to give your app a chance on being featured by Apple, the holy grail that all developers want for their apps.

At the end of this tutorial, you will be able to implement the Table View in the image below. This is a sample design for a social networking app. This screen will fit well in an app that shows Facebook or Twitter updates.

We will use some sample design resources to spruce up each cell and I will include a sample project with the design resources at the end of the post. You can download that and use them in your apps as you wish.

Let’s get started.

The first step is to launch XCode and create a new project. Let’s start with a Single View project for now.

Now let’s create a new UITableViewCell. To do this, Click on File->New and then choose New File. Select the Cocoa Touch option and choose “Objective C class” option. This is where the UTableViewCells are hidden (I don’t know why, ask Apple). Hit “Next” and then give your new cell a name like “UpdatesTableViewCell”. Make sure to select UITableViewCell in the drop-down and then click on “Next” and “Create”.

You should now have a new UITableViewCell, or not? There is one more step, we need to add a UIView for our cell. Go through the steps to add a new file again but this time, Select the “User Interface” option instead of Cocoa Touch and then choose the “View” element.

The view we just created is not right for a TableViewCell so we need to use the right one. Select the view and delete it by using the back space. Then drag in a UITableViewCell from the objects tab.

Adding the Design Elements

If you download the source files, you will see a folder called Resources. This is where all the Images we will be using in this tutorial reside. Add this folder to your project, before we move along.

Designing the cell

Now the magic begins. If you take a look at the end result we want to arrive at, you can see that the we need an ImageView for the profile image, another ImageView for the gray frame. We also need a text view for the updates and a label for the date and the last thing is the dark background.

Breaking down the views we need makes it look like a less daunting task.

Let’s start by dragging an Image View from the objects tab. This will form our background. The size of the Image view should be 320px wide and 77px tall. Now we need to set the Image property of this view to the background image called “list-item.png”.

Now drag two other Image views, these will be where we show the profile image and the frame. Choose any picture you have for the first image view (in my case, I have chosen Mattâs) and for the second one choose the “photo-mask-list.png” as the Image property. Your view should now look like the image below.

Next, add a Label for the name and align it with the Image view, below the Label should be a TextView. Make sure the Editable property on the Text view is not checked. Choose a clear colour as the background colour of both the Label and the Text view. This will make them have a transparent background. Then change the Text Color property to White.

Your cell should now look like this.

We still need to add the date label. Before we do that, please add a new Image View and resize it to fit the date. Choose the image “date.png” as the image property. We could have used a View with a blue background colour but if you look closely, the date.png file has rounded edges and we want to keep it that way.

Lastly, add a new label that will hold the date and place it above the blue background. Our cell now looks like the image below.

We are almost done. We just need to configure a TableViewController to display our list of cells.

Creating the TableListViewController

In the list of files in our project, you should see a file called ViewController.m. We should be able to use this file and tweak it for our purposes but as they say, “A lazy programmer is the best programmer”. So let’s create a new ViewController.

Right-click on the project and choose, Add New File. Select the type Cocoa Touch option and choose UIViewController subclass. In the new screen, give your class a name e.g “UpdatesViewController” and make sure to select the subclass of UITableViewController. Hit next, and Create and we should now have a new TableViewController.

Modify the following methods on the “UpdatesViewController” to the code below. This will create a number of cells on our table and configure the cells to look like the UpdatesTableViewCell.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 5;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UpdatesTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {

        NSArray* views = [[NSBundle mainBundle] loadNibNamed:@"UpdatesTableViewCell" owner:nil options:nil];

        for (UIView *view in views) {
            if([view isKindOfClass:[UITableViewCell class]])
            {
                cell = (UpdatesTableViewCell*)view;
            }
        }
    }

    return cell;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 77;
}

We also need to configure the Table View in the Controller and make the lines that separate the cells transparent. Add the following line to the viewDidLoad method

- (void)viewDidLoad
{
    [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
    [super viewDidLoad];
}

And lastly, let’s make sure that the first view we see is our UpdateViewController. Modify the application:DidFinishLaunchingWithOptions method in the AppDelegate.m file to the following.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    UpdatesViewController* updates = [[UpdatesViewController alloc]
                                      initWithNibName:@"UpdatesViewController" bundle:nil];

    self.window.rootViewController = updates;
    [self.window makeKeyAndVisible];
    return YES;
}

Now you can run the app in the simulator and voila, you should see our new TableView with custom cells.

Thanks for following up with the tutorial up until this point. We still need to design the Navigation and the TabController but that is out of the scope of this guest post. If you would like to see that tutorial, let me know in the comments and if Matt will have me back, I will write up the tutorial for you.

Editor’s Note: you may download the code used in this tutorial here.

[box type="info"] This is a guest post by Tope who is the Vault Overseer at App Design Vault where you get great iPhone App Design that will help make your app a Top-seller without blowing your budget on expensive designers. When he is not tending to the Vault 5km below a bank in Switzerland, he can teach you how to design an app in 1 hour.[/box]

How To Design A Custom UITableViewCell From Scratch

Adding the Design Elements

Designing the cell