iPhone dev – Building a custom tableview with a background image and separate button



Hello all,

This is a simple tutorial which will explain how to create a view which will contain a UITableView with a custom background image. This will will also have a button which is not a part of the tableview. This is a simple set up but a common workflow which, when I initially started iphone development, caused me some minor headaches before I understood them. The purpose of me creating a view with a background image and separate button is to show how to set up a viewcontroller that manages a combination of a view, tableview, and other elements you would like to add.

Prerequisites: Before starting this tutorial you should have a basic understanding of viewcontrollers and uitableviews.

Lets get started: I have created a simple xcode project that you can download here which has my working example and will produce what you see below.

screen shot

Xcode can do a lot of work for you when creating a new uitableview by simply adding a new uitableviewcontroller. This is simply a viewcontroller which is specific to have its base view as a uitableview. The first thing to note is that we are starting with a uiviewcontroller. Our viewcontroller declares itself as both a UITableViewDelegate and a UITableViewDataSource. When creating a new UITableviewController it will also automatically set the uitableview’s delegate and datasource to its file’s owner.

In our case we need to add a UITableview to our viewcontroller’s view. I am using Interface builder for simplicity. Once the tableview is added we ensure that both its delegate and datasource are set to “File’s Owner” which in this case is our viewcontroller. As an alternate you can set the delegate and datasource of the tableview in code with something like the following in your init or viewdidload function of the viewcontroller:

myTableview.delegate = self;
myTableview.dataSource = self;

IB connection

Once we have this set up the tableview will be looking for the required tableview delegate and datasource functions. At a minimum we need to set up the three required datasource functions to get our example going. In my project I just put dummy text in. Again this is only to show the bare bones set up of this scenario and as a tool for understanding what is required.

The lasts steps were me simply added a UIImageView to our viewcontroller’s base view and set the background color of our tableview to be 0% alpha. I then made the tableview shorter than the full length of the view so I could add a button which does nothing in my example.

That is basically it. It is a little difficult to explain everything without becoming too verbose but I think examining the simple project I’ve added should be enough to get the concept. Its my humble opinion that understanding how to set up more complex views which includes a UITableViews is an important hurdle for new iPhone developers. This is a quick tutorial and project so if any clarification is wanted please message me.

Again you can download the sample project here.

Please let me know if you have any questions by emailing me directly or leaving a comment on this post.

-Ryan