Today I present you my recent work – KSAvatarCell. This is a UITableViewCell subclass and it allows you to create a Contacts.app-like cell, where you can see image, name and description. I use it in my new project :) You can download this script on the bottom of the post but I recommend you to read the tutorial. So, let’s start!

In this tutorial we will create something like this:

Step 1: Download KSTableViewCell

First of all you have to download the class files. You can find them at the bottom of this post. Download them, unzip and you’re ready to go!

Step 2: Create new Xcode project and prepare XIB and class files

Open your Xcode and create a new, view-based application. Open your ViewController’s xib file and delete the UIView object. Insert UITableView and set Files Owner “view” outlet to the tableView. Open your viewController .h file and set the superclass to UITableViewController. To do that, find a line which begins with @interface and replace the value between the : and { marks.

Step 3: Create the NSArrays with values

When using KSAvatarCell you have to remember that this cell is unique – it has custom height. The height is 64px and this is also the height of avatar image. You shold use KSAvatarCell in separate section. So, let’s take a look at our .h file:

@interface YourViewController {
	NSArray *labels;
	NSArray *contents;
}

There are two arrays and one tableView defined. The labels array will be storing textLabel’s value. contents will be storing the detailTextLabel values. Now, open the .m file and put this code in your viewDidLoad method:

- (void)viewDidLoad {
    labels = [[NSArray alloc] initWithObjects:
			  [[NSArray alloc] initWithObjects:@"", nil],
			  [[NSArray alloc] initWithObjects:@"phone", @"home", nil],
			  [[NSArray alloc] initWithObjects:@"email", nil],
			  [[NSArray alloc] initWithObjects:@"birthday", nil],nil];
	contents = [[NSArray alloc] initWithObjects:
				[[NSArray alloc] initWithObjects:@"", nil],
				[[NSArray alloc] initWithObjects:@"+1 (800) MY-APPLE", @"+1 800-692-7753", nil],
				[[NSArray alloc] initWithObjects:@"steve@me.com", nil],
				[[NSArray alloc] initWithObjects:@"February 24, 1955", nil], nil];
}

Please note that first array of each ‘super-array’ is empty. Why is that? Because the first cell in tableView will be KSAvatarCell.

Step 4: Add UITableView’s dataSource and delegate methods

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
	return [labels count];
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
	return [[labels objectAtIndex:section] count];
}
 
// Remember that KSAvatarCell has height of 64px!
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
	if(indexPath.section == 0) return 64; else return 44;
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
	if(indexPath.section == 0) {
		KSAvatarCell *cell = [[KSAvatarCell alloc] initWithReuseIdentifier:@"AvatarCell" avatarImage:[UIImage imageNamed:@"yourImage.png"]];
		cell.copyable = NO;
		cell.mainTextLabel.text = @"Steve Jobs";
		cell.descriptionTextlabel.text = @"Apple CEO";
		return cell;
	} else {
		UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue2 reuseIdentifier:@"Cell"];
		cell.textLabel.text = [[labels objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
		cell.detailTextLabel.text = [[contents objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
		return cell;
	}
}
 
// You don't have to add this, it's optional
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
	[tableView deselectRowAtIndexPath:indexPath animated:YES];
}

Step 5: Build & run the application

Now you have everything set up. You can Build & Run (or Run in Xcode4) the app in iOS Simulator or your iDevice. The application should now contain a KSAvatarCell.

The source files with demo app and sample images are available on GitHub.