Selected UIImage in UITableView - iphone

Question

I have a UITableView and it is populated with information, detailed information and images for each cell. I also have it so when a cell is selected it brings the user to a detailed view. What I am trying to accomplish is how to tell the difference between when the user clicks a cell or the image in the cell.
I would like to display a small subview that when the user clicks a image in a cell the small sub view will stay in the original frame but give the user something else to interact with.
I have looked all around and can not seem to even find a simple explanation or somewhere to start. It is done with apps such as facebook and twitter, where in a table view you see the users profile picture and you can click this instead of the actual cell ....
Any information would be great thanks!
Thank you #Nekno I have started to attempt to try to implement this method and have a few questions if you dont mind clearing up or giving your opinion.
Here is what I have wrote so far
// Here we use the new provided setImageWithURL: method to load the web image with
//SDWebImageManager
[cell.imageView setImageWithURL:[NSURL URLWithString:[(Tweet*)[avatarsURL
objectAtIndex:indexPath.row]avatarURL]]
placeholderImage:[UIImage imageNamed:#"avatar.png"]];
//create the button
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button setBackgroundImage:[NSURL URLWithString:[(Tweet*)[avatarsURL
objectAtIndex:indexPath.row]avatarURL]] forState:UIControlStateNormal];
//the button should be as big as the image in tableView
[button setFrame:CGRectMake(10, 10, 45, 45)];
//set the type of action for the button
[button addTarget:self action:#selector(imageSubViewAction:)
forControlEvents:UIControlEventTouchUpInside];
//more stuff
return cell }
Then I use this action that I specified in the #selector above
-(IBAction)imageSubViewAction:(id)sender{
[UIView beginAnimations:#"animateView" context:nil];
[UIView setAnimationDuration:0.5];
CGRect viewFrame = [subView frame];
viewFrame.origin.x += -300;
subView.frame = viewFrame;
subView.alpha = 1.0;
[self.view addSubview:subView];
[UIView commitAnimations];
So I know I will have to add an action to dismiss the subView but first things first.
This seems not to have any affect on the cells at all so far and I am not sure what step I would take next to make it functional.
Does the gesture method completely disable the function of didselectindexrow? because I would like to have both.
It seems as though this method with just adding a button within the cell and giving that button a action should work but I am a little lost to where to continue my journey.
Thank again I highly appreciate the help!
}

Answer 1

I think the easiest way would be to add a UIButton as the subview, and add your image as the background view for the UIButton, either through Interface Builder or by creating a UIImage.
Then you can hook up an event handler to the Touch Up Inside outlet that will handle the button tap.
With the UIButton, the UITableView cell selection shouldn't fire. If for some reason you're finding that the table cell is getting selected when the user touches the button, you could use a UIImageView instead of a UIButton, and then add a gesture recognizer to the UIImageView that handles the touches on the image and cancels the table cell selection.
To add the gesture recognizer to the UIImageView and cancel the touches for the UITableView:
Note: imageView is a local variable that references your UIImageView.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
//...
// by default, UITapGestureRecognizer will recognize just a tap.
UITapGestureRecognizer *gestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(handleGesture:)];
gestureRecognizer.cancelsTouchesInView = YES; // cancels table view cell selection
[imageView addGestureRecognizer:gestureRecognizer];
[gestureRecognizer release];
//...
}
- (void)handleGesture:(UIGestureRecognizer *)gestureRecognizer {
// get the imageView that was tapped
UIImageView* imageView = gestureRecognizer.view;
// do something else
}

Answer 2

Here is how I accomplished this for anyone who is looking for an answer you can use this at will!
//create the button
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[cell addSubview:button];
[cell bringSubviewToFront:button];
button.backgroundColor = [UIColor clearColor];
//[button setBackgroundImage:[UIImage imageNamed:#"cellbutton.png"]
//forState:UIControlStateNormal]; //sets the image
[button setImage:[UIImage imageNamed:#"cellButton.png"]
forState:UIControlStateHighlighted]; //sets the highlighted image
//the button should be as big as the image in tableView
[button setFrame:CGRectMake(10, 25, 50, 50)];
//set the type of action for the button
[button addTarget:self action:#selector(detailSubView:)
forControlEvents:UIControlEventTouchUpInside];