触摸时 UITableViewCell 图像发生变化

Posted 2023-03-12

【中文标题】触摸时 UITableViewCell 图像发生变化

【英文标题】：TableViewCell image change when touched

【发布时间】：2013-04-25 14:07:18

【问题描述】：

我有自己的TableViewCell 类，继承 UITableViewCell。在我的单元格 nib 文件中，我已将图像放入我的TableViewCell。 （图片没有完全占据整个单元格区域，图片周围有空格）

然后，我想实现一个触摸反馈功能，当用户触摸单元格中的图像时，该图像将被另一个图像替换。

我尝试在tableView:didSelectRowAtIndexPath: 方法中做到这一点：

- (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;
    ...

但它根本不起作用。那么，我该如何实现这个触摸反馈功能呢？那是当用户手指触摸单元格中的图像时，图像会更改为另一个图像。

【问题讨论】：

您在xib 中添加的UIImageView 有出口吗？我猜你应该更改imageView 的图像，而不是单元格的selectedBackgroundView 属性

是的，我有一个插座，请问我应该在哪个功能下更改插座图像？

【参考方案1】：

在您的自定义UITableViewCell 类中创建一个UIImageView 属性作为IBOutlet，然后从cellForRowAtIndexPath: 而不是背景属性在该属性上设置图像。

cell.yourCustomImageView.image = bgView;

或者将 UIImageView 添加到当前通用的 UITableViewCell 中，如下所示。

使用当前单元格

[cell addSubview:bgView];

【参考方案2】：

在didSelectRowAtIndexPath: 中，您必须首先更改您的数据模型（表明单元格的状态已更改）。 您设置了适当的图像cellForRowAtIndexPath:。 （即您检查状态并提供正确的图像。） 要更新单元格，请致电reloadRowsAtIndexPaths:。

说明

您不应将单元格的状态存储在单元格的某些视图中。例如。如果不同的图像代表某种选择，则为表格视图提供数据的数组或其他数据结构应跟踪处于此状态的行。

每次必须重新生成单元格时，都会调用cellForRowAtIndexPath。 （这可能是因为单元格变得可见，或者因为您明确更新了它。）这是检查状态信息并相应地显示单元格的最佳位置。

【讨论】：

我只明白你的最后一点，前2点不清楚。您是什么意思以及如何更改我的数据模型，设置适当的图像是什么意思以及如何？我确实已经设置了合适的图像。

看我上面加的解释。

【参考方案3】：

我建议在自定义单元格的 init 方法中将手势识别器连接到 UIImageView：

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

然后是处理程序：

- (void)imageViewTapped:(id)sender 

    NSLog(@"image tapped");
    self.tappableImageView.image = [UIImage imageNamed:@"some_different_image.png"];

另外，不要忘记将自定义单元格声明装饰成这样：

@interface CustomTableViewCell : UITableViewCell <UIGestureRecognizerDelegate>

在cellForRowAtIndexPath: 方法中，您需要确保初始化方法中的代码被触发，以便添加tapRecognizer。

祝你好运！

[编辑]

根据您使用自定义 XIB 创建单元格的方式，您可能不需要这个，但在我的情况下，我需要显式调用一个方法来初始化表格单元格中 UI 的状态。我这样做的方法是在自定义表格视图单元格上提供initState 方法：

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

然后在cellForRowAtIndexPath 中，我确保在创建表格单元格后调用initState：

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

【讨论】：

谢谢，但是如何确保在 cellForRowAtIndexPath 方法中触发了 init 方法？

@Mellon，我添加了一些代码，展示了我如何使用自定义 XIB 并在我的单元上调用自定义 initState 方法来连接手势识别器。