如何自定义 UICollectionView Cell 以显示图像网格，如附件所示？

Question

我想显示附件中所示的图像。我如何使用情节提要和目标 c 来做到这一点？

根据图像计数，需要调整像元大小。

Answer 1

编辑

该答案适用于具有基于大的第一图像和较小的后图像的单一布局的原始问题。

这真的很简单......我没有关心 iOS 版本，我下面给出的内容需要大量额外的工作，但至少它会给你这个想法。

故事板

在故事板中，我实际上只是在集合视图中设置了两个项目。一张大图和一张小图。您可以轻松地使用一个来完成此操作，这里我使用两个，因为这样我就可以将图像加载到故事板中，而无需费心配置单元格。

希望下面的图片能帮助您理解我的意思。另请注意水平滚动。

集合视图

这是赤裸裸的骨头。当然，这需要工作。特别是我没有进行单元配置，而是直接将单元出队并返回，无需任何配置。您需要通过加载应为其显示的图像来配置每个单元格。

我在故事板中定义的两种单元类型称为imgLarge和imgSmall。请注意，我也使用与项目标识符相同的内容。

这里最重要的是，真正使它起作用的是最后一条消息，我在其中为两个不同的单元格返回两个不同的大小。

#import "TestCollectionViewController.h"

@interface TestCollectionViewController () < UICollectionViewDataSource, UICollectionViewDelegateFlowLayout >

@end

@implementation TestCollectionViewController

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
    [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
    self.collectionView.collectionViewLayout.invalidateLayout;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    // Do any additional setup after loading the view.
    self.collectionView.dataSource = self;
    self.collectionView.delegate   = self;
}

#pragma mark <UICollectionViewDataSource>

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 10;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    if ( indexPath.row )
    {
        return [collectionView dequeueReusableCellWithReuseIdentifier:@"imgSmall" forIndexPath:indexPath];
    }
    else
    {
        return [collectionView dequeueReusableCellWithReuseIdentifier:@"imgLarge" forIndexPath:indexPath];
    }
}

#pragma mark <UICollectionViewDelegate>

- ( CGSize ) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGFloat h = collectionView.bounds.size.height;

    if ( indexPath.row )
    {
        return CGSizeMake( h / 2, h / 2 );
    }
    else
    {
        return CGSizeMake ( h, h );
    }
}

@end

这实际上是第二个版本。第一个版本只在这里使用常量。由于它们是经过计算的，为了使其工作，您需要在情节提要中将所有间距和插图设置为 0。

结果

瞧！

我提到这是第二个版本。前一个看起来略有不同，如下所示。我保留了这张图片，对于前一张图片的代码，只需查看这篇文章的历史即可。