TableViewCell image change when touched - ios

Question

I have my own TableViewCell class which inherit UITableViewCell. On my cell nib file, I have put a image in my TableViewCell. (The image does not fully occupy the whole cell area, there are spaces around image)
Then, I would like to implement a touch feedback feature that when user touch the image in the cell, the image will be replaced by another image.
I tried to do it in tableView:didSelectRowAtIndexPath: method :
- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
//my TableViewCell
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
//New image to replace the current one
UIImage* bg = [CCTheme imageNamed:#"green_btn_bg"];
UIImageView* bgView = [[UIImageView alloc] initWithImage:bg];
cell.selectedBackgroundView = bgView;
...
But it does not work at all. So, how can I implement this touch feedback feature?? That's when user finger touched the image in cell, the image get changed to another one.

Answer 1

Create a UIImageView property in your custom UITableViewCell class as an IBOutlet then set the image on that property from the cellForRowAtIndexPath: rather than the background property.
cell.yourCustomImageView.image = bgView;
Or add the UIImageView to the current generic UITableViewCell like below.
with your Current cell
[cell addSubview:bgView];

Answer 2

In didSelectRowAtIndexPath: you have to first change your data model (indicate that the status of the cell has changed).
You set the appropriate image cellForRowAtIndexPath:. (I.e. you check what the status is and provide the correct image.)
To update the cell, call reloadRowsAtIndexPaths:.
Explanation
You should not store the state of your cell in some view of the cell. E.g. if the different image represents some kind of selection, your array or other data structure that feeds your table view should keep track of which row is in this state.
Each time the cell has to be regenerated, cellForRowAtIndexPath is called. (This could be because the cell becomes visible, or because you explicitly update it.) This is the best place to check for the state information and display the cell accordingly.

Answer 3

I would recommend hooking a gesture recognizer to the UIImageView within your custom cell's init method:
// Add recognizer for tappable image
UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc]
initWithTarget:self action:#selector(imageViewTapped:)];
[tapRecognizer setNumberOfTouchesRequired:1];
[tapRecognizer setDelegate:self];
self.tappableImageView.userInteractionEnabled = YES;
[self.tappableImageView addGestureRecognizer:tapRecognizer];
Then the handler:
- (void)imageViewTapped:(id)sender {
NSLog(#"image tapped");
self.tappableImageView.image = [UIImage imageNamed:#"some_different_image.png"];
}
Also, don't forget to have you custom cell declaration decorated like so:
#interface CustomTableViewCell : UITableViewCell <UIGestureRecognizerDelegate>
In the cellForRowAtIndexPath: method you need to ensure that the code in your init method is being fired so that the tapRecognizer is added.
Good luck!
[EDIT]
Depending on how you create your cell with the custom XIB you may not need this, but in my case I needed to explicitly call a method to initialize the state of the UI in the table cell. The way I do this is offer an initState method on the custom table view cell:
- (void)initState {
// Do other things for state of the UI in table cell.
// Add recognizer for tappable image
UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc]
initWithTarget:self action:#selector(imageViewTapped:)];
[tapRecognizer setNumberOfTouchesRequired:1];
[tapRecognizer setDelegate:self];
self.tappableImageView.userInteractionEnabled = YES;
[self.tappableImageView addGestureRecognizer:tapRecognizer];
}
Then in cellForRowAtIndexPath I make sure to call initState on my table cell after it has been created:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
CustomTableViewCell *cell = (CustomTableViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
UIViewController *temporaryController = [[UIViewController alloc] initWithNibName:#"CustomTableViewCell" bundle:nil];
// Grab a pointer to the custom cell.
cell = (CustomTableViewCell *)temporaryController.view;
[cell initState];
}
return cell;
}