Blog - Liven up your boring UITableView: part 1

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.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc]
                  initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
    }
 
    // Set up the cell...
	cell.text=@"This is a boring cell";
    return cell;
}

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.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc]
                  initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
    }
 
    // Set up the cell...
        cell.font=[UIFont fontWithName:@"Georgia" size:16.0];
	cell.text=@"This is a boring cell";
    return cell;
}

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.

cell.textColor = [UIColor orangeColor]; // one of the standard colors
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

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

Now you can simply write

cell.textColor = UIColorFromRGB(0xFF3366);

It's 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.

• 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:

   tableView.backgroundColor = [UIColor clearColor];

3. Set the cell's background color to transparent:

   cell.backgroundColor=[UIColor clearColor];

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

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.

---

Enjoyed this post? ReignDesign is a great team of tech-savvy developers providing RIA and mobile services. For more articles like this, subscribe to our blog feed.

Tags: iphone, mobile, objective-c

This entry was posted on Friday, March 27th, 2009 at 11:45 am and is filed under Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.