Jan 27

Have you every been frustrated with the small circular touch area when setting the accessory type of a UITableViewCell to be UITableViewCellAccessoryDisclosureIndicator? Unless you have child fingers, it’s very difficult to select consistently.

Here’s one way to improve the user experience and create the same effect of a larger touch pad like you see on the YouTube application. To do this, you need to implement a custom table view cell. You can either create your own subclass, or you can add subviews to the cell’s contextView. This example shows how to do the latter.

When setting up my UITableViewCells I like to create methods that provide the elements I wish to use to add to the cell’s contentView. Here I am creating a UIButton of type UIButtonTypeDetailDisclosure to be added to each cell in the table. The button possesses an area of 44 x 44 pixels and occupies the right most area of the table view cell that will be 320 pixels wide and 44 pixels tall. Note here that you define a target and action of your own rather than use the callbacks for the accessory type defined in the UITableViewDelegate protocol.

- (UIButton *) getDetailDiscolosureIndicatorForIndexPath: (NSIndexPath *) indexPath 
	UIButton *button = [UIButton buttonWithType: UIButtonTypeDetailDisclosure];
	button.frame = CGRectMake(320.0 - 44.0, 0.0, 44.0, 44.0);
	[button addTarget:self action:@selector(detailDiscolosureIndicatorSelected:) forControlEvents:UIControlEventTouchUpInside];
	return button;

The following shows how to add the button to the cell in the cellForRowAtIndexPath method in your table view controller class. As you add subviews to the contentView, be sure your detailed disclosure indicator is rendered on top. Also, ensure you are properly handling the reuse of your cells.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
[cell.contentView addSubview: [self getDetailDiscolosureIndicatorForIndexPath: indexPath]];

Finally to process the selection event you need the following code:

- (void) detailDiscolosureIndicatorSelected: (UIButton *) sender 
	// Obtain a reference to the selected cell
	UITableViewCell *cell = [self.tableView cellForRowAtIndexPath: [self.tableView indexPathForSelectedRow]];

	// Do something like render a detailed view

written by Jess \\ tags: , ,

7 Responses to “Larger Touch Area for Detail Disclosure Indicator”

  1. Mitch Says:


    Thanks for the code. I’m having some difficulties when the button is actually submitted.

    I’m adding the button view to after I’ve subclassed a UITableViewCell with multiple labels. The button appears fine, but I’m unable to return the IndexPath for that selected cell.

    I’m using the SeismicXML example to build my UITableView. The code inside the – (void) detailDiscolosureIndicatorSelected: (UIButton *) sender doesn’t allow me to grab any of the data associated with my cell.

    Any suggestions? I’m really in need of getting a UIButton added to a UITableViewCell to respond to its own actions.

    Thank you,


  2. Jess Says:

    Hi Mitch,

    Thanks for the inquiry! One way to go is store the row number in the tag attribute of the button when building the cell. That way you’ll have this data in the sender object. This approach becomes less useful (or more complicated) if your table view possesses more than one section. I’m sure there are more elegant approaches.

    Using the code below should work too, but experimenting this morning showed me it does not return the correct data at least for my implementation.

    NSIndexPath *indexPath = [tableView indexPathForSelectedRow];

    Keep me posted on how it goes!

  3. Kit Says:

    Thanks for this tip. I used the tag property of the button to store the cell index when I created the button and I was able to use it to trigger an action based on the button’s cell # even though the button is not tied to the cell.

  4. albertofloyd Says:

    Have you seen the Accessory example code at the SDK.
    The IndexPath is got through the touch point at the view.

    CGPoint currentTouchPosition = [touch locationInView:self.tableView];
    NSIndexPath *indexPath = [self.tableView indexPathForRowAtPoint: currentTouchPosition];

  5. Gary Says:


    I’m trying to use the tag property as you’ve mentioned above, but can’t get it to work. Would you mind posting the code of how to do this?

    After setting the button’s tag value when I create the button, I’ve tried using sender.tag to retrieve the value when the button is pressed but my code won’t compile. I just get a ‘request for member not a structure or union’ error.

    Any sample code would be appreciated.

  6. shrikant Says:

    to Gary
    First typecast the sender to button
    UIButton *button=(UIButton *)sender;
    int tag=button.tag;

  7. dolly Says:

    albertofloyd, thank you very much for your mentioning Accessory example. It exactly solves all problems connected with indexPath and UIButton actions.

Leave a Reply