CODEWITHSUNDEEP
ioscocoa-touchuitableviewuikit
anon
anon

Reputation:

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

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.

Upvotes: 143

Views: 89826

Answers (11)

Míng
Míng

Reputation: 2608

With a very useful extension:

public extension UIResponder {
    func next<T>(of type: T.Type) -> T? {
        return (next as? T) ?? next?.next(of: type)
    }
    func closest<T>(of type: T.Type) -> T? {
        return (self as? T) ?? next?.closest(of: type)
    }
}

Set cell.accessoryView with a UIButton:

let button = UIButton(frame: CGRect(x: 0.0, y: 0.0, width: 26.0, height: 26.0), primaryAction: UIAction { action in
    if let button = action.sender as? UIButton,
       let cell = button.next(of: UITableViewCell.self),
       let tableView = cell.next(of: UITableView.self),
       let indexPath = tableView.indexPath(for: cell) {
        tableView.delegate?.tableView?(tableView, accessoryButtonTappedForRowWith: indexPath)
    }
})
let image = UIImage(systemName: "chevron.forward.circle")?
    .withTintColor(.systemGray, renderingMode: .alwaysOriginal)
    .applyingSymbolConfiguration(UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize + 2.0, weight: .light, scale: .large))
button.setImage(image, for: .normal)
cell.accessoryView = button

Then these two delegate methods will be called when tap on cell or cell.accessoryView respectively:

extension YourTableViewController: UITableViewDelegate {
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        print("didSelectRowAt: \(indexPath)")
    }
    
    func tableView(_ tableView: UITableView, accessoryButtonTappedForRowWith indexPath: IndexPath) {
        print("accessoryButtonTappedForRowWith: \(indexPath)")
    }
}

Upvotes: 0

Brody Robertson
Brody Robertson

Reputation: 8604

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
}

Upvotes: 1

aeu
aeu

Reputation: 151

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.

Upvotes: 0

Jon
Jon

Reputation: 7918

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

Upvotes: 77

ikarius
ikarius

Reputation: 513

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

Upvotes: 1

Zaggo
Zaggo

Reputation: 786

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

Upvotes: 3

Eric Welander
Eric Welander

Reputation: 560

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

 }

Upvotes: 2

M&#237;ng
M&#237;ng

Reputation: 2608

  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.
}

Upvotes: 2

Toydor
Toydor

Reputation: 2327

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

}

Upvotes: 1

yanchenko
yanchenko

Reputation: 57186

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

Upvotes: 7

Jim Dovey
Jim Dovey

Reputation: 11156

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.

Upvotes: 229

Related Questions