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的位置和大小并且加上一系列的判断