Implement a Custom Accessory View For UITableView in iPhone

n this application we’ll see how to implement a custom accessory view for your UITableView in the form of a checkmark button.

In this application we’ll see how to implement a custom accessory view for your UITableView in the form of a checkmark button.

Step 1: Create a Window base application using template. Give the name of the application “CheckMark”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We need to add the resource file called as “checked.png” and “unchecked.png” into the resource folder. Select resources and add files existing sources and select the checked.png and unchecked.png.

Step 4: Now we’ll add Table view controller class to the project. Choose New file -> Select cocoa touch classes group and then select UITableViewController subclass. Give the name TableView.

Step 5: In the AppDelegate.h file, we define UINavigationController. Make the following changes in the AppDelegate.h file .

@interface CheckMarkAppDelegate : NSObject {
UIWindow *window;

UINavigationController *myNavController;

}

@property (nonatomic, retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UINavigationController *myNavController;

Step 6: In the AppDelegate.m file , make the following changes :

- (void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview: myNavController.view];
[window makeKeyAndVisible];
}
Step 7: We added dataArray in the TableView.h file, so make the following changes:

@interface TableView : UITableViewController {
@private
NSMutableArray *dataArray;

}

Step 8: Double click the MainWindow.xib file and open it to the Interface Builder. Drag Navigation Controller from the library and place it in the MainWindow. Double click Navigation Controller icon and open the Navigation Controller window. Change the title into “Add CheckMark”. Select View Controller and bring up identity inspector change the class name into TableView. Now drag table view from the library and place it to the Navigation Controller window. Select it and bring up connection inspector, you will see two connection are available dataSource and delegate. Drag dataSource to the table view . Do it once more time for the delegate. Save it and go back to the Xcode.

Step 9: In the TableView.m file make the following changes:

- (void)viewDidLoad
{
NSString *path = [[NSBundle mainBundle] pathForResource:@"CheckMark" ofType:@"plist"];
self.dataArray = [NSMutableArray arrayWithContentsOfFile:path];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [dataArray count];
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[self tableView: self.tableView accessoryButtonTappedForRowWithIndexPath: indexPath];
[self.tableView deselectRowAtIndexPath:indexPath animated:YES];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *kCustomCellID = @"MyCellID";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kCustomCellID];
if (cell == nil)
{
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:kCustomCellID] autorelease];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
cell.selectionStyle = UITableViewCellSelectionStyleBlue;
}

NSMutableDictionary *item = [dataArray bjectAtIndex:indexPath.row];
cell.textLabel.text = [item objectForKey:@"text"];

[item setObject:cell forKey:@"cell"];

BOOL checked = [[item objectForKey:@"checked"] boolValue];
UIImage *image = (checked) ? [UIImage imageNamed:@"checked.png"] : [UIImage imageNamed:@"unchecked.png"];

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
CGRect frame = CGRectMake(0.0, 0.0, image.size.width, image.size.height);
button.frame = frame;
[button setBackgroundImage:image forState:UIControlStateNormal];

[button addTarget:self action:@selector(checkButtonTapped:event:) forControlEvents:UIControlEventTouchUpInside];
button.backgroundColor = [UIColor clearColor];
cell.accessoryView = button;

return cell;
}

- (void)checkButtonTapped:(id)sender event:(id)event
{
NSSet *touches = [event allTouches];
UITouch *touch = [touches anyObject];
CGPoint currentTouchPosition = [touch locationInView:self.tableView];
NSIndexPath *indexPath = [self.tableView indexPathForRowAtPoint: currentTouchPosition];
if (indexPath != nil)
{
[self tableView: self.tableView accessoryButtonTappedForRowWithIndexPath: indexPath];
}
}

- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath
{
NSMutableDictionary *item = [dataArray objectAtIndex:indexPath.row];

BOOL checked = [[item objectForKey:@"checked"] boolValue];

[item setObject:[NSNumber numberWithBool:!checked] forKey:@"checked"];

UITableViewCell *cell = [item objectForKey:@"cell"];
UIButton *button = (UIButton *)cell.accessoryView;

UIImage *newImage = (checked) ? [UIImage imageNamed:@"unchecked.png"] : [UIImage imageNamed:@"checked.png"];
[button setBackgroundImage:newImage forState:UIControlStateNormal];
}

Step 10: Compile and run the application in the Simulator.



You can downloaded SourceCode from here CheckMark 2