使用 UICollectionView 的类似平铺的应用

Question

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

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

这个想法是，今天，我知道我在每个单元格中显示了 6 个图标。但明天可能是 8 点、10 点等。

因此，我想要一个集合视图，而不是一个基于 6 个图像视图的静态故事板，因为它具有灵活性。

但是我找不到如何将我的单元格相对于容器视图进行约束。 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;
}

//如果collection view bound发生变化，会重新计算其所有的layout属性

 - (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

你可以这样做，

  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

使用UICollectionViewFlowLayout 来实现这一点。

您可以参考this link 了解更多详情。 :)

更新（根据评论）：

你应该覆盖collectionview的数据源。

numberOfItemsInSection 应该返回 2，umberOfSectionsInCollectionView 应该返回 3

希望这会有所帮助:)