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.

我使用的方法是检查图像 url 是否不为空，然后在单元格中添加一个 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

现在试试这个，让我知道你的错误是如何演变的.

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

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