If my tutorial help you then please donate, so that i continue writing free tutorials for every developer/programmer/freelancer
Introduction:
I am going to write series of UITableView tutorials (Video Tutorials as well). My target is to make the customized UITableView using UITableViewCell which is requested on “Request Tutorial” page. Following are the list of tutorials, which I will be posting on this blog:
1. Create a Simple UITableView [Populate UITableView With Array]
2. Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath]
3. Grouped UITableView [Using Interface builder]
4. Tips for UITableView Design [Change UITableView properties i.e background colour, accessory type, add footer and header]
5. Add, Delete & Re-order UITableView rows
6. Creating UITableView using UITableViewCell
7. Adding Pictures into your UITableView using Interface builder
8. UITableView & UITableViewCell examples and tips
[Note: If you want more tutorials on UITableView or UITableViewCell, then add a comment on "Request Tutorial" Page]
Idea of this tutorial:
UITableViewCell tutorial will explain how you can use UITableViewCell in UITableView. Custom UITableViewCell using Interface builder makes table view design very easy. Using UITableViewCell gives you lot of customization over the design of each row. You can easily reduce number of code lines by using UITableViewCell (i.e reduce customization code and easy to manage your table). There are few things which are little hard to do using UITableView but using UITableViewCell they are easily manageable i.e you can manage your cell code in a separate class, you can change the design of cell using nib files more easily then writing codes. So in my point of view, custom UITableViewCell using Interface builder makes your life more easy while developing applications for iPhone.
So in this tutorial, i will write only UITableViewCell and link it with UITableView. I will be using part 2 code, which you can grab from here. Final output of this code will be same as part two but to change the design on table will be really simple. You can watch the video tutorial at the end to skip all the text.
customize UITableView using UITableViewCell
Steps to follow
Follow these steps to achieve the output like above:
Step 1: Open the SimpleTable project in Xcode (you can grab this code from here. [Note: I am using UITableView part 2 code here]). In Xcode, ‘Group and Panel’ right click on classes, select >Add> New File..>. Now select UITableViewCell and name it ‘TableViewCell’, press finished.
Add UITableViewCell
Select UITableViewCell from wizard
Name the UITableViewCell class
Step 2: Now in ‘TableViewCell.h’ file add following code before @end and after #import:
@interface TableCellView : UITableViewCell {
IBOutlet UILabel *cellText;
}
- (void)setLabelText:(NSString *)_text;
Step 3: Now open ‘TableViewCell.m’ file and write a setter method for label like this:
- (void)setLabelText:(NSString *)_text;{
cellText.text = _text;
}
Step 4: Open SimpleTableViewController.h file and write following:
#import "TableCellView.h"
@interface SimpleTableViewController : UIViewController {
IBOutlet UITableView *tblSimpleTable;
NSArray *arryData;
IBOutlet TableCellView *tblCell;
}
Step 5: Open SimpleTableViewController.h file and import ‘TableCellView.h’ at top.
#import "TableCellView.h"
In cellForRowAtIndexPath method remove all the code or either comment the code. Add the following code in that method:
static NSString *MyIdentifier = @"MyIdentifier";
MyIdentifier = @"tblCellView";
TableCellView *cell = (TableCellView *)[tableView dequeueReusableCellWithIdentifier:MyIdentifier];
if(cell == nil) {
[[NSBundle mainBundle] loadNibNamed:@"TableCellView" owner:self options:nil];
cell = tblCell;
}
[cell setLabelText:[arryData objectAtIndex:indexPath.row]];
return cell;
Step 6: Now open NextView.xib file from your Xcode project. Press cmd + shift + s to save as this file, and give it a name TableViewCell and ‘Add’ to ‘SimpleTable’ project:
Save As nib file
Name UITableViewCell xib file
Save nib file
Step 7: Now in TableViewCell.xib file, select ‘View’ and then select Edit>Delete (or press ‘back space’ button) to remove the View from xib file
Remove View from TableCellView.xib
Deleted View from TableCellView
Step 8: Now press cmd + shift + l to open Library. Drag ‘Table View Cell’ to ‘TableViewCell.xib’ file. Select ‘Table View Cell’ and press cmd + 4 and write ‘TableCellView’ in class and press cmd + 1 and write ‘tblCellView’ in Identifier.
Add UITableViewCell to nib file
Assign Class to Table Cell View
Add Identifier to Table Cell View
Step 9: Now select ‘Files Owner’ and press cmd + 4 and type ‘SimpleTableViewController’ in class. Also press cmd + 2 and drag tblCell to ‘Table View Cell’ like in the below picture:
Give class name to File’s Owner
Map UITableViewCell to Table View Controller
Step 10: Now drag a label inside UITableViewCell and select ‘TableViewCell’, drag cellText with label.
Map Label
Step 11: Save the interface builder and your code. Run the application and you will see the output like this:
Custom UITableViewCell Output
Looked at bottom pictures to change the color of labels and cell Accessory:
Change Table Cell View Accessory
Change Label Text colour
Label Colour text change
Run the application and you will see the final output.
Final Output of Custom UITableViewCell
Custom UITableViewCell code
You can grab this code from here.
Now watch me doing it
Popularity: 100% [?]
Related posts:
- iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder Creating iPhone Application: Introduction: I am going to write series...
- iPhone Programming Tutorial – {Part 1} UITableView using NSArray Creating iPhone Tutorial Introduction: I am going to write series...
- iPhone Programming Tutorial: {Part 3} Grouped UITableView I am going to write series of UITableView tutorials (Video...
- iPhone Programming Tutorial: Complete List of UITableView Tutorials + Videos Complete List of UITableView tutorials plus few video tutorials as...
- iPhone SDK Tutorial – {Part 5}: Add, Delete & Reorder UITableView Rows This tutorial will explain, how you can change the UITableView...
[...] colour, accessory type, add footer and header] 5. Add, Delete & Re-order UITableView rows 6. Creating UITableView using UITableViewCell 7. Customizing UITableView using UITableViewCell 8. UITableView & UITableViewCell examples and [...]
[...] colour, accessory type, add footer and header] 5. Add, Delete & Re-order UITableView rows 6. Creating UITableView using UITableViewCell 7. Customizing UITableView using UITableViewCell 8. UITableView & UITableViewCell examples and [...]
very nice tutorial, thanks
keep visiting as i m going to write more post on UITableView and UITableViewCell including more customization.
Having odd issues with my customcell view., will try to use ur tutorial tomorrow.,
[...] colour, accessory type, add footer and header] 5. Add, Delete & Re-order UITableView rows 6. Creating UITableView using UITableViewCell 7. Customizing UITableView using UITableViewCell 8. UITableView & UITableViewCell examples and [...]
[...] iPhone Video Tutorial List « iPhone SDK Tips: Dialing number, opening Email & SMS applications iPhone SDK Tutorial – {Part 6}: Creating custom UITableViewCell Using Interface Builder [UITab... [...]
[...] iPhone Tutorial — Part 5: Add, Delete & Re-order UITableView rows iPhone Tutorial — Part 6: Creating UITableView using UITableViewCell Using Interface Builder iPhone Tutorial — Part 7: Adding Pictures into your UITableView using Interface builder iPhone [...]
[...] colour, accessory type, add footer and header] 5. Add, Delete & Re-order UITableView rows 6. Creating UITableView using UITableViewCell 7. Adding Pictures into your UITableView using Interface builder 8. UITableView & [...]
[...] colour, accessory type, add footer and header] 5. Add, Delete & Re-order UITableView rows 6. Creating UITableView using UITableViewCell 7. Adding Pictures into your UITableView using Interface builder 8. UITableView & [...]
Thanks, closest yet to what I’m trying. Suppose the Cell view had a UITextLabel that gets edited. How do I get that change back to the table controller (to save the change)? Related, how do I call every cell (e.g., enabled, to turn edit on/off), since controller doesn’t have array of tblCells?
Hi, thanks for all the tutorials!
I would like to know if it is possible or not, to create a specific view for each cell.
I saw a lot of tutorials which are using the label to change a word, but I would like to create a table view looking like this
TABLE VIEW
CELL1
CONTENT1
CELL2
CONTENT2
CELL3
NEW_TABLEVIEW
CELL3.1
CELL3.2
CELL4
CONTENT4
And this using a specific view for each one, so that I can configure them just like I need. A label only contains text, but it would be interesting to be able to change more than that. There’s no tutorial like this on all the world wide google
Hope you can do that…
Hello,
It works! Thanks.
In this line
[[NSBundle mainBundle] loadNibNamed:@”TableCellView” owner:self
Shouldn’t we use TableViewCell instead of TableCellView ?
In the following command you are telling us
“a name TableViewCell and ‘Add’ to ‘SimpleTable’ project:”
If they are different it doesn’t work.
Thanks again, best regards,
yara
Hi!
I tried to insert the TableCellView.xib in SimpleTableViewController.xib;
Steps are:
1)I cut the TableCelView from TableCellView.xib
and paste it inside the SimpleTableViewControler.xib
2)I deleted the TableCellView.xib
3)I made the appropiate connection in SimpleTableViewControler.xib with TableCellView item.
4)I deleted the line
[[NSBundle mainBundle] loadNibNamed:@”TableCellView” owner:self options:nil];
Now,the application runs successfully but it shows only one item in the tableView. Also the height of the Cell is very much stretched.
Pleae tell me how to fix it.
I require to contain the XIBs in a sigle filr.
Hi,
is there any tutorials for creating chat message bubbles table view.