Creating a Simple Table View

Embed Size (px)

Citation preview

  • 7/27/2019 Creating a Simple Table View

    1/3

    UITableView Creating a Simple Table View

    IntroductionIn most cases, the requirement is to select an item from the list displayed and then load the

    details of the selected item in a detail view.UITableView is only responsible for the list of itemsit displays, the navigation that happens between the list of items and the detail view is handled by

    the UINavigationController. So the table view always works with the navigation controller and

    viceversa. This is how the final app looks like

    Creating the projectCreate a new XCode project by clicking on File -> New Project -> (Under iPhone OS) select

    Navigation-Based Application, give it a name and save the project. I have named my project

    TableView. The project template Navigation-Based Application will give you a navigationcontroller and a table view tied together, so you do not have to set it up manually.

    Data SourceSince we want to display not one or two but a list of items in the table view, we need some kind

    of a data source to hold our data and something which we can pass it on to the table view so it

    can use it. This data source can come from anywhere XML Files, Databases, or an array. Tolearn how to use SQL Lite databases read my SQL Lite tutorial series here. To keep this tutorial

    simple, I will choose aNSMutableArray as the data source for the table view. You can fill thisarray from XML files orSQLLitedatabase. The array will be populated with string objects and

    not custom objects to keep the tutorial less confusing. Read my SQL Litetutorialseries tounderstand how to use custom objects with the table view.

    The first thing to do is to build the data source, populate it with the items we need to display in

    the table view. Lets build our data source in viewDidLoadmethod of the RootViewController

    http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableView_Class/index.htmlhttp://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableView_Class/index.htmlhttp://developer.apple.com/iphone/library/documentation/UIKit/Reference/UINavigationController_Class/index.htmlhttp://developer.apple.com/iphone/library/documentation/Cocoa/Reference/Foundation/Classes/NSMutableArray_Class/index.htmlhttp://www.sqlite.org/index.htmlhttp://www.sqlite.org/index.htmlhttp://www.iphonesdkarticles.com/search/label/SQLitehttp://www.iphonesdkarticles.com/search/label/SQLitehttp://www.iphonesdkarticles.com/search/label/SQLitehttps://developer.apple.com/iphone/library/documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instm/UIViewController/viewDidLoadhttps://developer.apple.com/iphone/library/documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instm/UIViewController/viewDidLoadhttp://2.bp.blogspot.com/_ixq8Dp4ESMo/SgW_3OZ2cGI/AAAAAAAAAHg/lfkXNL7DuNQ/s1600-h/FinalApp.jpghttp://developer.apple.com/iphone/library/documentation/UIKit/Reference/UINavigationController_Class/index.htmlhttp://developer.apple.com/iphone/library/documentation/Cocoa/Reference/Foundation/Classes/NSMutableArray_Class/index.htmlhttp://www.sqlite.org/index.htmlhttp://www.iphonesdkarticles.com/search/label/SQLitehttps://developer.apple.com/iphone/library/documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instm/UIViewController/viewDidLoadhttp://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableView_Class/index.html
  • 7/27/2019 Creating a Simple Table View

    2/3

    which is called when the view is loaded. This is how the header file and viewDidLoad method in

    the implementation file looks like

    #import

    @interface RootViewController : UITableViewController {

    NSMutableArray*listOfItems;

    }

    @end

    //viewDidLoad method declared in RootViewController.m

    -(void)viewDidLoad {

    [super viewDidLoad];

    //Initialize the array.

    listOfItems =[[NSMutableArray alloc] init];

    //Add items

    [listOfItems addObject:@"Iceland"];

    [listOfItems addObject:@"Greenland"];

    [listOfItems addObject:@"Switzerland"];

    [listOfItems addObject:@"Norway"];

    [listOfItems addObject:@"New Zealand"];

    [listOfItems addObject:@"Greece"];

    [listOfItems addObject:@"Rome"];

    [listOfItems addObject:@"Ireland"];

    //Set the title

    self.navigationItem.title =@"Countries";

    }

    //dealloc method declared in RootViewController.m-(void)dealloc {

    [listOfItems release];

    [super dealloc];

    }

    Array listOfItems is declared in RootViewController.h file and is of type NSMutableArray, it

    is also released in the dealloc method as shown above.

    In viewDidLoad method, we allocate memory and initialize the array and add 8 objects to it. Theview of the navigation bar is set to Countries. Now somehow we need to tell the table view to

    display the items in the array.

    Customize the number of rows in the table viewThe first thing we have to do is, tell the table view how many rows it should expect and this is

    done in tableView:numberOfRowsInSection. This method returns an integer which is the numberof rows that the table view will display. Since our array consists of 8 objects, we will pass the

    count message to the array. This is how the code looks like

    http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableViewDataSource_Protocol/Reference/Reference.html#//apple_ref/occ/intfm/UITableViewDataSource/tableView:numberOfRowsInSection:http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableViewDataSource_Protocol/Reference/Reference.html#//apple_ref/occ/intfm/UITableViewDataSource/tableView:numberOfRowsInSection:
  • 7/27/2019 Creating a Simple Table View

    3/3

    //RootViewController.m

    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:

    (NSInteger)section {

    return[listOfItems count];

    }

    Display data in a table cell.Now that the table view knows how many rows to display, we need to display the actual text

    which goes in a table view cell. The table view is made of table rows and rows contains tablecell. This is done in tableView:cellForRowAtIndexPathwhich is called n number of times,

    where n is the value returned in tableView:numberOfRowsInSection. The method provides

    indexPath which is of typeNSIndexPath and using this we can find out the current row number

    the table view is going to display. This is how the code looks like

    //RootViewController.m

    -(UITableViewCell *)tableView:(UITableView *)tableView

    cellForRowAtIndexPath:(NSIndexPath*)indexPath {

    staticNSString*CellIdentifier =@"Cell";

    UITableViewCell *cell =[tableView

    dequeueReusableCellWithIdentifier:CellIdentifier];

    if(cell ==nil){

    cell =[[[UITableViewCell alloc] initWithFrame:CGRectZero

    reuseIdentifier:CellIdentifier] autorelease];

    }

    // Set up the cell...

    NSString*cellValue =[listOfItems objectAtIndex:indexPath.row];

    cell.text = cellValue;

    return cell;}

    In the code above, we first initialize the cell if required. Then get the string from the array, by

    passing objectAtIndex method to the receiver, with the current row number. The cellValue is

    then set to the text of the cell and the cell is returned. Run your application to see the eight rows

    in the UITableView.

    ConclusionUITableView really makes it easy to display list of items, by configuring few simple methods. Ihope this tutorial helped you in getting started. I know this tutorial is really simple but this way I

    really get to concentrate on one problem at a time. In my next tutorial,I will show you how toload a detail view and pass data to it.

    http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableViewDataSource_Protocol/Reference/Reference.html#//apple_ref/occ/intfm/UITableViewDataSource/tableView:cellForRowAtIndexPath:http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableViewDataSource_Protocol/Reference/Reference.html#//apple_ref/occ/intfm/UITableViewDataSource/tableView:cellForRowAtIndexPath:http://developer.apple.com/iphone/library/documentation/UIKit/Reference/NSIndexPath_UIKitAdditions/Reference/Reference.htmlhttp://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableViewDataSource_Protocol/Reference/Reference.html#//apple_ref/occ/intfm/UITableViewDataSource/tableView:cellForRowAtIndexPath:http://developer.apple.com/iphone/library/documentation/UIKit/Reference/NSIndexPath_UIKitAdditions/Reference/Reference.html