Voices That Matter

iPhone Developer Tips Stats:
Past 30 days - Pageviews: 88,766 Visitors: 61,679
Thank you everyone! Let's shoot for 100,000 by May. Pass it on...



Creating Unique Looking Tables with Custom Cells

Posted on October 6, 2009 by John Muchow in User Interface


A reader of this post How to Add “More Content” Indicators asked about how the user interface was constructed for the Bikini.com application, the UI in question is shown below:

Creating a Custom Table

It’s quite simple to pull this together, it’s nothing more than a UITableView that is transparent so the background shows through. Each cell is a UITableViewCell which allows for customization of the cell.

Before we walk through the code, what follows is a screenshot of the example we’ll create:

The class definition for the main viewcontroller, which holds the tableview, looks as follows:

@interface MainViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
{
  UITableView *theTableView;
}

Notice that I am not using a UITableViewController, rather a UIViewController with a UITableView. Also, note the reference to UITableViewDelegate and UITableViewDataSource.

Let’s look at how I initialize the viewcontroller:

- (id)init
{
  if (self = [super init]) 
  {
    self.view = [[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]] autorelease];
 
    // Setup the background
    UIImageView *background = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background.png"]];
    [self.view addSubview:background];
    [background release];
 
    // Create table view
    theTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 11, 320, 460) style: UITableViewStylePlain];
    [theTableView setDelegate:self];
    [theTableView setDataSource:self];
 
    // This should be set to work with the image height
    [theTableView setRowHeight:68];
 
    // Transparent, so we can see the background
    [theTableView setBackgroundColor:[UIColor clearColor]];
    [theTableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
    [theTableView setIndicatorStyle:UIScrollViewIndicatorStyleWhite];
 
    [self.view addSubview:theTableView];
 
  }
  return self;
}

I create the view, add a background image and define a tableview. I set the table row size to correlate with the image size I want to show and mark the table background as transparent (clearColor).

The other chunk of relevant code is where we supply cells as the table is constructed. Here’s how that looks:

1
2
3
4
5
6
7
8
9
10
11
12

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
  CustomCell *cell= [[[CustomCell alloc] initWithFrame:CGRectZero reuseIdentifier:nil] autorelease];
 
  // Default to no selected style and not selected
  cell.selectionStyle = UITableViewCellSelectionStyleNone;
 
  // Set the image for the cell  
  [cell setTheImage:[UIImage imageNamed:[NSString stringWithFormat:@"Arrows%d.png", indexPath.row + 1]]];
 
  return cell;
}

Notice that rather than a UITableViewCell I am referring to the CustomCell class which I create below. The other point of interest is line 13 where I set the image to display in the cell (read on for more about this).

Creating a Custom Cell

Let’s look at the custom cell code, again, no rocket science, it’s nothing more than UIImageView and a method for setting the image in the cell. Depending on what you need in the user interface, you may also include a label or other UI component in this class.

#import <UIKit/UIKit.h>
 
@interface CustomCell : UITableViewCell 
{
  UIImageView *image; 
}
 
- (void) setTheImage:(UIImage *)icon;
 
@end

There are just three methods inside the implementation of CustomCell: initialization, setting the image for the cell and setting the alpha of the selected row:

#import "CustomCell.h"
 
@implementation CustomCell
 
/*---------------------------------------------------------------------------
* 
*--------------------------------------------------------------------------*/
- (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier 
{
  if (self = [super initWithFrame:frame reuseIdentifier:reuseIdentifier]) 
  {
    // Cells are transparent
    [self.contentView setBackgroundColor:[UIColor clearColor]];
  }
  return self;
}
 
/*---------------------------------------------------------------------------
* 
*--------------------------------------------------------------------------*/
- (void) setTheImage:(UIImage *) icon
{  
  // Alloc and set the frame
  image = [[UIImageView alloc] initWithImage:icon];
  image.frame = CGRectMake(0, 0, 286, 68);
 
  // Add subview
  [self.contentView addSubview:image];    
}
 
/*---------------------------------------------------------------------------
*
*--------------------------------------------------------------------------*/
- (void)setSelected:(BOOL)selected animated:(BOOL)animated 
{
  [super setSelected:selected animated:animated];   
  if (selected == YES)
    image.alpha = .5;
  else
    image.alpha = 1;
}
 
/*---------------------------------------------------------------------------
* 
*--------------------------------------------------------------------------*/
- (void)dealloc 
{
  [image release];
  [super dealloc];
}
 
@end

That’s all there is to creating a basic custom tableview.

Download Xcode Project

If you’d like to give this project a try, you can download the source code here.

Comments

6 Responses to “Creating Unique Looking Tables with Custom Cells”

Leave Comment

(required)

(required)