UICollectionView

UICollectionView基本属性

UIViewController需要继承UICollectionViewDataSource,UICollectionViewDelegateFlowLayout两个代理

//创建UICollectionView

- (void)createCollectionView
{
CGRect frame = CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height-20);

//创建集合视图，并指定布局对象
_collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:[self customLayout]];

_collectionView.backgroundColor = [UIColor redColor];

//设置代理
_collectionView.dataSource = self;
_collectionView.delegate = self;

//注册复用标识及item类型
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellId"];
//注册附加(头/尾)视图的复用标识及类型
[_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerId"];
[_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerId"];

[self.view addSubview:_collectionView];
}

//创建布局对象

- (UICollectionViewLayout *)customLayout
{
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

//最小行间距
layout.minimumLineSpacing = 10;
//item的尺寸
layout.itemSize = CGSizeMake(100, 100);
//section内边距
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
//附加视图尺寸，垂直滑动高度有效，水平滑动宽度有效
layout.headerReferenceSize = CGSizeMake(50, 50);
layout.footerReferenceSize = CGSizeMake(50, 50);

//设置滚动方向
//    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

return [layout autorelease];
}

//必须实现的代理方法

//返回item

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//该方法也可以出列cell，使用前必须注册，否则会崩溃
//该方法会对本次出列的cell进行预配置(宽高等)以提高效率
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellId" forIndexPath:indexPath];

//给每个item设置图片
NSString *fullName = [[NSBundle mainBundle].bundlePath stringByAppendingPathComponent:_dataSource[indexPath.item]];
UIImage *image = [[UIImage alloc] initWithContentsOfFile:fullName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:[image autorelease]];
CGSize size = cell.frame.size;
imageView.frame = CGRectMake(0, 0, size.width, size.height);

[cell addSubview:imageView];
return cell;
}

//创建头/尾视图代理方法

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
UICollectionReusableView *supplementaryView = nil;
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
supplementaryView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerId" forIndexPath:indexPath];
supplementaryView.backgroundColor = [UIColor greenColor];
} else if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
supplementaryView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footerId" forIndexPath:indexPath];
supplementaryView.backgroundColor = [UIColor blueColor];
}
//添加标题label
......
return supplementaryView;
}

简易自定义瀑布流

代码如下

//.h文件

#import <UIKit/UIKit.h>

@class WaterfallFlowLayout;

@protocol WaterfallFlowLayoutDelegate <NSObject>

- (CGFloat)heightForItemInLayout:(WaterfallFlowLayout *)layout AtIndexPath:(NSIndexPath *)indexPath;

@end

@interface WaterfallFlowLayout : UICollectionViewLayout

@property (nonatomic,assign)id<WaterfallFlowLayoutDelegate> delegate;

@property (nonatomic,assign)CGFloat itemSpacing;
@property (nonatomic,assign)NSInteger numberOfColumns;
@property (nonatomic,assign)UIEdgeInsets edgeInsets;

@end

//.m文件

#import "WaterfallFlowLayout.h"

@interface WaterfallFlowLayout ()
{
//用于记录每一列布局到的高度
NSMutableArray *_heightsOfColumns;
//用于记录每一个item的属性信息
NSMutableArray *_itemsAttributes;
}
@end

@implementation WaterfallFlowLayout

- (void)dealloc
{
[_heightsOfColumns release];
[_itemsAttributes release];
[super dealloc];
}

- (instancetype)init
{
if (self = [super init]) {
_heightsOfColumns = [[NSMutableArray alloc] init];
_itemsAttributes = [[NSMutableArray alloc] init];
}
return self;
}

- (void)setItemSpacing:(CGFloat)itemSpacing
{
if (_itemSpacing != itemSpacing) {
_itemSpacing = itemSpacing;
//会让布局失效，进行重新布局
[self invalidateLayout];
}
}

- (void)setNumberOfColumns:(NSInteger)numberOfColumns
{
if (_numberOfColumns != numberOfColumns) {
_numberOfColumns = numberOfColumns;
[self invalidateLayout];
}
}

- (void)setEdgeInsets:(UIEdgeInsets)edgeInsets
{
if (!UIEdgeInsetsEqualToEdgeInsets(self.edgeInsets, edgeInsets)) {
_edgeInsets = edgeInsets;
[self invalidateLayout];
}
}

/**
*  重写方法1:真正的布局在这里
*/
- (void)prepareLayout
{
[super prepareLayout];

//初始化布局的每一列的高度
if (_heightsOfColumns.count > 0) {
[_heightsOfColumns removeAllObjects];
}
for (NSInteger i=0; i<self.numberOfColumns; i++) {
[_heightsOfColumns addObject:@(self.edgeInsets.top)];
}
//清空属性数组
if (_itemsAttributes.count > 0) {
[_itemsAttributes removeAllObjects];
}

//计算每个item的宽度
CGFloat totalWidth = self.collectionView.frame.size.width;
CGFloat validWidth = totalWidth-self.edgeInsets.left-self.edgeInsets.right-(self.numberOfColumns-1)*self.itemSpacing;
CGFloat itemWidth = validWidth/self.numberOfColumns;
//布局每一个item
NSInteger totalItems = [self.collectionView numberOfItemsInSection:0];
for (NSInteger i=0; i<totalItems; i++) {
//构建IndexPath
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
//找到布局最短列的下标
NSInteger shortest = [self indexOfShortestColumn];
//向代理对象索取item高度
CGFloat itemHeight = [self.delegate heightForItemInLayout:self AtIndexPath:indexPath];
//计算坐标原点
CGFloat originX = self.edgeInsets.left+(itemWidth+self.itemSpacing)*shortest;
CGFloat originY = [_heightsOfColumns[shortest] floatValue];
//得出frame
CGRect frame = CGRectMake(originX, originY, itemWidth, itemHeight);
//创建属性对象并保存frame
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attr.frame = frame;
//保存属性信息
[_itemsAttributes addObject:attr];
//更新最短列的高度信息
[_heightsOfColumns replaceObjectAtIndex:shortest withObject:@(originY+itemHeight+self.itemSpacing)];
}
}

/**
*  重写方法2:返回所有与指定区域有交集的item的属性
*
*  @param rect 应该显示的区域
*
*  @return 所有符合要求的item的属性数组
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSMutableArray *array = [NSMutableArray array];
for (UICollectionViewLayoutAttributes *attr in _itemsAttributes) {
//判断frame有无交集
if (CGRectIntersectsRect(attr.frame, rect)) {
[array addObject:attr];
}
}
return array;
}
/**
*  重写方法3:返回指定位置的item的属性(frame)
*
*  @param indexPath 位置
*
*  @return 指定位置的item属性信息
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
return _itemsAttributes[indexPath.item];
}

/**
*  重写方法4:返回集合视图包含内容的尺寸
*
*  @return 内存尺寸
*/
- (CGSize)collectionViewContentSize
{
CGFloat width = self.collectionView.frame.size.width;
NSInteger longest = [self indexOfLongestColumn];
CGFloat height = [_heightsOfColumns[longest] floatValue]-self.itemSpacing+self.edgeInsets.bottom;
return CGSizeMake(width, height);
}

//返回数组中最长的一列的下标
- (NSInteger)indexOfLongestColumn
{
NSInteger index = 0;
for (NSInteger i=1; i<_heightsOfColumns.count; i++) {
if ([_heightsOfColumns[i] floatValue] > [_heightsOfColumns[index] floatValue]) {
index = i;
}
}
return index;
}
//返回数组中最短的一列的下标
- (NSInteger)indexOfShortestColumn
{
NSInteger index = 0;
for (NSInteger i=1; i<_heightsOfColumns.count; i++) {
if ([_heightsOfColumns[i] floatValue] < [_heightsOfColumns[index] floatValue]) {
index = i;
}
}
return index;
}

@end