Creating custom UITableViewCell Using Interface Builder [UITableView]

Just like user select one row and that row text will be set as product text in next view. Out put of this tutorial will look like this






1. You have to add NavigationController in your application to move from one screen to other. Its really an easy way to navigate from one view to other. So in this tutorial I am going to use UINavigationController. Open ‘SimpleTableAppDelegate.m’ file and change the function ‘applicationDidFinishLaunching’ so that it looks like this:

- (void)applicationDidFinishLaunching:
(UIApplication *)application {
UINavigationController *navController = 
[[UINavigationController alloc] initWithRootViewController:viewController];
// Override point for customization after app launch
[window addSubview:navController.view];
[window makeKeyAndVisible];
}

2. Open the SimpleTable code(you can grab it from here). Right click on classes folder in Xcode and select ‘Add > New File…’.



3. Select UIViewController and click Next. Name is ‘NextViewController.m” and press ‘Finish’ button.





4. Open ‘NextViewController.h’ file and write this code after Import and before @end

@interface NextViewController : UIViewController {
IBOutlet UILabel *lblProductTxt;
}

- (IBAction) changeProductText:(NSString *)str;

5. Open NextViewController.m file and write this code before @end

- (IBAction) changeProductText:(NSString *)str{
lblProductTxt.text = str;
}

6. Now last step from xcode is to open ‘SimpleTableViewController.m’ file. Add #import “NextViewController.h” after first import. Write the following code in this method ‘didSelectRowAtIndexPath’ (which was empty)

- (void)tableView:(UITableView *)tableView 
didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
NextViewController *nextController =
 [[NextViewController alloc] initWithNibName:@"NextView"
 bundle:nil];
[self.navigationController pushViewController:nextController 
animated:YES];
[nextController changeProductText:[arryData 
objectAtIndex:indexPath.row]];
}

7. Now open Interface builder and click on ‘File > New..’ and then click again on ‘File > Save’. Name it ‘NextView’ and save this file inside your SimpleTable Project which is in my case in Desktop. It will prompt you to add this file to your project. Click on check box and clicked ‘Add’ button








8. You can see NextView.xib file inside your Xcode project “Group & Files panel under ‘Nib Files’





9. Select File’s Owner in NextView.xib file and press Cmd + 4 to open “Identity Inspector”( Please make sure you select the File’s owner before openning the “Indentity Inspect”). In class write ‘NextViewController’ (Name of the classs). Place two labels on ‘NextView.xib’ file like the picture and map lblProductTxt with ‘txt’ label and map ‘view’ with ‘View’.






 

10 To set the title of any view you have to write one line code inside your ‘viewDidLoad’ method (it will be commented in your ViewController classes). So in SimpleTableViewController.m file write (or uncomment viewDidLoad method) following line:

self.title = @"Simple Table Exmaple";

11. Save this project and click on “Build & Go” inside Xcode. You will see a table. Click on any row and you will navigate to another View.
Final output will look like this:





You can grab this code from here.
You can watch the screen cast here.


------------------------- The above post is for Creating UITableview ----------------------

------------------------The following post is for Custom cell -------------------------------

So in this tutorial, i will write only UITableViewCell and link it with UITableView. I will be using above 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