Using a custom image for a UITableViewCell's accessoryView and having it respond to UITableViewDelegate

Question

I'm using a custom drawn UITableViewCell, including the same for the cell's accessoryView. My setup for the accessoryView happens by the way of something like this:

UIImage *accessoryImage = [UIImage imageNamed:@"accessoryDisclosure.png"];
UIImageView *accImageView = [[UIImageView alloc] initWithImage:accessoryImage];
accImageView.userInteractionEnabled = YES;
[accImageView setFrame:CGRectMake(0, 0, 28.0, 28.0)];
self.accessoryView = accImageView;
[accImageView release];

Also when the cell is initialized, using initWithFrame:reuseIdentifier: I ensured to set the following property:

self.userInteractionEnabled = YES;

Unfortunately in my UITableViewDelegate, my tableView:accessoryButtonTappedForRowWithIndexPath: method (try repeating that 10 times) is not getting triggered. The delegate is definitely wired up properly.

What can be possibly missing?

Thanks all.

score 229 · Accepted Answer · answered May 15 '09 at 16:25

229

Sadly that method doesn't get called unless the internal button type provided when you use one of the predefined types is tapped. To use your own, you'll have to create your accessory as a button or other UIControl subclass (I'd recommend a button using -buttonWithType:UIButtonTypeCustom and setting the button's image, rather than using a UIImageView).

Here's some things I use in Outpost, which customizes enough of the standard widgets (just slightly, to match our teal colouring) that I wound up doing my own UITableViewController intermediary subclass to hold utility code for all other table views to use (they now subclass OPTableViewController).

Firstly, this function returns a new detail disclosure button using our custom graphic:

- (UIButton *) makeDetailDisclosureButton
{
    UIButton * button = [UIButton outpostDetailDisclosureButton];

[button addTarget: self
               action: @selector(accessoryButtonTapped:withEvent:)
     forControlEvents: UIControlEventTouchUpInside];

    return ( button );
}

The button will call this routine when it's done, which then feeds the standard UITableViewDelegate routine for accessory buttons:

- (void) accessoryButtonTapped: (UIControl *) button withEvent: (UIEvent *) event
{
    NSIndexPath * indexPath = [self.tableView indexPathForRowAtPoint: [[[event touchesForView: button] anyObject] locationInView: self.tableView]];
    if ( indexPath == nil )
        return;

    [self.tableView.delegate tableView: self.tableView accessoryButtonTappedForRowWithIndexPath: indexPath];
}

This function locates the row by getting the location in the table view of a touch from the event provided by the button and asking the table view for the index path of the row at that point.

answered May 15 '09 at 16:25

Jim Dovey

11,166
2
33
40

Thanks Jim. That's a shame I spent more than 20 minutes wondering why I can't do it with a custom imageView. I just saw how to do this on Apple's sample Accessory app. Your answer is well explained and documented though so I'm marking it up and keeping it around. Thanks again. :-) – May 15 '09 at 16:35
11

Just for others looking at this answer, you could also just put a tag on the button which corresponds to the row (if you have multiple sections, you'll need to do some math) and then just pull the tag out from the button in the function. I think it might be a little faster than calculating the touch. – RyanJM Nov 10 '10 at 04:55
Jim, great answer. One potential issue (at least on my end) - I had to add the following line to get the touches to register on the button: button.userInteractionEnabled = YES; – Mike Laurence Aug 27 '09 at 19:52
3

this requires you to hard-code the `self.tableView`. what if you don't know which tableview contains the row? – user102008 Nov 10 '11 at 23:18
Go up the view chain starting at button.superview until you find a UITableView instance. – Jim Dovey Nov 16 '11 at 14:47
Weird get error [UIButton outpostDetailDisclosureButton] cannot be found. Using iPhone SDK 5.1.1 Xcode 4.4 – Matej Aug 11 '12 at 00:09
That's not a built-in method; you have to implement a 'create a button' method of your own. – Jim Dovey Aug 11 '12 at 19:08
Works for me as well. If you are using storyboards and seques for navigating, the method handling the tap should be more like this: {code} - (void) accessoryButtonTapped: (UIControl *) button withEvent: (UIEvent *) event { [self performSegueWithIdentifier:@"segueName" sender:self]; } {code} – stoffer Mar 21 '13 at 14:51
4

@RyanJM I used to think that doing a hitTest is overkill and tags will suffice. I have in fact used the tags idea in some of my code. But today I encountered a problem where the user can add new rows. This kills the hack using tags. The solution suggested by Jim Dovey (and as seen in Apple's sample code) is a generic solution and works in all situations – srik Aug 28 '13 at 10:03
@srik - Great point. Thanks for pointing that out today. I'm just about to refactor the code where I did that. – RyanJM Aug 28 '13 at 13:58

score 77 · Answer 2 · edited Jul 09 '13 at 09:03

I found this website to be very helpful: custom accessory view for your uitableview in iphone

In short, use this in cellForRowAtIndexPath::

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;

then, implement this method:

- (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];
    }
}

I'd say +1 for this as it's what Apple recommends doing in their sample code in their docs: http://developer.apple.com/library/ios/#samplecode/Accessory/Listings/MyTableViewController_m.html#//apple_ref/doc/uid/DTS40008066-MyTableViewController_m-DontLinkElementID_6 — cleverbit, Oct 08 '12 at 18:33
Setting the frame was the missing piece for me. You can also just setImage (instead of background) as long as you don't also want any text. — Jeremy Hicks, May 30 '14 at 18:25
The link has broken in @richarddas's answer. New Link : https://developer.apple.com/library/prerelease/ios/samplecode/Accessory/Listings/AccessoryViewController_m.html#//apple_ref/doc/uid/DTS40008066-AccessoryViewController_m-DontLinkElementID_4 — delavega66, Jan 12 '16 at 09:27

score 7 · Answer 3 · answered May 04 '12 at 16:55

My approach is to create a UITableViewCell subclass and encapsulate the logic that will call the usual UITableViewDelegate's method within it.

// CustomTableViewCell.h
@interface CustomTableViewCell : UITableViewCell

- (id)initForIdentifier:(NSString *)reuseIdentifier;

@end

// CustomTableViewCell.m
@implementation CustomTableViewCell

- (id)initForIdentifier:(NSString *)reuseIdentifier;
{
    // the subclass specifies style itself
    self = [super initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:reuseIdentifier];
    if (self) {
        // get the button elsewhere
        UIButton *accBtn = [ViewFactory createTableViewCellDisclosureButton];
        [accBtn addTarget: self
                   action: @selector(accessoryButtonTapped:withEvent:)
         forControlEvents: UIControlEventTouchUpInside];
        self.accessoryView = accBtn;
    }
    return self;
}

#pragma mark - private

- (void)accessoryButtonTapped:(UIControl *)button withEvent:(UIEvent *)event
{
    UITableViewCell *cell = (UITableViewCell*)button.superview;
    UITableView *tableView = (UITableView*)cell.superview;
    NSIndexPath *indexPath = [tableView indexPathForCell:cell];
    [tableView.delegate tableView:tableView accessoryButtonTappedForRowWithIndexPath:indexPath];
}

@end

This is the BEST answer. But `button.superview`, `cell.superview` and `[tableView.delegate tableView:...]` are not safe enough. — Míng, Sep 08 '15 at 12:40

score 3 · Answer 4 · answered May 02 '13 at 11:12

An extension to Jim Dovey's answer above:

Be careful when you use a UISearchBarController with your UITableView. In that case you want to check for self.searchDisplayController.active and use self.searchDisplayController.searchResultsTableViewinstead of self.tableView. Otherwise you'll get unexpected results when the searchDisplayController is active, especially when the search results are scrolled.

For example:

- (void) accessoryButtonTapped:(UIControl *)button withEvent:(UIEvent *)event
{
    UITableView* tableView = self.tableView;
    if(self.searchDisplayController.active)
        tableView = self.searchDisplayController.searchResultsTableView;

    NSIndexPath * indexPath = [tableView indexPathForRowAtPoint:[[[event touchesForView:button] anyObject] locationInView:tableView]];
    if(indexPath)
       [tableView.delegate tableView:tableView accessoryButtonTappedForRowWithIndexPath:indexPath];
}

score 2 · Answer 5 · answered Jul 11 '12 at 13:45

Define a macro for tags of buttons:

#define AccessoryViewTagSinceValue 100000 // (AccessoryViewTagSinceValue * sections + rows) must be LE NSIntegerMax

Create button and set the cell.accessoryView when creating a cell

UIButton *accessoryButton = [UIButton buttonWithType:UIButtonTypeContactAdd];
accessoryButton.frame = CGRectMake(0, 0, 30, 30);
[accessoryButton addTarget:self action:@selector(accessoryButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
cell.accessoryView = accessoryButton;

Set cell.accessoryView.tag by indexPath in UITableViewDataSource method -tableView:cellForRowAtIndexPath:
```
cell.accessoryView.tag = indexPath.section * AccessoryViewTagSinceValue + indexPath.row;
```

Event handler for buttons

- (void) accessoryButtonTapped:(UIButton *)button {
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:button.tag % AccessoryViewTagSinceValue
                                                inSection:button.tag / AccessoryViewTagSinceValue];

    [self.tableView.delegate tableView:self.tableView accessoryButtonTappedForRowWithIndexPath:indexPath];
}

Implement the UITableViewDelegate method

- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath {
    // do sth.
}

Nobody should use `tag` unless when absolute necessary, look up other solution. — Lifely, Jul 10 '15 at 16:05

score 2 · Answer 6 · answered Feb 22 '13 at 06:30

When the button is tapped, you could have it call the following method inside a UITableViewCell subclass

 -(void)buttonTapped{
     // perform an UI updates for cell

     // grab the table view and notify it using the delegate
     UITableView *tableView = (UITableView *)self.superview;
     [tableView.delegate tableView:tableView accessoryButtonTappedForRowWithIndexPath:[tableView indexPathForCell:self]];

 }

Toydor · Answer 7 · 2012-07-02T19:10:09.057

1

With yanchenko approach I had to add: [accBtn setFrame:CGRectMake(0, 0, 20, 20)];

If you're using xib file to customise your tableCell then initWithStyle:reuseIdentifier: wont get called.

Instead override:

-(void)awakeFromNib
{
//Put your code here 

[super awakeFromNib];

}

edited Jul 02 '12 at 19:10

answered Jul 02 '12 at 18:30

Toydor

2,277
4
30
48

score 1 · Answer 8 · edited Jun 04 '13 at 10:54

1

You must use a UIControl to properly get event dispatch (for instance a UIButton) instead of simple UIView/UIImageView.

edited Jun 04 '13 at 10:54

Divyu

1,325
9
21

answered Oct 05 '10 at 21:41

ikarius

513
6
10

score 1 · Answer 9 · answered Jun 05 '19 at 17:45

Swift 5

This approach uses the UIButton.tag to store the indexPath using basic bit-shifting. The approach will work on 32 & 64 bit systems as long as you don't have more than 65535 sections or rows.

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cellId")
    let accessoryButton = UIButton(type: .custom)
    accessoryButton.setImage(UIImage(named: "imageName"), for: .normal)
    accessoryButton.sizeToFit()
    accessoryButton.addTarget(self, action: #selector(handleAccessoryButton(sender:)), for: .touchUpInside)

    let tag = (indexPath.section << 16) | indexPath.row
    accessoryButton.tag = tag
    cell?.accessoryView = accessoryButton

}

@objc func handleAccessoryButton(sender: UIButton) {
    let section = sender.tag >> 16
    let row = sender.tag & 0xFFFF
    // Do Stuff
}

score 0 · Answer 10 · answered Nov 03 '14 at 19:33

0

As of iOS 3.2 you can avoid the buttons that others here are recommending and instead use your UIImageView with a tap gesture recognizer. Be sure to enable user interaction, which is off by default in UIImageViews.

answered Nov 03 '14 at 19:33

aeu

141
2
5

Using a custom image for a UITableViewCell's accessoryView and having it respond to UITableViewDelegate

10 Answers10

Linked