使用UICollectionView的类似瓷砖的应用程序

Question

我正在尝试构建一个看起来像基于磁贴的应用程序（有点Windows风格）的应用程序，而且我是UICollectionView的新手。

这就是我想要实现的目标：

我的想法是，今天，我知道每个单元格中都有6个图标可供显示。但明天可能是8,10等等。

因此，我不想使用基于静态6-imageview的故事板，而是希望拥有一个集合视图，以实现其灵活性。

但是我找不到如何相对于容器视图约束我的单元格。 Xcode只允许我指定一个基于点的固定大小。此外，即使我使用单元格之间的最小间距，我也会观察到0的间隙。

到目前为止我做了什么：

• 在故事板中创建了一个UICollectionViewController
• 创建了一个小型自定义类来处理我的单元格（基本上是内部图像视图的插座和标签）
• 我在UICollectionView属性检查器中将属性“item”和“layout”值分别设置为“1”和“Flow”（我有一个可重用的标识符）

有人可以为此提供帮助吗？

Answer 1

以下是您的问题的 程序化答案 ：

通过扩展 UICollectionViewFlowLayout 来创建一个类。

在我们班的实现文件中，添加以下方法：

- (instancetype)init
{
    self = [super init];
    if (self) {
       //overriding default values
        self.scrollDirection = UICollectionViewScrollDirectionVertical;
        self.minimumInteritemSpacing = 0;
        self.minimumLineSpacing = 0;
    }
    return self;
}

//正确安排你的细胞的方法

- (NSArray *) layoutAttributesForElementsInRect:(CGRect)rect {
//Returns an array of UICollectionViewLayoutAttributes objects representing the layout information for the cells and views.
NSArray *attribArray = [super layoutAttributesForElementsInRect:rect];

for(int i = 1; i < [attribArray count]; ++i) {
    UICollectionViewLayoutAttributes *currentLayoutAttributes = attribArray[i];
    UICollectionViewLayoutAttributes *prevLayoutAttributes = attribArray[i - 1];
   //No separation between the cells
    NSInteger maximumSpacing = 0;
    NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);

    if((origin + maximumSpacing + currentLayoutAttributes.frame.size.width) < self.collectionViewContentSize.width) {
        CGRect frame = currentLayoutAttributes.frame;
        frame.origin.x = origin + maximumSpacing;
        currentLayoutAttributes.frame = frame;
    }
}
return attribArray;
}

//如果集合视图绑定发生更改，它将重新计算其所有布局属性

 - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

  

将此自定义类设置为集合视图的流布局

 YourFLowLayoutCustomClass *flowlayout=[[YourFLowLayoutCustomClass alloc] init];

     

_collectionView = [[UICollectionView alloc] initWithFrame：frame collectionViewLayout：flowlayout];

现在，在已实现 UICollectionView 的类中，如果尚未实现，请实现以下方法：

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
   return CGSizeMake(self.view.frame.size.width/2, self.view.frame.size.height/3);
}

这将根据您共享的图片设置单元格的大小。干杯！

Answer 2

你可以这样做，

ajax

使用 let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() layout.sectionInset = UIEdgeInsets(top: 20, left: 0, bottom: 10, right: 0) layout.itemSize = CGSize(width: screenWidth/3, height: screenWidth/3) layout.minimumInteritemSpacing = 0 layout.minimumLineSpacing = 0 来实现这一目标。

您可以参考this link了解更多详情。 ：）

更新（根据评论）：

你应该覆盖collectionview的数据源。

UICollectionViewFlowLayout应返回2，numberOfItemsInSection应返回3

希望这会有所帮助：）