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

我想显示附件中显示的图像。如何使用故事板和objective 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

#导入“TestCollectionViewController.h”
@接口TestCollectionViewController（）
@结束
@实现TestCollectionViewController
-（void）ViewWillTransitionOnSize:（CGSize）带有TransitionCoordinator:（id）coordinator的大小
{
[super ViewWillTransitionSize:size with TransitionCoordinator:coordinator]；
self.collectionView.collectionViewLayout.invalidateLayout；
}
-（无效）viewDidLoad{
[超级视图下载]；
//加载视图后执行任何其他设置。
self.collectionView.dataSource=self；
self.collectionView.delegate=self；
}
#布拉格标记
-（NSInteger）collectionView中的节数：（UICollectionView*）collectionView{
返回1；
}
-（NSInteger）collectionView:（UICollectionView*）collectionView项目编号截面：（NSInteger）截面{
返回10；
}
-（UICollectionViewCell*）collectionView:（UICollectionView*）collectionView cellForItemAtIndexPath:（NSIndexPath*）indexPath{
if（indexPath.row）
{
返回[collectionView dequeueReusableCellWithReuseIdentifier:@“imgSmall”forIndexPath:indexPath]；
}
其他的
{
返回[collectionView dequeueReusableCellWithReuseIdentifier:@“imgLarge”forIndexPath:indexPath]；
}
}
#布拉格标记
-（CGSize）collectionView:（UICollectionView*）collectionView布局：（UICollectionViewLayout*）collectionViewLayout大小FormiteIndeXPath:（NSIndexPath*）indexPath
{
CGFloat h=collectionView.bounds.size.height；
if（indexPath.row）
{
返回CGSizeMake（h/2，h/2）；
}
其他的
{
返回CGSizeMake（h，h）；
}
}
@结束

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

结果

瞧

我提到这是第二个版本。正如您在下面看到的，前面的一个看起来略有不同。我保留了这张图片，因为前面的代码只是看看这篇文章的历史

---

你好-图片不错。我认为您需要查看这方面的合成布局。但它仅在iOS13+中可用：（你的最低iOS是多少？如果低于13，你可以使用水平收集视图和收集视图单元格的大小来获得类似的结果。iOS 9。Ok will tryOk-这里有一点轮廓…我认为你需要水平滚动，第一个图像的侧面是其他图像的两倍。这将给你一个大的第一个图像，然后是平铺它就在旁边。即使在iOS 9中，它实际上也很容易，但可能不是你想要的。嗨，非常感谢你的解释和示例。我已经根据我的全部要求编辑了这个问题。你提到的带有大小调整的单个集合视图足够了吗？请给出你的建议。是的，单个视图就可以了-你可以n只需在计算大小的方法中添加一些逻辑…我之前在这里给出了一个示例，但这是错误的，但想法可行，只需根据图像的数量计算大小。您可能还需要创建一个带有宽度的变量

w

，然后使用宽度和高度（w和h）返回一个合适的大小。剩下的只是简单的数学…如果有这样的事情。。。