Tap on UIImageView in the Table Cell to show larger image.

Question

Hi All

I am writing an app where I need to show the thumbnail image on each of the table cell, when this thumbnail image is taped it should push new view with larger image. So there should be two touch events on single cell, one for image and other for showing detail view. By default in the didSelectRowAtIndexPath I am invoking detail view which is working fine.

Can someone suggest an approach please.

Thanks, Bhaskar

Answer 1

from your question, it is understood that you are having a custom cell with an uiimageview in it. In that case, wherever you tap in that cell, may be in the image or the empty portion, the didSelectRow atIndexPath method is invoked. The better way is to use a button to show any of them,, similar to a discloure button in navigators.

Answer 2

The simplest way would be to add the thumbnail in a button as the accessory view of the cell. When the button was hit it would call accessory view method which would load the next view.

Answer 3

I would recommend TechZen's approach: You could add a custom UIButton and place it wherever you like in the cell, and that freedom is nice, but in my experience these tend to really kill scrolling performance. Whatever optimizations are done for accessory views may make them a better experience for your users than buttons.

Answer 4

I agree with Alex. More info: This is what the Detail Disclosure Button accessory view is for on table rows. For an example of this, see the Favorites tab in the Phone application. Tapping on a row calls the person, but tapping on that blue circular button to the right takes you to the detail view for the person's contact info. Another example is the YouTube application.

I think you want something like the YouTube application where tapping on the table cell displays a larger image, and tapping the detail disclosure button takes you to metadata about the image.

See the docs for UITableViewCell for how to add a detail disclosure button. It's very simple.

Answer 5

Since we know that the image is in a cell and I hate subclassing, we can put together a little fun hack. You can just use the cell.imageView property and toss a category on UIImageView:

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{

    if([self.superview isKindOfClass:[UITableViewCell class]]){

         if([touches anyObject].tapCount == 1){

          //Image was tapped, issue notification, we use the cell as the object
          [[NSNotificationCenter defaultCenter] postNotificationName:@"CellImageTapped" object:self.superview]
          //just return after the notification
          return;
         }
    }
    //if it wasn't a tap, just forward the touch
    [super touchesEnded:touches withEvent:event];
}

Then in the table view controller, you can resolve the selected cell by:

NSIndexPath indexOfSelectedCellImage = [self.tableview indexPathForCell:[notificaton object]]; 

I didn't check, but the superview of the cell.imageView may be the contentView, in that case just substitute in the following:

…if([self.superview.superview isKindOfClass:[UITableViewCell class]])…
…[[NSNotificationCenter defaultCenter] postNotificationName:@"CellImageTapped" object:self.superview.superview]…

Note: Be sure to have your table view controller subscribe to the notification.