Create TableView in IOS

Create TableView in IOS

Have you read last tutorial of View Controller or not ? Click Here

Learn Objective C from here:Click here
Learn Swift from here:click here

TableView is the main common UI elements in IOS.Whenever you make app for iphone You most probably familiar with TableView.

In General If you want to display data for your office work Tables are used due to their flexible and easy implementation.
Table is collection of rows and columns arranged in the form of cell.

Similarly in IOS if you want to display data UITableView class is used who manages Table View User Interface Control.

There are two protocol delegates and datasource who manages the behaviour to data for TableView Control respectivally.

If you have not study Protocols click here:Protocols in Objective C


DataSource:It is used to control data inside the Table View.

Delegate:It is used to control behaviour of table.

What is delegate object?
For checking App life cycle:Click here.


You can add header and footer in table view according to need.

My system runs on Xcode 6.1.1 for running following tutorials. You can use according to your needs.


There could be many types of TableView
From according to static and dynamic,grouped or ungrouped,section or rows.

Static Table View: Static Table View Display those data which is grouped or divide in sections and having data not changed their value at run time. 

Dynamic TableView: Dynamic Table View display data in the form of ungrouped or rows and columns with containing data at run time.

First i describe tutorials on Dynamic Table View.
After that i will write Static Table View.

In Dynamic Table View i will describe following contents:

create table view.
Handling row selection in Table View.
Delete row from table view.
dynamic self sizing Cell.
create swipeable table view with more display options.
create pulling and then refreshing cells of table view.
play videos from tableviews and many more.


TableView tamplate can be according to your choice manually or default template.

First we use default template.
Default Template can be
UITableStyleDefault,UITableStyleSubTitle,UITableStyleValue1,UITableStyleValue2..


I will describe all these default table template time to time when there used. Read my tutorials carefully
In this tutorial i used UITableStyleDefault,UITableStyleSubTitle.


Lets start with creating Table View Application.

Final output will be shown below:

There are three methods used behind the loading of data source.
1.)Sections of table view: it is used to describing how many sections included in Table View. It is Optional method describe in Protocols.
You can check here how to create optional method in protocols: click here
This method is used when creating static table view.

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

above method is used by passing UITableViewControl as arguments.


2.)Rows in Table View: How many rows you want to create in table view.Rows can be depend on you length of data you need not to remember only passing indexpath as agrument. see in method written below:

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

It has two arguements one is table view your UI control and other is section.

It returns the integer value.

3.)Cell for rows at index path: Above method only count number of rows but how to make cells it is the work of CellforRowsAtIndexPath

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath


It returns the cell for table view.
This method has two arguements IndexPath and tableView.
IndexPath manages Indexes for data Rows.

First create View Controller Project as shown in figure.

Now Drag and drop TableView in Storyboard.

Now run your app it look like this in IOS simulator.

Now think that when data comes, Data source methods are not called. From where these methods comes as i write above UITableViewDataSource Protocol is used.

Now in ViewController.h 

write below code

@interface ViewController : UIViewController<UITableViewDataSource>

{

 NSArray *studentdata;   

}

-(void)loadStudentData;

Where array is used to store data of student. 

A method is used to load data in array.

Learn array from here:click here

In ViewController.m

-(void)loadStudentData

{

  studentdata =[NSArray arrayWithObjects:@"abc",@"def",@"ghi",@"jkl",@"mno",@"pqr",@"stu",@"vwx",@"uza", nil];

}

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

{

    return [studentdata count];

    

}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

static NSString *studentidentifier=@"studentid";

    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:studentidentifier];

    if (cell==nil) {

        cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:studentidentifier];

    }

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

    return cell;

}

Above code is easy to remember just except dequeueReusableCellWithIdentifier.

for Performance issues in IOS when you drag the table view instead of creating new cell checking done in dequeue for those cell containing cell area are behind the screen then those area will be occupied by NewContent and cell is rewrite with that value.

Where to call loadStudentData in ViewDidload method.
It is the method responsible for loaded data before view is printed.

Now Data Source is not connected just hold down ctrl  key on table view and drag towards view controller. You see datasource and delegate click on data source.

You can see the connections on connections inspector.As shown below:

Now the output will be:

For displaying image view Place this code after cell.textlabel.text line.

cell.imageview.image=[uiimage image named:@"images.jpeg"];

As you have seen it shows same image you can pass array as like above for taxtlabel.

Also it looks odd you need to add auto layout.I will write auto layout tutorial lator for now take my below auto settled project.

Final output will be:

For UITableStyleSubTitle:


change code after cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStylesubtitle reuseIdentifier:studentidentifier];

and add code after cell.imageview


cell.DetailTextLabel.text=@"Student Names";

Output will be:

Now you have seen width between the cells are very less and image is too small you can change or customise own cell in table view.

Source Code Available here:download here

I hope you like my this tutorial. If you have any query  can mail me or comment here.

My next tutorial will be: Customise Own Cell for Table View.