UICollectionView将图像添加到单元格

Question

我正在开发一个项目,用于UICollectionView显示可能有或没有图像的数据.

我正在使用的方法是检查图像url是否为null,然后将ImageView添加到单元格上.

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

但是,其中一些仍然会在其上添加带有裁剪图像的ImageView,导致类似这样的内容:https: //dl.dropboxusercontent.com/u/5753236/Stackoverflow/bad.png

我尝试过使用SDWebImage,但仍未解决问题.

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

请帮我理清这两个问题,我真的很感激你的帮助.

Answer 1

首先,在单元格中添加图像的方式非常危险.原因是您的单元格正在被重用(例如滚动时或重新加载数据时),这些图像在重用时永远不会被删除.因此,您将开始在任何地方进行搜索,甚至可以达到您的单元格包含多次图像的位置.这有两种方法:

• 第一种方式(好方法):您将UICollectionViewCell子类化,并为子类提供"imageView"属性.然后在CustomCollectionViewCell.m文件中执行此操作:

  // 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的新类:

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

  它将确保在重用时正确删除图像,并且更容易在collectionView委托中设置单元格.

• 第二种方式(脏方法),每次加载新单元格时都会删除视图:

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

现在尝试这个,让我知道你的bug是如何演变的.