UICollectionView将图像添加到单元格 [英] UICollectionView adding image to a cell

问题描述

我正在开发一个项目，该项目使用 UICollectionView 来显示可能有或没有图像的数据。

I'm working on a project which uses UICollectionView to display data which may or may not have an image.

我正在使用的方法是检查图像网址是否为空，然后将ImageView添加到单元格中。

The way I'm using is to check if the image url is not null, then add an ImageView onto the cell.

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (question.picture != (id)[NSNull null]) {
        //add AsyncImageView to cell
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        imageView.clipsToBounds = YES;
        imageView.tag = IMAGE_VIEW_TAG;
        [cell addSubview:imageView];
        [[AsyncImageLoader sharedLoader] cancelLoadingImagesForTarget:imageView];
        imageView.imageURL = [NSURL URLWithString:question.picture];
    }
}

对于那些没有图像的单元格，单元格应该是如下所示：
https://dl.dropboxusercontent.com/u /5753236/Stackoverflow/good.png

For those cells that have no image, the cell should look like this: https://dl.dropboxusercontent.com/u/5753236/Stackoverflow/good.png

然而，其中一些仍然会在其上添加带有裁剪图像的ImageView，导致如下所示：
https://dl.dropboxusercontent.com/u/5753236/Stackoverflow/bad .png

However, some of them will still add an ImageView with cropped image on it, causing something like this: https://dl.dropboxusercontent.com/u/5753236/Stackoverflow/bad.png

我尝试过使用SDWebImage，但仍未解决问题。

I've tried using the SDWebImage, but still not solving the problem.

另一个问题是，当我向下滚动 UICollectionView 时，我会看到一些图像显示为上面显示的图像，然后在加载完成后更改为正确的图像，我只是不知道造成这个问题的原因。

The other issue is that when I scroll down the UICollectionView, I would see some images displayed as the image shown above first, and then change to its correct image after loading is completed, and I just have no idea what is causing the problem.

请帮我理清这两个问题问题，我真的很感激任何帮助。

Please help me sort out these two problems, I'd really appreciate for any help.

推荐答案

首先，你在单元格中添加图像的方式很漂亮危险的。原因是您的单元格正在被重用（例如滚动时或重新加载数据时），这些图像在重用时永远不会被删除。因此，您将开始在任何地方进行搜索，甚至可以达到您的单元格包含多次图像的位置。以下是两种方法：

First of all, the way you add images in your cell is pretty dangerous. The reason is that your cells are being reused (for exemple when you scroll, or when you reloadData), and these images are never removed on reuse. So you will start seing them everywhere, and you can even get to the point where your cell contains multiple occurrences of the image. Here are two ways to do it :

• 第一种方式（好方法）：您将UICollectionViewCell子类化，并给出子类imageView属性。然后在CustomCollectionViewCell.m文件中执行此操作：

• First way (the good way) : You subclass your UICollectionViewCell, and give the subclass an "imageView" property. Then you do this in your CustomCollectionViewCell.m file :

// Lazy loading of the imageView
- (UIImageView *) imageView
{
    if (!_imageView) {
        _imageView = [[UIImageView alloc] initWithFrame:self.contentView.bounds];
        [self.contentView addSubview:_imageView];
     }
     return _imageView;
 }

// Here we remove all the custom stuff that we added to our subclassed cell
-(void)prepareForReuse
{
    [super prepareForReuse];

    [self.imageView removeFromSuperview];
    self.imageView = nil;
}

然后在你的ViewController中你必须像这样声明你的collectionViewCells的新类：

Then in your ViewController your have to declare the new class of your collectionViewCells like this :

[self.collectionView registerClass:[CustomCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];

它将确保在重复使用时正确删除图像，此外还可以更轻松地设置图像你的collectionView委托。

It will ensure that the images are correctly removed on reuse, plus it's way easier to setup the cell in your collectionView delegate.

第二种方式（肮脏的方式），每次加载新单元格时都会删除视图：

Second way (The dirty way), you remove the views every time you load a new cell :

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView                 cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    for (UIView *subview in [cell.contentView subviews]) {
        [subview removeFromSuperview];
    }

    if (question.picture != (id)[NSNull null]) {
        //add AsyncImageView to cell
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        imageView.clipsToBounds = YES;
        imageView.tag = IMAGE_VIEW_TAG;
        [cell.contentView addSubview:imageView];
        [[AsyncImageLoader sharedLoader] cancelLoadingImagesForTarget:imageView];
        imageView.imageURL = [NSURL URLWithString:question.picture];
    }
}

这种方式要容易得多，但我不建议它：P

This way is far easier but i wouldn't recommend it :P

现在尝试一下，让我知道你的bug是如何演变的。

Now try this and let me know how your bug evolves.

这篇关于UICollectionView将图像添加到单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！