collectionView的介绍
UICollectionView的学习和UITableView的学习80%一模一样
使用UITableView需要设置数据源和代理
UICollectionView的使用也需要设置数据源和代理
UITableView显示什么内容由数据源决定
想监听UITableView, 由代理决定
UICollectionView显示什么内容由数据源决定
UICollectionView监听由代理决定
UITableView的内容都显示到cell上
UICollectionView的内容也显示到cell上
自定义cell需要添加到contentView上
UICollectionView自定义cell也需要添加到contentView上
UICollectionView和UITableView都是继承于UIScrollView
注意点
one:
UICollectionView如何显示内容完全由layout(布局对象)决定
所以在创建UICollectionView时必须传递一个layout对象, 否则UICollectionView不知道如何显示
reason: 'UICollectionView must be initialized with a non-nil layout parameter'
two:
UICollectionViewLayout是一个抽象类, 如果使用UICollectionViewLayout类, 那么如何排布就必须由于我们自己来实现
所以一般情况使用UICollectionViewLayout的子类即可, 只有需要自定义cell显示样式时才需要定义一个类继承于UICollectionViewLayout来自己实现
UICollectionViewFlowLayout(流水布局): 该类是UICollectionViewLayout的子类, 系统以及提供了默认的实现
- 由于UICollectioncView上的cell如何展示, 是由于layout对象决定的, 所以如果想修改cell的尺寸/间隙等, 都需要通过layout对象来修改
collectionView的使用步骤
1.必须要有布局,在初始化的时候就需要. (-init{})
2.必须注册cell(分为代码和Xib)
3.UICollectionView的cell是由布局决定
4.自定义cell
// 系统自带了流水布局,专门做九宫格
// UICollectionViewLayout基类,UICollectionViewFlowLayout是布局对象
初始化的注意点
- 如果是继承于UICollectionViewController的话,初始化应该在- init方法中
- 附上代码,文字比较抽象
Author :会跳舞的狮子
#pragma mark - 初始化
- (instancetype)init {
//创建流水布局
UICollectionViewFlowLayout *layout = ({
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
//设置间距
NSInteger margin = 10;
layout.minimumInteritemSpacing = margin;
layout.minimumInteritemSpacing = margin;
//设置item尺寸
CGFloat itemW = (ScreenWidth - (MaxCol + 1) * margin) / MaxCol;
CGFloat itemH = itemW;
layout.itemSize = CGSizeMake(itemW, itemH);
layout.sectionInset = UIEdgeInsetsMake(margin, margin, margin, margin);
// 设置水平滚动方向
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
layout;
});
//应该把layout添加到它父类的[initWithCollectionViewLayout:]里面
if (self = [super initWithCollectionViewLayout:layout]) {
}
return self;
}
- 如果不是继承UICollectionViewController,而是在ViewController里面里面添加一个CollectionView的话, 初始化就不需要在 init方法中
UICollectionViewFlowLayout的基本属性
// 创建流水布局
// 默认滚动方向,垂直
UICollectionViewFlowLayout *layout = ({
UICollectionViewFlowLayout *layout = [[FlowLayout alloc] init];
// 设置尺寸
layout.itemSize = CGSizeMake(160, 160);
//估算的尺寸(一般不需要设置)
layout.estimatedItemSize = CGSizeMake(100, 100);
//头部的参考尺寸(就是尺寸)
layout.headerReferenceSize = CGSizeMake(100, 100);
//尾部的参考尺寸
layout.footerReferenceSize = CGSizeMake(100, 100);
//设置分区的头视图和尾视图是否始终固定在屏幕上边和下边
layout.sectionFootersPinToVisibleBounds = YES;
layout.sectionHeadersPinToVisibleBounds = YES;
// 设置水平滚动方向
//水平滚动
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
//竖直滚动
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 设置额外滚动区域
layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
// 设置cell间距
//设置水平间距, 注意点:系统可能会跳转(计算不准确)
layout.minimumInteritemSpacing = 50;
//设置垂直间距
layout.minimumLineSpacing = 50;
layout;
});
UICollectionView的基本属性
// 创建UICollectionView
// UICollectionView默认的颜色就是黑色,所以建议设置背景颜色
UICollectionView *collectionView = ({
//创建UICollectionView对象, 将layout添加到collectionViewLayout:里面
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
//设置UICollectionView的尺寸
collectionView.bounds = CGRectMake(0, 0, self.view.bounds.size.width, 300);
//设置背景颜色
collectionView.backgroundColor = [UIColor greenColor];
//设置中心点
collectionView.center = self.view.center;
// 设置数据源,展示数据
collectionView.dataSource = self;
//设置代理,监听
collectionView.delegate = self;
// 注册cell
[collectionView registerNib:[UINib nibWithNibName:@"JHCell" bundle:nil] forCellWithReuseIdentifier:ID];
/* 设置UICollectionView的属性 */
//设置滚动条
collectionView.showsHorizontalScrollIndicator = NO;
collectionView.showsVerticalScrollIndicator = NO;
//设置是否需要弹簧效果
collectionView.bounces = NO;
collectionView;
});
[self.view addSubview:collectionView];
数据源方法:
// 告诉系统一共多少组
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 3;
}
// 告诉系统每组多少个
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 100;
}
// 告诉系统每个Cell如何显示
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
// 1.从缓存池中取
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
/*
注意:
UICollectioncView的cell和UITableView的cell不太一样,
UITableView有默认的子控件
UICollectionViewCell除了contentView以外, 没有提供默认的子控件
设置UICollectionViewCell需要自定义 最好结合Xib使用
*/
// 2.使用
cell.backgroundColor = (indexPath.item % 2)?[UIColor redColor]:[UIColor greenColor];
// 3.返回
return cell;
}
UICollectionView的代理方法
#pragma mark -UICollectionViewDelegate
//UICollectionView被选中的时候调用
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"%zd",indexPath.item);
}
// 返回这个UICollectionView是否可以被选择
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}
UICollectionViewDelegateFlowLayout
- UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子协议
- 上面的方法在创建FlowLayout时静态的进行设置，如果我们需要动态的设置这些属性，我们可以通过代理来实现。
//动态设置每个Item的尺寸大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
//动态设置每个分区的EdgeInsets
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
//动态设置每行的间距大小
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
//动态设置每列的间距大小
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
//动态设置某组头视图大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
//动态设置某组尾视图大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;
以上都是UICollectionView的基本用法,下一篇会写关于UICollectionView实现头部视图漂浮的效果
Author:会跳舞的狮子 一步一个脚印,积累点滴.
