Tips to create Custom Cells And Delegates

Tips to create Custom Cells And Delegates

Create A New Project

Open Xcode, click on File->New->Project and select Single View Application. Name the project Tableview Tutorial 3 and set class prefix as TVT. Create the project.
– Download the resources here. Unzip them and drag them to your project’s navigation panel. Make sure copy items into destination group’s folder is selected, leave the rest of the fields as they are and click finish.
– Next, Right click on Tableview Turorial 3 folder in the navigation panel and select new file. Select Objective-C class. Set the class name as TableCell and subclass of UITableViewCell. This class will handle our cell methods, properties and delegate.
Creating Views

– Go to mainstoryboard.storyboard in the navigation panel, select file inspector in the Utilities panel and deselect Autolayout. We will learn about autolayout in the later tutorials.
– Drag a UITableview from object library on our view controller and re-size it to cover the entire screen. Create an outlet in TVTViewController.m or .h and name it tableView.
-Keeping the tableview selected, click on attributes inspector and set the following properties
Content – Dynamic Properties
Prototype cells – 1
-Next click on the cell that shows when you set Prototype cell =1 and set the properties
In the identity inspector set class as TableCell (the name of the class we created before). This will link the cell’s view to our custom class.
In the attributes inspector, set Style as custom and Identifier as TableCellID
In the size inspector, check custom and set row height = 150.
-Let’s make our cell more custom by giving it a different syle. On the newly created cell, make the following changes –
Drag an imageView to fill out the entire cell and set it’s image as cell_bg.jpg. This will act as cell background
Next drag a button and place it somewhere on the lower right. Set it’s image as delete.png. Also create an IBAction as deleteTapped in the class TableCell.m
Drag another imageView and place it somewhere on the middle left and set it’s outlet as cellImage in TableCell.h. This will be used to show a thumbnail for each cell.
Drag a UILabel whereever there is some place left on the cell and set it’s outlet as title.
Your cell should look something like this –
ios Uitableview Tutorial – custom cell
Let’s Code –

We will first setup our cell to show the title and corresponding thumbnail image and later on we will make a custom delegate for our cell for delete button to work.
Replace the TVTViewController.h with the following –

#import <UIKit/UIKit.h>
#import "TableCell.h"

@interface TVTViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

@property (strong, nonatomic) NSMutableArray *tweetsArray;

@end
Next, replace the viewDidLoad method in TVTViewController.m with -

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//1
self.tableView.delegate = self;
self.tableView.dataSource = self;

//2
NSDictionary *dict1 = [NSDictionary dictionaryWithObjectsAndKeys:
@"1.png",@"image",
@"Always put your fears behind you and your dreams in front of you.",@"tweet", nil];
NSDictionary *dict2 = [NSDictionary dictionaryWithObjectsAndKeys:
@"2.png",@"image",
@"A relationship with no trust is like a cell phone with no service, all you can do is play games.",@"tweet", nil];
NSDictionary *dict3 = [NSDictionary dictionaryWithObjectsAndKeys:
@"3.png",@"image",
@"People should stop talking about their problem and start thinking about the solution.",@"tweet", nil];

self.tweetsArray = [NSMutableArray arrayWithObjects:dict1,dict2,dict3, nil];

}
1)First we set the datasource and delegate of tableview as our current class, i.e. self.
2)We create 3 dictionaries, one for each cell, each consisting of an image and a tweet. The image name is the same as in our resources folder which we downloaded and dragged to our project earlier. We then add these 3 dictionaries in our tweetsArray. Although you should not store your data this way but for the sake of this tutorial, this method should just work fine.
Next add the following tableview methods below viewDidLoad in TVTViewController.m -

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.tweetsArray.count;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 150;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *cellIdentifier = @"TableCellID";
//3
TableCell *tablecell = (TableCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];

//3.1 you do not need this if you have set TableCellID as identifier in the storyboard (else you can remove the comments on this code). Do not use this code if you are following this tutorial
//if (cell == nil)
// {
// cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier];
// }

//3.2
NSDictionary * dict = [self.tweetsArray objectAtIndex:indexPath.row];

tablecell.title.text = [dict objectForKey:@"tweet"];

UIImage *imageIcon = [UIImage imageNamed:[dict objectForKey:@"image"]];
[tablecell.cellImage setImage:imageIcon];

//4
return tablecell;

}

3) Here we are using TableCell *(our custom class ) instead of UITableViewCell * so that we can access our custom properties (cellImage and title) directly from here.
3.2)We fetch the dictionary corresponding to the cell using indexPath and set our cell’s title and image.
Run the App (Command+R) and you should be able to see your first custom cell. Only the delete button will not work which we will handle now!
Custom Delegates – iOS TableView Tutorial

We are now going to create our very first custom delegate. You have been setting tableview.delegate = self; many times before without knowing whats really happening. Well the time has come for you to know the ultimate secret. Well! not so ultimate or secret. Anyways lets start
Firstly, we will create a delegate – Go to TableCell.h and add the following lines of code right before @interface:TableCell and right after #import statements if any –

@protocol TableCellDelegate
@optional
- (void)deleteButtonTappedOnCell:(id)sender;
@end

5) This is how we make a delegate @protocol delegate-name <NSObject>, followed by delegate methods – (such as cellForRowAtIndexPath as in the case of tableview.
Next, add the following property inside @interface and @end
@property (nonatomic, strong) id delegate;
Here the name delegate can be changed to anything. So if we replace delegate as someDelegate, the only difference would be that while setting the delegate we will use tablecell.someDelegate = self;
Your tableCell.h should look something like this –

#import <UIKit/UIKit.h>

//5
@protocol TableCellDelegate
@optional
- (void)deleteButtonTappedOnCell:(id)sender;
@end

@interface TableCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UILabel *title;
@property (weak, nonatomic) IBOutlet UIImageView *cellImage;
@property (nonatomic, strong) id delegate;

@end
Next, go to TableCell.m and add the following line inside our IBAction for delete button -
[self.delegate deleteButtonTappedOnCell:self];
What this does is that whenever delete is tapped on cell, this code is called and the delegates are notified that there is some message for them.
This is all that happens in the back. Now we will set our class TVTViewController as delegate or listener to tablecell’s delegate.
Go to TVTViewController.h and replace
@interface TVTViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>
with
@interface TVTViewController : UIViewController <UITableViewDataSource, UITableViewDelegate,TableCellDelegate>
Sounds familiar, doesn’t it? That’s what you have been doing before with UITableViewDelegate .
Next go to TVTViewCOntroller.m and add the following line inside cellForRowAtIndexPath right below //4.

tablecell.delegate = self;
this will set the current class as delegate of each cell.
Finally add the delegate method -

- (void)deleteButtonTappedOnCell:(id)sender {
NSIndexPath *indepath = [self.tableView indexPathForCell:sender];

[self.tweetsArray removeObjectAtIndex:indepath.row];

[self.tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indepath]
withRowAnimation:UITableViewRowAnimationAutomatic];

}

This method will be called whenever delete is tapped on a cell. First we get the indexPath for the cell tapped. We then remove the object from the tweets array. We could have called [tableView reloadData]; but we use the above method deleteRowsAtIndexPath for a sweet animation when deleting.