UITableView滚动问题

Question

我有一个带有自定义单元格的 TableView，其中一些有图像，另一些则没有。一切正常，但当我开始滚动时，单元格无法正确显示（图像被放置在“错误”的单元格中并在中间被剪切）。现在有人如何解决这个问题吗？

Answer 1

要理解的关键是表格的单元格是重复使用的。这样做是为了提高滚动性能，因为创建新单元格（即视图）非常昂贵。

在 cellForRowAtIndexPath 方法中，您返回一个单元格。使用出列方法的现有单元，或者创建一个新单元。在该单元格上，您可以设置您想要表示的任何内容的所有属性。

我的猜测是您直接在单元格上设置这些属性，例如图像等。然后，当您滚动时，该单元格将被重复使用，并且您会再次看到相同的图像，但在错误的单元格上。

因此，您需要一个像 NSArray 这样的单独索引来维护模型对象。该模型对象包含图像等的所有细节。

让我们举个例子。我有一个包含 10 个对象的数组，其中前五个是图像“a.png”，后五个是“b.png”。

如果我收到 cellForRowAtIndexPath 的回调，我想要执行以下操作：

cellForRowAtIndexPath:(0,0) 从数组中提供索引为 0 的对象，即 a.png
cellForRowAtIndexPath:(0,1) 从数组中提供索引为 1 的对象，即 a.png
cellForRowAtIndexPath:(0,2) 从数组中提供索引为 2 的对象，即 a.png
cellForRowAtIndexPath:(0,3) 从数组中提供索引为 3 的对象，即 a.png
cellForRowAtIndexPath:(0,4) 从数组中提供索引为 4 的对象，即 a.png
cellForRowAtIndexPath:(0,5) 从数组中提供索引为 5 的对象，即 b.png
cellForRowAtIndexPath:(0,6) 从数组中提供索引为 6 的对象，即 b.png
cellForRowAtIndexPath:(0,7) 从数组中提供索引为 7 的对象，即 b.png
cellForRowAtIndexPath:(0,8) 从数组中提供索引为 8 的对象，即 b.png
cellForRowAtIndexPath:(0,9) 从数组中提供索引为 9 的对象，即 b.png

现在，让我们考虑在 UITableView 的底层，有 5 个单元格被重用。

对于上面的每个调用，都会发生以下情况：

cellForRowAtIndexPath:(0,1) 从数组中提供索引为 1 的对象，即 a.png
-- 您尝试使现有单元出列，但它返回“nil”，因此您创建了一个新单元。您设置模型对象的详细信息。

cellForRowAtIndexPath:(0,2) 从数组中提供索引为 2 的对象，即 a.png
-- 您尝试使现有单元出列，但它返回“nil”，因此您创建了一个新单元。您设置模型对象的详细信息。

cellForRowAtIndexPath:(0,3) 从数组中提供索引为 3 的对象，即 a.png
-- 您尝试使现有单元出列，但它返回“nil”，因此您创建了一个新单元。您设置模型对象的详细信息。

cellForRowAtIndexPath:(0,4) 从数组中提供索引为 4 的对象，即 a.png
-- 您尝试使现有单元出列，但它返回“nil”，因此您创建了一个新单元。您设置模型对象的详细信息。

cellForRowAtIndexPath:(0,5) 从数组中提供索引为 5 的对象，即 b.png
-- 您尝试使现有的单元出列并且它起作用了！您可以通过设置模型对象的详细信息再次使用该单元

cellForRowAtIndexPath:(0,6) 从数组中提供索引为 6 的对象，即 b.png
-- 您尝试使现有的单元出列并且它起作用了！您可以通过设置模型对象的详细信息再次使用该单元

cellForRowAtIndexPath:(0,7) 从索引 7 的数组中提供对象，即 b.png
-- 您尝试使现有的单元出列并且它起作用了！您可以通过设置模型对象的详细信息再次使用该单元

cellForRowAtIndexPath:(0,8) 从数组中提供索引为 8 的对象，即 b.png
-- 您尝试使现有的单元出列并且它起作用了！您可以通过设置模型对象的详细信息再次使用该单元

cellForRowAtIndexPath:(0,9) 从数组中提供索引为 9 的对象，即 b.png
-- 您尝试使现有的单元出列并且它起作用了！您可以通过设置模型对象的详细信息再次使用该单元

抱歉这么冗长！我希望这有帮助。也许值得学习一个好的表视图教程。肯定会有很多人。

Answer 2

尝试更改单元格的标识符值。

NSString* identifierStr = [NSString stringWithFormat:@"ident_%d",indexPath.row];
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifierStr];

Answer 3

您可能会在创建单元格实例时添加图像，而不是在表视图请求单元格视图时添加图像。例：

这才是正确的做法。每次表视图请求单元格时，我们都会设置图像。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ident"];
    UIImageView *imageView;
    if (cell == nil) {
        cell = [UITableViewCell alloc] init ....];
        imageView = [[UIIMageView alloc] init];
        imageView.tag = 123;
        [cell addSubview:imageView];
        [imageView release];
    } else {
        imageView = [cell viewWithTag:123];
    }

    imageView.image = ...; // load image here
}

这是错误的方法。我们在创建单元格时设置图像。这将导致细胞在重复使用时出现错误的图像。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ident"];
    if (cell == nil) {
        cell = [UITableViewCell alloc] init ....];
        UIImageView *imageView = [[UIIMageView alloc] init];
        imageView.image = ...; 
        [cell addSubview:imageView];
        [imageView release];
    }

}