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

如何解决如何自定义UICollectionView单元格以显示图像网格，如附件所示？

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

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

解决方法

编辑

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

这真的很容易...我并没有为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。

结果

Voila！

我提到这是第二版。上一个看起来略有不同，如下所示。我保留了图片，因为较早版本的代码只是查看这篇文章的历史。