如何自定义 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。

结果

瞧！

我提到这是第二个版本。前一个看起来略有不同，如下所示。图片我保留了，之前的代码看一下这个帖子的历史。