CollectionView网格与图像。图像不适合网格

Question

我正在尝试创建一个显示一些图片的网格布局。现在我使用FlowLayout并创建我的CollectionView：

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];


    Gop *g = _images[(NSUInteger) indexPath.row];

    @weakify(self);
    [[self.imageService fetchImageFromURLAsString:g.imageUrl] subscribeNext:^(UIImage *img) {
        @strongify(self);
        UIImageView *imageView = [[UIImageView alloc] initWithImage:img];
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        [cell.contentView addSubview:imageView];
    } error:^(NSError *error) {
        [_snackbar displaySnackbarWithMsg:NSLocalizedString(@"snackbar.error.no.network", nil)];
    } completed:^{
        DDLogDebug(@"Fetched image");
    }];

    return cell;
}

#pragma mark – UICollectionViewDelegateFlowLayout

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(100,100);
}

不要担心反应性可可部分，它只是从互联网上检索图像。

现在图像是1920 x 1080，但我想要一个100 x 100的图像库。所以我实现了UICollectionViewDelegateFlowLayout方法并创建了100x100的大小。现在我的图片显示100 x 100，我的图片内容不可见。我只能从左角看到一些图像（大图）。

我如何使我的图像适合100 x 100并且彼此一致？

截图我现在拥有的内容：

我希望得到这样的结果： http://www.appcoda.com/wp-content/uploads/2013/01/RecipePhoto-App-First-Version.jpg

Answer 1

一些事情：

您不应在1920x1080中显示UICollectionView张图片，因为这会导致真的性能不佳。您的网络服务不提供预览吗？

- (CGSize)collectionView:layout:sizeForItemAtIndexPath:仅影响UICollectionViewCell的大小，不会调整图片大小。由于您没有提供UIImageView的框架，因此它会占用UIImage的大小，在您的情况下为1920x1080。简单的解决方法是：

//@weakify(self); not necessary, as you are not referencing self inside the blocks
[[self.imageService fetchImageFromURLAsString:g.imageUrl] subscribeNext:^(UIImage *img) {
    //@strongify(self);
    UIImageView *imageView = [[UIImageView alloc] initWithImage:img];
    imageView.frame = cell.bounds; // set the frame of the UIImageView
    imageView.clipsToBounds = YES; // do not display the image outside of view, if it has different aspect ratio
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    [cell.contentView addSubview:imageView];
} error:^(NSError *error) {
    [_snackbar displaySnackbarWithMsg:NSLocalizedString(@"snackbar.error.no.network", nil)];
} completed:^{
    DDLogDebug(@"Fetched image");
}];

另外，考虑一下单元重用：如果单元格被重用，那么所有代码​​都会运行多次，这将在同一个单元格中产生多个UIImageViews。您可以通过将UIImageView添加到Interface Builder中的UICollectionViewCell并仅在代码中访问它（例如通过tag）来解决此问题：

...
UIImageView *imageView = (UIImageView*)[cell viewWithTag:YOUR_TAG];
...

此外，在从Web服务加载图像之前，可能会重复使用单元格，这将导致多个图像被异步加载到同一个单元格中，这非常混乱。

我建议您查看已经解决了这个非平凡问题的AFNetworking或SDWebImage等库。

Answer 2

将此行添加到您的单元格配置代码中：

imageView.clipsToBounds = YES