Upload
chuot-fx
View
213
Download
0
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.html7/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