Implement a Custom Accessory View For UITableView in iPhone

  • Home >>
  • iOS
  • >> Implement a Custom Accessory View For UITableView in iPhone

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 {

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

  • Rick
  • March 4, 2010
  • iOS

About the Author

Leave a Reply 5 comments

Brad Rbinson - June 15, 2010 Reply

Hi Guys

This is a great tutorial got it working straight away with own data, but the next biggest question for this tutorial would be how would you make this data persistent.

Thanks for the help, Brad

Dimitar M - August 30, 2010 Reply

Use NSUserDefaults to save user settings

Ladislav Klinc - November 10, 2010 Reply


great tutorial, right what I was looking for !


shaxpear - February 25, 2011 Reply

Good example.. great explanation.. Good Job

Atul - July 19, 2011 Reply

Great tutorial.

Leave a Reply: