Displaying UITableView

The most important component in a mobile is table, your music player contains a list of songs which you touch they begin to play well the component which holds all those songs is your table. In this blog i will demonstrate you on how to display names in the table from an array. Here's a glimpse of our final output

Step 1: Open Xcode and create a window based application and add a class file, only this time it wont be a view controller class it would be a UITableViewController subclass.

Now save this UITableViewController subclass file with an appropriate name.

Step 2: Go to the .h file of your tableview controller class, i have named my file as MyTableViewController, declare an object of NSArray class which will hold the names of the countries which we want to display in our table, here's the code for that

@interface MyTableViewController: UITableViewController {

 NSArray *table_content;

}

@end

Step 3: Now go to the .m file of MyTableViewController and add objects to the array called table_content in the init method

- (id)initWithStyle:(UITableViewStyle)style {

    if (self = [super initWithStyle:style]) {

table_content = [[NSArray alloc]initWithObjects:@"India",@"Germany",@"USA",@"South Africa",@"China",@"Japan",nil]; 

    }

    return self;

}

Step 4: since you have took a UITableViewController subclass then in this case you will be provided by the datasource and delegate methods by the tableviewcontroller subclass in your source code file here's how those method looks like

Let me give you an small explanation on those datasource protocol methods of the UITableViewController class

UITableViewDataSourceProtocol: The UITableViewDataSource protocol is adopted by an object that mediates the application’™s data model for a UITableView object. The data source provides the table-view object with the information it needs to construct and modify a table view. As a representative of the data model, the data source supplies minimal information about the table view’s appearance. The table-view object’s delegate—an object adopting the UITableViewDelegate protocol—provides that information. The required methods of the protocol provide the cells to be displayed by the table-view as well as inform the UITableView object about the number of sections and the number of rows in each section. The data source may implement optional methods to configure various aspects of the table view and to insert, delete, and reorder rows. Many methods take NSIndexPath objects as parameters. UITableView declares a category on NSIndexPath that enables you to get the represented row index (row property) and section index (section property), and to construct an index path from a given row index and section index (indexPathForRow:inSection: class method). (The first index in each index path identifies the section and the next identifies the row.)

UITableViewDelegate: The delegate of a UITableView object must adopt the UITableViewDelegate protocol. Optional methods of the protocol allow the delegate to manage selections, configure section headings and footers, help to delete and reorder cells, and perform other actions. Many methods of UITableViewDelegate take NSIndexPath objects as parameters and return values. UITableView declares a category on NSIndexPath that enables you to get the represented row index (row property) and section index (section property), and to construct an index path from a given row index and section index (indexPathForRow:inSection: method). Because rows are located within their sections, you usually must evaluate the section index number before you can identify the row by its index number.

a) numberOfSectionsInTableView:  - Specifies the total number of sections in a table view.

b)tableView: numberOfRowsInSection: - how many rows would be present in a table.

c)tableView: cellForRowAtIndexPath: - set the text for table.

d)tableView: didSelectRowAtIndexPath: - performs some action when the user selects any row of the table. 

These are the important methods which will be provided by the UITableViewController subclass by default in your source code file.

Step 5: now we will set the row and text of our table with the help of the functions tableView numberOfRowsInSection and tableView cellForRowAtIndexPath.

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

    return [table_content count];

}

The above function tells how many rows will my table have, We have used the count method of the array, as we want the rows of the table as per my array count.

Now the next function is tableView cellForRowAtIndexPath and the only one line of code that you have to write in it is 

cell.textLabel.text = [table_content objectAtIndex:indexPath.row];

Step 6: Now go to the app delegate .m file and add the view to the window like this

#import "SimpleTableAppDelegate.h"

#import " MyTableViewController.h"

@implementation SimpleTableAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch

 MyTableViewController *mtvc = [[MyTableViewController  alloc]initWithStyle:UITableViewStyleGrouped];

        [window addSubview:mtvc.view];

        [window makeKeyAndVisible];

}

Step 7: Build and run the application you will see the following output

Final output

Display Selected Text: Lets say you want to display the selected text of the Table into an alert view then in that case you can use the tableView didSelectRowAtIndexPath function. Here's the code to do that

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

NSString *str = [NSString stringWithFormat:@"%@",[table_content objectAtIndex:indexPath.row]]; //typecasting

UIAlertView *alertbox = [[UIAlertView alloc]initWithTitle:@"Table Demo" message:str delegate:nil cancelButtonTitle:@"Cancel" otherButtonTitles:@"OK",nil];

 [alertbox show];

}

Now when you run the application and select any of the rows of the table you will get the output just like the below images