A Table View based app for iPhone (Part 2)

A Table View based app for iPhone (Part 2)

In part 1 of this blog, we looked at setting up a table view based application using a plist to describe an NSDictionary of friends. If you have been following along, this part of the blog starts with the application as we left it in part 1. You can download the part 1 app [link to Friends1 code .zip file] here, and the full source for this second part of the blog is available [link to Friends2 code .zip] here.

Open the Friends.xcodeproj file in finder to display it in Xcode. The first thing we’re going to do is add a new .xib file to represent the view of each cell in our table view. The default table view cells are very adaptable, but we want to display 3 pieces of text information in each cell (the name, email, and phone of each of our friends), and the default cells are inadequate for this purpose.

Add a new .xib file to the project by right clicking in the navigator and selecting New File… . Under the Interface group, select the empty template as shown:

Click Next, make sure the device family is iPhone, click Next again, and save the file in the default project as “CustomCell” (the .xib extension will be added automatically) by clicking Create.

Select the CustomCell.xib file and drag a new Table View Cell object to the interface. In the Attributes Inspector, give the cell the identifier “CustomCell” as shown here:

Add three labels to the cell as shown above. Make the top label a bit bigger than the other two, and stretch the labels out to the right so they will accommodate all the text. Set the three label’s tag values to 1, 2, and 3 from the top label down. This is done in the Attributes Inspector for each label:

Click on the File’s Owner object for the cell, and open the Identity Inspector. Choose the FriendsViewController class to be the cell’s owner object:

Now open the Size Inspector for the cell, and note the value in the Row Height field. In our example, the row height is 77, your row height may be different. We shall need this number shortly, so write it down:

Save all of your changes to CustomCell.xib and open the FriendsViewController.h file. Add an outlet property to the file as shown:

#import <UIKit/UIKit.h>
#import "Friends.h"

@interface FriendsViewController : UITableViewController

@property (nonatomic, strong) Friends *friends;
@property (nonatomic, weak) IBOutlet UITableViewCell *customCell;

@end

Wire up this property to the table view cell in the CustomCell.xib file.

Now open FriendsViewController.m. First, synthesize the customCell object, then add a tableView: hieghtForRowAtIndexPath: method, and make the following changes to the tableView: cellForRowAtIndexPath: method:

- (CGFloat )tableView : (UITableView * )tableView heightForRowAtIndexPath : ( NSIndexPath * )indexPath
{
    return 77;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"CustomCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
        cell = self.customCell;
       
        //[cell setBounds:CGRectMake(0, 0, self.tableView.bounds.size.width, 77)];
        self.customCell = nil;
    }
   
    // Configure the cell…
    UILabel *label;
    NSString *keyString = [[self.friends.friendsDictionary allKeys] objectAtIndex:indexPath.row];
    label = (UILabel *)[cell viewWithTag:1];
    label.text = keyString;
   
    label = (UILabel *)[cell viewWithTag:2];
    label.text = [[self.friends.friendsDictionary objectForKey:keyString] objectAtIndex:0];
   
    label = (UILabel *)[cell viewWithTag:3];
    label.text = [[self.friends.friendsDictionary objectForKey:keyString] objectAtIndex:1];
   
    return cell;
}

We return the height we obtained from the Size Inspector view in the cell from tableView: heightForRowAtIndexPath:. This is very important: if we omit this step, the cell will be of the default height and will appear “scrunched.” Also note that we get to our custom cell by loading the nib file (CustomCell.xib) directly from the bundle. The customCell outlet is bound when the nib file is loaded. We then set the cell object to the customCell property, and set the customCell property to nil to ensure that each cell will be configured with different values for the labels.

Next, we use the tag values for each label to set the text in the cell. Finally, after the cell is displayed, we return it.

Run the application. At this point, we still only have one entry in the friends dictionary, but it should be displayed properly in our new custom cell:

In the final installment of this series, we’ll learn how to add and delete entries from the table view, and how to group the entries alphabetically. Stay Tuned!

Source : blancer[dot]com