UICollectionView自定义布局 (仅展示图片上下错开的效果)

   其实UICollectionView的自定义布局也非常简单 无非就是自己写布局文件, 即实例化UICollectionViewLayout. 其实系统已经给我们写了一个非常好的子类,就是UICollectionViewFlowLayout类. 但是一般我们会不满足系统提供的固定布局(标准的表格式), 所以通常我们会自定义布局.

如果你已经了解了UICollectionView的基本用法相信接下来你也会明白的, 否则建议您熟悉一下UICollectionView的基本使用, 即使用系统的UICollectionViewFlowLayout来布局, UICollectionView和UITableview非常的相似, 相信聪明的你会懂的.

实际上，在UICollectionViewLayout中定义的方法并不是完全的，也并不是完全必须的(其中两个就是可选的，可以查看官方文档)，但是实现必须的方法，是需要其他的功能辅助.子类需要实现的方法在头文件中列在SubclassingHooks下面。

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;

- (CGSize)collectionViewContentSize;

以上三个方法是在子类中必须实现的，

第一个方法获取某个indexPath下cell的LayoutAttributes信息；

最后一个是计算整个UICollectionView的contentSize，如果计算的大了，有可能会引起crash(具体情况取决于超出的尺寸是否会导致新的cell出现)

第二个获取在某个区域内(以contentSize为依据)可见cell的Attributes信息，这个函数需要获取这个可见区域内的indexPath的范围，而获取indexPath范围的方法需要获取某个点上cell的indexPath的方法，而这个方法又依赖于每个cell的size。

先看一下我自己简单的实现效果图

在看代码之前你需要了解的是我的尺寸等信息都是写死的,因为是自己的联系模板, cell的SIZE是160  200 cell的间距是10 只有一个section

说了这么多看一下具体的代码实现吧布局文件的.h

#import <UIKit/UIKit.h>@interface HoneyCombLayout : UICollectionViewLayout@property (nonatomic, assign) NSInteger num1;@property (nonatomic, assign) NSInteger num2;@end

布局文件的.m文件中只需要实现的3个方法

- (CGSize)collectionViewContentSize{    return CGSizeMake(320, 10 * 210 + 80);}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];        if (indexPath.item == 0) {        attributes.center = CGPointMake(80, 100);        attributes.size = CGSizeMake(160, 200);        self.num1 = 100;        return attributes;    } else if (indexPath.item == 1) {        attributes.center = CGPointMake(240, 180);        attributes.size = CGSizeMake(160, 200);;        self.num2 = 180;        return attributes;    }        if (indexPath.item % 2 == 0) {        attributes.center = CGPointMake(80, self.num1 + 210);        self.num1 = self.num1 + 210;            } else {        attributes.center = CGPointMake(240, self.num2 + 210);        self.num2 = self.num2 + 210;    }        attributes.size = CGSizeMake(160, 200);;        return attributes;}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{    NSArray *arr = [super layoutAttributesForElementsInRect:rect];    if ([arr count] > 0) {        return arr;    }    NSMutableArray *attributes = [NSMutableArray array];    for (NSInteger i = 0 ; i < [self.collectionView numberOfItemsInSection:0 ]; i++) {        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];        [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];    }    return attributes;}

关于自定义的UICollectionViewCell只需要把imageView的frame设置和ContentView一样的尺寸即可

总结

 其实自定义布局就是把每一个要出场的cell安排好大小和位置,然后他就会呈现, 关于更多样式的布局相信你心中也会有谱了,无论是错位布局或者是圆形布局无非都是需要你精准的计算cell的位置和大小并且加上一系列的判断