Wednesday, October 31, 2012

UITableViewCell Using Interface Builder

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.
Link: http://iosmadesimple.blogspot.com/2012/10/adding-uitableview-tutorial.html

Let's start!


1. Add a new file of subclass 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).

You should have these files in your project navigator.

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

4. Start customizing your cell. Here in my example, I want to make a feed cell (One with profile pictures, name, status, date <-- something like that):

  1. I changed the height of my cell to 90 (instead of the default cell height which is 44).
  2. I wanted to put a background image to my cell, so I added a UIImageView with size same with my cell. (I added an image to the project for my cell background.)
  3. All the other UIs are placed on top of the UIImageView (cell background). I added another UIImageView for the profile pictures. 

  4. Added a UILabel for the name, status and date.

My customized cell currently looks like this. Nice thing of doing it here in Interface Builder is that you can easily manipulate the positions, and other attributes of your objects.

3. Make an IBOutlet property of the objects that might change dynamically. In our example, our profilePicture object may change dynamically, depends on who posted what, the Name, Status, DatePosted. But the background image doesn't really change no matter who posted what, so we don't have to make an IBOutlet property of the background UIImage. And remember to synthesize these objects.
//Inside .h file

@property (nonatomic, strong) IBOutlet UIImageView *profilePicture;
@property (nonatomicstrongIBOutlet UILabel *name;
@property (nonatomicstrongIBOutlet UILabel *status;
@property (nonatomicstrongIBOutlet UILabel *datePosted;

//Inside .m file
@synthesize profilePicture;
@synthesize name;
@synthesize status;
@synthesize datePosted;


4. Connect these outlets to your objects in your xib file.

5. Create a new File, subclass of NSObject. This file will serve as our "User" object. This class must hold the important information we need, like the profilePicture filename, Name, Status and DatePosted.
//User.h file

@interface User : NSObject
@property (nonatomiccopyNSString *avatarFname;
@property (nonatomiccopy) NSString *name;
@property (nonatomiccopy) NSString *status;
@property (nonatomiccopy) NSString *datePosted;
@end
//User.m file
@implementation User
@synthesize avatarFname;
@synthesize name;
@synthesize status;
@synthesize datePosted;
@end



6. Create your user objects and put them all in your items Array. (This part is found in step 7 from the tutorial link above).
//I created five users. Sample code...

    User *user1 = [[User alloc] init];
    user1.name = NSLocalizedString(@"Jennifer Eve Curativo", @"name");
    user1.status = NSLocalizedString(@"Currently addicted to Hi Fi Camp - It's a Japanese band, by the way. ;)", @"status");
    user1.datePosted = NSLocalizedString(@"October 31, 2012 5:30PM", @"date Posted");
    user1.avatarFname = @"jen.png";

//Put them all in our array list

items = [[NSArray alloc] initWithObjects: user1, user2, user3, user4, user5, nil];


7. Before we proceed, change the cell's Identifier. We need it later.

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

8. 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;
}

9. 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 = @"MyFeedCell";
    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.
    User *user = [items objectAtIndex:indexPath.row];
    cell.profilePicture.image = [UIImage imageNamed:user.avatarFname];
    cell.name.text = user.name;
    cell.status.text = user.status;
    cell.datePosted.text = user.datePosted;
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}

10. Hit Run!






15 comments:

  1. It's great tutorial ... I was wondering if you have a tutorial or some help how to submission to appstore ..Im begginer and i have no idea how to do it ....Im from Mexico, Acapulco ..I hope you can help me thanks

    ReplyDelete
    Replies
    1. No, I currently don 't have an App Submission Tutorial. Maybe you can try Ray Wenderlich's tutorial? http://www.raywenderlich.com/tutorials

      How to Submit Your App to Apple: From No Account to App Store, Part 1
      How to Submit Your App to Apple: From No Account to App Store, Part 2

      Delete
  2. thanks Jen eve, I will try it on that way .. have a nice day :)

    ReplyDelete
  3. Hi Jenn,

    Well written. very useful for beginners.
    It would be further nice if you can attach the source code of it. Thanks.

    ReplyDelete
  4. Hi Jenn,

    Would it be better to use COPY properties for data types like NSString?

    ReplyDelete
    Replies
    1. Wow, thank you! I actually researched about the better property to use for NSString. I just learned it now. Will edit my codes :D Thanks!

      Delete
  5. I am using XCode 4.6 and iOS SDK 6.0, following piece of code is not working for me.

    if (cell == nil) {

    complier is saying cell is not nil, I removed this if condition things working fine except performance, any suggestions ?

    ReplyDelete
    Replies
    1. And what is the compiler saying exactly? It should work perfectly, even in XCode 5/iOS7.0 or 4.2/5.0. I suspect there is something hidden in your code or a mis-initialization?

      Delete
  6. hello ... i have the 5 field in sqlite database and i want display those 5 column in tableview how it is possible. i create but its display only two field 1st and last... 3 field between them are not shown in tableview

    ReplyDelete
  7. Nice tutorial, just one question - how do you add the image to the app?

    ReplyDelete
    Replies
    1. Right-click the folder, example in this tutorial, "TableViewSample" folder in your Xcode, then Add Files to "ProjectName". Or you may drag the the image from your Desktop (or wherever you have it) to the Xcode Project, then check "Copy items into destination group's folder (if needed)".

      Delete
  8. Nice tutorial. Really helped me to understand basics.
    Thanks.

    ReplyDelete