UITableView Tutorial Part 2: Customizing Table View

Hi Folks,

Hope you have enjoyed my previous tutorial if not ,go and explore it here

This second part of UITableView tutorial is all about customizing Table View  using xib.Creating your own tableview cell could be such a hassle when you do it programmatically. To be able to follow this tutorial, you need to know how to add a tableview first. Refer to the previous tutorial on how to add a tableview if you still don’t know how to add it yet.

Let’s start!

1. Add a new file of subclass UITableViewCell.

UITableViewCell

2. After adding a new UITableViewCell class, only .h and .m files are created. So, let’s add another file, an empty Interface Builder Document (xib file). Name it with the same name with our .h and .m files (to avoid confusion).

choose templates

3. Drag a tableview cell to your xib file, and change its class to SampleTableCell (the one we added a while ago).

CustomClass

4. Start customizing your cell. Here in my example, I want to make a Top Artist Cell (One with profile pictures, & name)

    1. I changed the height of my cell to 90 (instead of the default cell height which is 44).
    2.  I added a UIImageView for the profile pictures.
    3. Added a UILabel for the name.

5. Make an IBOutlet property of the objects that might change dynamically. In our example, our profilePicture object may change dynamically, depends on who is on Top Artist Chart.  And remember to synthesize these objects.
//Inside .h file

@property (nonatomic, assign) IBOutlet UIImageView *picture;
@property (nonatomic, assign) IBOutlet UILabel *name;

//Inside .m file

@synthesize picture;
@synthesize name;
6. Connect these outlets to your objects in your xib file.

7. Create a new File, subclass of NSObject. This file will serve as our “Artist” object. This class must hold the important information we need, like the profilePicture filename, Name.
//Artist.h file

@interface Artist : NSObject
@property (nonatomic, strong) NSString *artistName;
@property (nonatomic, strong) NSString *imageName;
@end
//Artist.m file
@implementation User
@synthesize artistName;
@synthesize imageName;
@end

8. Create your Artist objects and put them all in your items Array.
//I created five Artist. Sample code…

    Artist *artist1 = [[Artist alloc] init];
    artist.artistName=@”Eminem”;
artist.imageName=@”eminem.png”;

//Put them all in our array list
items = [[NSArray alloc] initWithObjects: artist1, artist2, artist3, artist4, artist5, nil];
9. Before we proceed, change the cell’s Identifier . We need it later.One more thing add some Artist images in project

cell identifier

Remember the Datasource and Delegate methods of our tableView from the previous tutorial? We are going to modify/add some methods.

10. Remember that our customized cell’s height was changed to 90, right? It has become taller than the usual height of our tableViewCell. Add this method so that our tableView will know that the cell’s height was changed.
//If we did not change the height of our cell, we do not need to add this method.

– (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 90.0;
}

11. Lastly, modify this method cellForRow. This is the part where we tell the tableView that we will use our custom cell.

– (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *CellIdentifier = @”ArtistCell”;
    SampleTableCell *cell = (SampleTableCell *) [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        NSArray* topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@”SampleTableCell” owner:self options:nil];
        for (id currentObject in topLevelObjects) {
            if ([currentObject isKindOfClass:[UITableViewCell class]]) {
                cell = (SampleTableCell *)currentObject;
                break;
            }
        }
    }
    // Configure the cell.

    Artist *artist = [items objectAtIndex:indexPath.row];

cell.picture.image= [UIImage imageNamed:artist.imageName];

cell.name.text = artist.artistName;

cell.selectionStyle = UITableViewCellSelectionStyleNone;

return cell;

}

12. Hit Run! check output as shown below

Runenjoy coding….stay tune

Advertisements

One thought on “UITableView Tutorial Part 2: Customizing Table View

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s