Customize table view cell using storyboards

Customize Table View Cell Own with Objective C


Before going to my this tutorials read how to create Table View in IOS with objective c:Click here

Learn objective c from here:Click here

Learn Swift from here:Click here

As you have read in my last tutorials of creating Table View with Objective c by using default template. That is very easy to create having Already connected label,image view,Detail label.

But that is used in some cases where you have very less time to write. In cases like simple display of data.

You can not customise Cell of that table view.According to that template Image View comes first so you can not change.

But with the introduction of prototyping of cell in stroyboard it is now easy to customise the cell.
You can create your table view according to need.
Whereever place image view,button,label or else.

Before the introduction to prototyping of cell in storyboard , you need to add xib files cell implementation and load in project as UItableViewstyle. Now it is easy with storyboards.


Final Output will be:

It is looking bad but currently think of Custom cell setting i will also write tutorial on setting separate background setting images.

Lets go with Customize the Table View Cell Implementation.


First create simple view controller project as like below:

Now go to storyboard and make design like following:

Drag table View .

Change prototyping of cell to 1 in Right Identity Inspector.

Drag Image view and label towards the table view.Xcode automatically change inside the cell view.

For simplicity i have also Drag Navigation Bar and shows about Student Details.But currently i have not applied Auto Layout in this Tutorials.I will write tutorials also about it.

Add class file inside project.Name it as SampleStudent.


In SampleStudent.h write property for each UI Control.

@property(nonatomic,weak) UIImageView *studentimage;
@property(nonatomic,weak) UILabel *studentlabel;
@property(nonatomic,weak)UIImageView *studentimage2;


And make sure that class must be inherited from UITableViewCell.


In SampleStudent.m

@synthesize studentimage=_studentimage;
@synthesize studentlabel=_studentlabel;
@synthesize studentimage2=_studentimage2;



You think i have not write IBOutlet for connecting Properties.
 Hows the Controls binds with property?


Just put in mind that IBOutlets can not work for Repeating attributes.Our 1 Prototypes cell is repeating. So each time when IBOutlet Make request to UI Control.It is time consuming process.Also Xcode generates Error for it.Xcode is very smarter.

But How we connect?

Just put tag number in identity inspector of property inside table view cell.

like that:

Now In View Controller.h

Add Protocols UITableViewDelegate,UITableViewDataSource 

@interface ViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>

{

    NSArray *studentdata;

}

-(void)loadStudentData;

In View Controller.m

load data before view is loaded from viewDidLoad method.

 [self loadStudentData];

Add data loading method with data from array.

-(void)loadStudentData

{

    studentdata =[NSArray arrayWithObjects:@"abc",@"def",@"ghi",@"jkl",@"mno",@"pqr",@"stu",@"vwx",@"uza",@"iop",@"uio",@"asd",@"cvb",@"mnb",@"qwe",@"ert",@"poi",

                  nil];

}

If you do not know about these below method: Click here

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

{

    return [studentdata count];

    

}

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

{

    static NSString *studentidentifier=@"StudentId";

    SampleStudent *studentcell=(SampleStudent *)[tableView dequeueReusableCellWithIdentifier:studentidentifier];

    studentcell.studentlabel=(UILabel *)[studentcell viewWithTag:100];

    studentcell.studentlabel.text=[studentdata objectAtIndex:indexPath.row];

    studentcell.studentimage=(UIImageView *)[studentcell viewWithTag:200];

    studentcell.studentimage.image=[UIImage imageNamed:@"images.jpeg"];

    studentcell.studentimage2=(UIImageView *)[studentcell viewWithTag:300];

    studentcell.studentimage2.image=[UIImage imageNamed:@"flower.jpg"];

    return studentcell;

}

Above code is very easy.Just make the reference with dequeuereusablecellwithidentifier through SampleStudent class.

Now that object has contain all property of sample class. But property do not bind with UI Control. You can bind with UI Control Through tag number having NSInteger value. 

And cell is then Returning.

I have also write delegate method to make height of cell.If you do not know about delegate object click here:Life Cycle Of IOS.

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    return 78;

}

If you want i will publish my next tutorial in Customize table View cell with Xib then comment below. Otherwise I will Publish my next tutorial on Handling row selection.

And Final Output will be Resulted as:

Some of you think its ugly i will make tutorial also on setting background images. Do not worry about just think of setting custom cell yet.

Source Code Available here:Download Here

I hope you like my tutorials.If you have any query comment here or mail me.

My next tutorial will be Handling row selection in Table View.