Wednesday, April 27, 2011

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
Picture 11 iPhone Tutorial: {Part 2} Navigatation in UITableView



Picture 12 iPhone Tutorial: {Part 2} Navigatation in UITableView

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…’.

Picture 1 iPhone Tutorial: {Part 2} Navigatation in UITableView

3. Select UIViewController and click Next. Name is ‘NextViewController.m” and press ‘Finish’ button.
Picture 2 iPhone Tutorial: {Part 2} Navigatation in UITableView


Picture 3 iPhone Tutorial: {Part 2} Navigatation in UITableView

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
Picture 4 iPhone Tutorial: {Part 2} Navigatation in UITableView

Picture 5 iPhone Tutorial: {Part 2} Navigatation in UITableView

Picture 6 iPhone Tutorial: {Part 2} Navigatation in UITableView

Picture 7 iPhone Tutorial: {Part 2} Navigatation in UITableView

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



Picture 8 iPhone Tutorial: {Part 2} Navigatation in UITableView

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’.

Picture 13 iPhone Tutorial: {Part 2} Navigatation in UITableView

Picture 9 iPhone Tutorial: {Part 2} Navigatation in UITableView


Picture 10 iPhone Tutorial: {Part 2} Navigatation in UITableView 

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:

Picture 11 iPhone Tutorial: {Part 2} Navigatation in UITableView

Picture 12 iPhone Tutorial: {Part 2} Navigatation in UITableView

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.


Picture 1 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
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.

Picture 2 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]


Add UITableViewCell
Picture 3 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]

Select UITableViewCell from wizard

Picture 4 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
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:

Picture 5 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Save As nib file
  Picture 6 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Name UITableViewCell xib file

Picture 7 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
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

Picture 8 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Remove View from TableCellView.xib
Picture 9 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
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.

Picture 10 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Add UITableViewCell to nib file
Picture 11 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Assign Class to Table Cell View

Picture 12 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
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:
Picture 13 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Give class name to File’s Owner
Picture 14 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Map UITableViewCell to Table View Controller
Step 10: Now drag a label inside UITableViewCell and select ‘TableViewCell’, drag cellText with label.
Picture 15 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Map Label
Step 11: Save the interface builder and your code. Run the application and you will see the output like this:
Picture 16 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Custom UITableViewCell Output
Looked at bottom pictures to change the color of labels and cell Accessory:
Picture 17 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Change Table Cell View Accessory


Picture 18 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Change Label Text colour


Picture 19 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Label Colour text change

Run the application and you will see the final output.
Picture 1 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Final Output of Custom UITableViewCell

Custom UITableViewCell code

You can grab this code from here.

Now watch me doing it

No comments:

Post a Comment