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

IosCocoa TouchUitableviewUikit

Ios Problem Overview


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.

Ios Solutions


Solution 1 - Ios

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.

Solution 2 - Ios

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

Solution 3 - Ios

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

Solution 4 - Ios

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

Solution 5 - Ios

  1. Define a macro for tags of buttons:

     #define AccessoryViewTagSinceValue 100000 // (AccessoryViewTagSinceValue * sections + rows) must be LE NSIntegerMax
    
  2. 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;
    
  3. Set cell.accessoryView.tag by indexPath in UITableViewDataSource method -tableView:cellForRowAtIndexPath:

     cell.accessoryView.tag = indexPath.section * AccessoryViewTagSinceValue + indexPath.row;
    
  4. 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];
     }
    
  5. Implement the UITableViewDelegate method

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

Solution 6 - Ios

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

 }

Solution 7 - Ios

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

Solution 8 - Ios

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

}

Solution 9 - Ios

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
}

Solution 10 - Ios

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionanonView Question on Stackoverflow
Solution 1 - IosJim DoveyView Answer on Stackoverflow
Solution 2 - IosJonView Answer on Stackoverflow
Solution 3 - IosyanchenkoView Answer on Stackoverflow
Solution 4 - IosZaggoView Answer on Stackoverflow
Solution 5 - IosMr. MíngView Answer on Stackoverflow
Solution 6 - IosEric WelanderView Answer on Stackoverflow
Solution 7 - IosikariusView Answer on Stackoverflow
Solution 8 - IosToydorView Answer on Stackoverflow
Solution 9 - IosBrody RobertsonView Answer on Stackoverflow
Solution 10 - IosaeuView Answer on Stackoverflow