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.

13 Comments

  1. Fred | May 14th, 2009

    Hey,

    thanks for taking the time to write this, looking forward to your next tut.

  2. Florian | September 12th, 2009

    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

  3. Larry Johnson | September 25th, 2009

    Thanks for this wonderful information! When might we expect Part2?

  4. Ibrahim | March 1st, 2010

    Nice Tutorial, wheres part 2 !

  5. Luis Tovar | May 18th, 2010

    Thanks for the tutorial. My tableview is now badass!!

  6. Andy | August 27th, 2010

    Awesome! This was just what I was looking for. Thanks Matt!

  7. jeff | September 21st, 2010

    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

  8. Matt Mayer | September 21st, 2010

    Yes, within Interface Builder, just drag and drop a UITableView and resize it to whatever size you want :)

  9. Jules | November 5th, 2010

    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 ?

  10. Philip | June 8th, 2011

    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?

  11. krunal | December 8th, 2011

    how to set width or starting point of UITableView ?

  12. Raymond Johansen | March 9th, 2012

    Hi. Thnx 4 great tutorials. Do u know about how to change color or remove the line inbetween the cells?

  13. HTC | June 8th, 2012

    what about having the transparent background and also transparent section headers?

Post a Comment