根据UICollectionView中的图像动态更改单元格大小

Question

我正在水平集合视图中显示从服务器接收到的动态图片。当我设置集合视图时，我设置了以下内容：

-(void)setupCollectionView{
[self setupPageControlView];
self.screensCollectionView.delegate=self;
self.screensCollectionView.dataSource=self;
[self.screensCollectionView registerNib:[UINib nibWithNibName:@"FGAppScreensCollectionViewItemCell" bundle:nil] forCellWithReuseIdentifier:@"screenCell"];


UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
[flowLayout setMinimumInteritemSpacing:0.0f];
[flowLayout setMinimumLineSpacing:0.0f];
[flowLayout setItemSize:CGSizeMake(165, 255)];
//[self.screensCollectionView setPagingEnabled:YES];
[self.screensCollectionView setCollectionViewLayout:flowLayout];

在cellForRowAtIndexPath方法中，我会这样下载图片：

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *cellIdentifier = @"screenCell";

FGAppScreensCollectionViewItemCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

NSURLRequest *urlRequest = [NSURLRequest requestWithURL:[NSURL URLWithString:[self.imageURLArray objectAtIndex:indexPath.row]]];

UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
[spinner startAnimating];
[spinner setFrame:CGRectMake(50, 100, 20, 20)];
[cell.contentView addSubview:spinner];
[cell.screenImageView setImageWithURLRequest:urlRequest placeholderImage:nil success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image) {
    //STOP THE SPINNER
    for (UIView* view in [cell.contentView subviews]) {
        if ([view isKindOfClass:[UIActivityIndicatorView class]]) {
            [view removeFromSuperview];
        }
    }
    cell.screenImageView.image = image;

} failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error) {
    //
}];
[cell.screenImageView setImageWithURL:[NSURL URLWithString:[self.imageURLArray objectAtIndex:indexPath.row]]];
if (self.delegate) {
      UITapGestureRecognizer* g = [[UITapGestureRecognizer alloc] initWithTarget:self.delegate action:@selector(showPopUpImageView:)];
      [cell.screenImageView addGestureRecognizer:g];
}

return cell;

然而，在集合视图中显示了竖屏和横屏图片。竖屏图像显示正常，但横屏图像在集合视图中显示过小。我需要做的是根据图像大小调整单元格的大小，以使它们填充正确的纵横比。

我添加了以下类似的方法，但问题是它会在一开始就调用所有单元格，一旦我在cellForRowAtIndexPath方法中下载了图像，它就不会再被调用:

    - (CGSize)collectionView:(UICollectionView *)collectionView
              layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

{

return CGSizeMake(165, 255);

因此，我想知道如何实现这个功能，请让我知道是否需要更多信息？

- tech savvy

---

嗨，你能找到任何解决方案吗？ - user2265763

Answer 1

在-setImageWithURLRequest:...方法中，当图片加载完成后，将其缓存在一个哈希表中，然后使用当前的图片路径调用-reloadItemsAtIndexPaths:方法，重新加载单元格，从而引起CollectionView重新检查单元格应该有的大小。

确保在查找图片时，要查询哈希表。这样还可以避免在collectionView项目滚出屏幕并再次滚回屏幕时进行额外的网络访问。

注意，如果您正在使用 UICollectionReusableView 子类，则代码可能会失败，因为单元格可能在其图像加载之前被重用，因此图像将加载到错误的位置。

- Wil Shipley

Answer 2

然而，需要添加一个UICollectionView的代理方法。

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[arryOfImg objectAtIndex:indexPath.row]]];

    //You may want to create a divider to scale the size by the way..
    return CGSizeMake((image.frame.size.width)/4.0, (image.frame.size.height)/4.0);
}

- Darshan Mothreja

---

这种方法的问题在于可能在图片实际存在之前就被调用了。 - Nuno Gonçalves

在获取所有图片后，您需要重新加载集合视图。 - Darshan Mothreja