Introduction

In this tutorial, we are going to boost the complexity grade and construct a app in which we are going to conceive simple Table-view.

Now those who are beginner, the first question originate in their brain is “What is tableview ?”

Table View

1. Common UI element in iOS application.
2. It allows us to show data in a scrollable list of multiple ROWS.
3. It draws their row using Cells
4. It responds to selection of rows
5. You can ADD, EDIT, DELETE and REORDER rows.

Lets Create Project.

Launch Xcode, Create New Project, Select “Single View Application” and click on “Next” button.

And implement below settings :

• Product Name : “SimpleTableView” [This is going to be name of your application]
• Organization Name : “your organization name”
• Company Identifier : “your bundle identifier” [here com.education]
• Device : iPhone
• “Use Automatic Reference Counting” –> CHECK
• “Use Storyboards” –> UNCHECK
• “Include Unit Tests” –> UNCHECK

Now Select the place where you want to save the project and click “Create“.

After creating the project

First We will start from the Interface Part.

Go to “ViewController.xib”

Go to Object Library –> Select the “Table View” and Drag and drop it in view.

Now if you run the application it will simply show the blank table-view as displayed in below image :

Now we are going to write some code to show some information in table-view.

Lets start..

Go to ViewController.h file and modified it as following

I have write description for every line which we are going to add but still if you have query then free to compose in comments section.

@interface ViewController : UIViewController <UITableViewDelegate,UITableViewDataSource>

// Here is simple and short information for UITableViewDelegate and UITableViewDataSource.

/*
UITableViewDelegate : it is Protocol which we implement in our class to receive UITableview events.

[For Example : Selection on your Rows, LAYOUT methods (height of rows, header view, footer view etc...)]
*/

/*
UITableViewDataSource : it is Protocol which we implement in our class to provide data to UITableview.

[for example :  Providing data for rows.]
*/

{
IBOutlet UITableView *tbl_simple;

 // IBOutlet :  IBOutlet representing an instance variable in our class which can be visually connected to the UI object in Interface Builder (.xib) file.

NSArray *tbl_data;

// Declare an object "tbl_data" of "NSArray" class.
}

@end

In Above code we have write a line

NSArray *tbl_data;

So a question will be arise in your mind that what is “NSArray” ?

• Those who know C language they already know about Array.
  Array : it is basic data structure in computer programming
• NSArray : In Objective-C, it is a class which create and manage array. It is used to create static array which have fixed size.

and if you need dynamic array then you have to use NSMutableArray.

Go to ViewController.m file and modified it as following :
I have write description for every line which we are yogin to add but still if you have query then free to write in comments section.

Now We have to add Two datasource method which are mandatory to implement UITableViewDataSource Protocol

Those methods are :

• “tableView:numberOfRowsInSection”
• “tableView:cellForRowAtIndexPath”

Here is code for implementation file :

@implementation ViewController

- (void)viewDidLoad
{
[super viewDidLoad];

tbl_data = [[NSArray alloc] initWithObjects:@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10", nil];

 // In above line : we Initialize "tbl_data" with the objects.

 // Do any additional setup after loading the view, typically from a nib.
}

-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [tbl_data count];

 // it returns "tbl_data" array count which means it tell that this much row will be created in tableview.
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
 // This method is called every time when cell is display in tableview.

static NSString *simpleTableIdentifier = @"SimpleTableItem";
 // Here we declare static identifier which will be useful for concept of reusability.

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
 // here we create cell with ReusableCellWithIdentifier

if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
 // here we alloc cell with style and ReusableCellWithIdentifier.
}

cell.textLabel.text = [tbl_data objectAtIndex:indexPath.row];
 // here we set our tbl_data to cell's label.

return cell;
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
}

@end

Now Save and Run the application.

oops..!! it again show the blank table……!! 🙁

We have written all the code…where we made the mistake ?

There is one thing left….

we forgot to Connect Datasource and Delegate.. and IBOutlet (Optional)

lets finish this too

Go to “ViewController.xib” –> File’s Owner –> Connections Inspector

it will look like below image :

Set an outlet to table-view.

This is how connection inspector look after connecting outlet for Table View for File’s Owner.

Now we connect Datasource and Delegate.

For that go to

ViewController.xib –> Table View –> Connections Inspector

Set Datasource

Set Delegate

This is how connection Inspector look after setting Datasource and Delegate for Table View.

Now Save and Run your Program.

Yess…!!! its displaying the data… 🙂

Your view look like this…

Its Done.

If you have any inquiry or remarks , seem free to comment. I would love to hear them.

To Download the source code click here : Download source code