带有图像的 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);
}

不用担心响应式 cocoa 部分，它只是从互联网上检索图像。

现在图像是 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

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

imageView.clipsToBounds = YES

Answer 2

两件事：

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

- (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。您可以通过在 Interface Builder 中将 UIImageView 添加到 UICollectionViewCell 并仅在代码中访问它来解决此问题（例如通过 tag）：

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

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

我建议看一下像 AFNetworking 或 SDWebImage 这样的库，它们已经解决了这个重要的问题。

带有图像的 CollectionView 网格。图片不适合网格

CollectionView grid with images. Images don't fit in the grid

objective-c

ios

uicollectionview

uicollectionviewlayout