Liven up your boring UITableView: part 1

Boring UITableView I've seen so many iPhone applications that look like this. White background. Helvetica. Yawn. Apple make it very easy to make apps that look like every other one. But why not stand out in the App Store? Some small tweaks can make your app look much more stylish, without confusing users.




You can make several stylistic changes within tableView: cellForRowAtIndexPath: . Here's a standard boring implementation.

  1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  2.  
  3. static NSString *CellIdentifier = @"Cell";
  4.  
  5. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
  6. if (cell == nil) {
  7. cell = [[[UITableViewCell alloc]
  8. initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
  9. }
  10.  
  11. // Set up the cell...
  12. cell.text=@"This is a boring cell";
  13. return cell;
  14. }

1. A new font

Let's pick a new font. You need to set the font property of the cell to a UIFont. You'll need a font name (a string) and a size. Here, we're using Georgia. You can find a full list of font names here.

  1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  2.  
  3. static NSString *CellIdentifier = @"Cell";
  4.  
  5. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
  6. if (cell == nil) {
  7. cell = [[[UITableViewCell alloc]
  8. initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
  9. }
  10.  
  11. // Set up the cell...
  12. cell.font=[UIFont fontWithName:@"Georgia" size:16.0];
  13. cell.text=@"This is a boring cell";
  14. return cell;
  15. }

2. A splash of color

Let's make that dull black text into something brighter. You just need to set the textColor property of the cell. Here are a few of the built-in ways to pick a color. The full list of standard colors is: blackColor, darkGrayColor, lightGrayColor, whiteColor, grayColor, redColor, greenColor, blueColor, cyanColor, yellowColor, magentaColor, orangeColor, purpleColor, brownColor, clearColor.

  1. cell.textColor = [UIColor orangeColor]; // one of the standard colors
  2. cell.textColor = [UIColor colorWithRed:0.0 green:0.5 blue:0.5 alpha:1.0]; //each is between 0 and 1

If you come from a web development background, you're probably more used to hex color strings. Put this macro at the top of your .m file, after the imports

  1. #define UIColorFromRGB(rgbValue) [UIColor
  2. colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0
  3. green:((float)((rgbValue & 0xFF00) >> 8))/255.0
  4. blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

Now you can simply write

  1. cell.textColor = UIColorFromRGB(0xFF3366);

It's so pretty 😉

its so pretty

3. A new background

We need to do something about that plain background. We're going to use a PNG image and display it behind the UITableView.

  • Prepare a PNG image. It should be either 320x460 (if you have the status bar visible in your app) or 320x480 (if you hide it).
  • Drag it into XCode into the Resources folder and add to your project
  • Load the NIB file containing your UITableView into Interface Builder
  • Open the library (Tools> Library), switch to the Media tab, and drag the image to the View, create a new UIImageView.

Adding the image

  • Use the inspector to move and resize the image so it's at X=0, Y=0, Width=320, Height=480
  • Put the UIImageView behind the UITableView (Layout > Send to Back)
  • Save, Build and Go!

Disappointingly, you won't be able to see your background. The UITableView's background is blocking us from seeing the UIImageView. There are three changes you need to make:

  1. In the Attributes Inspector, make sure the UITableView's "opaque" checkbox is unchecked
  2. Set the UITableView's background color to transparent:
    1. tableView.backgroundColor = [UIColor clearColor];
  3. Set the cell's background color to transparent:
    1. cell.backgroundColor=[UIColor clearColor];

A nice background, Market Felt font and white text, and our UITableView is transformed!

Groovy cells

What's next?

In the next part, we'll make a custom subclass for our cell so that we have even more control. We'll also learn how to make different cells have different height, so they can fit their contents.

Matt Mayer

Matt Mayer is a founder at ReignDesign. Matt is from the UK and has been based in Shanghai since 2006

13 comments

  1. Thanks for this short but good tutorial,

    let me advice you that some things have changed with iPhone OS 3.0.
    “cell.textColor” will no longer work, replace it with “cell.textLabel.text”,
    the same with “cell.font” which changed to “cell.textLabel.font”

    Greetings Florian

  2. Can we have a fixed width and height on the uitableview controller. what i want is a part of the screen with the uitableview and other buttons displayed on the other parts.

    is it possible?

    thanks
    jeff

  3. I’m guessing the answer is no, will this work with custom cells ?

    well I’ve tried it and I have a white background, after following the steps above.

    Any ideas ?

  4. Hi

    This is very clear info. However . . . .

    I added an image to a tableView with no problem and it displays great on the simulator. But when I run it on the iPad the image does not display. Any ideas why?

Leave a Reply

Your email address will not be published. Required fields are marked *