UICollectionView(集合视图学习笔记)

UICollectionView(集合视图学习笔记)

#####集合视图的作用 集合视图是为了增强网格视图开发而在IOS6中开放的集合视图API。 #####集合视图的组成 集合视图有4个重要的组成部分,分别为:

  1. 单元格:即视图中的一个单元格。
  2. 节:即集合视图中的一个行数据,由多个单元格构成。
  3. 补充视图:即节的头和脚。
  4. 装饰视图:集合视图中的背景视图。 #####集合视图 集合视图UICollectionView继承自UIScrollView。集合视图也有两个协议:UICollectionViewDelegate委托协议和UICollectionViewDataSource数据源协议。UICollectionViewCell是单元格类,它的布局是由UICollectionViewLayout类定义的,它是一个抽象类。UICollectionViewFlowLayout类是UICollectionViewLayout类的子类,对于复杂的布局,可以自定义UICollectionViewLayout类。UICollectionView对应的控制器是UICollectionViewController类。 #####单元格 集合视图单元格是集合视图中最为重要的组成部分,没有样式和风格定义,单元格就是一个视图,可以在内部放置其他视图或控件。自定义一个单元格类,它需要继承UICollectionViewCell。 #####集合视图的一些常见属性 初始化:UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:CGRectZero collectionViewLayout:布局方式]; 注册cell:[collectionView registerClass:要注册的cell类 forCellWithReuseIdentifier:重用标识符]; 刷新数据:[collectionView reloadData]; 设置代理:delegate; 设置数据源:dataSource; 是否有反弹效果:bounces,默认是YES; 设置垂直方向的反弹是否有效:alwaysBounceVertical; 设置水平方向的反弹是否有效:alwaysBounceHorizontal; 是否允许滚动:scrollEnabled; 是否显示垂直方向的滚动条:showsVerticalScrollIndicator; 是否显示水平方向的滚动条:showsHorizontalScrollIndicator; 是否允许多选:allowsMultipleSelection; #####数据源与委托协议 集合视图的委托协议是UICollectionViewDelegate,数据源协议是UICollectionViewDataSource。 UICollectionViewDataSource中提供的方法如下:
//提供视图中节的个数,这个方法需要注意数据的行是否能与每一行有几个单元格整除,不能整除时要多加一行
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
}
复制代码
//每一节有几个单元格
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
}
复制代码
//为某个单元格提供显示数据
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
}
复制代码
//为补充视图提供显示数据
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
}
复制代码

#####创建cell 创建cell通过集合视图的dequeueReusableCellWithReuseIdentifier:forIndexPath:返回可重用单元格, 例如:

UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
复制代码

其中第一个参数是可重用单元格标识符,第二个参数是NSIndexPath类型,NSIndexPath是一种数据结构,是一种复杂多维数组结构,常用的属性是section和row两个,section是集合视图节索引,row是集合视图中单元格的索引。 委托协议UICollectionViewDelegate提供的常用方法如下:

//返回这个UICollectionView是否可以被选择
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    return YES;
}
复制代码
//选择单元格之后触发
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
}
复制代码
//取消选择单元格之后触发
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
}
复制代码

创建一个可以多选的集合视图示例:

//多选要设置属性allowsMultipleSelection为YES
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
//获取当前要操作的Cell
    self.cell = (YSLSeeEvaluateCell *)[collectionView cellForItemAtIndexPath:indexPath];
//可以对cell 的属性做一些设置
    self.cell.title.textColor = [YSLUiUtils colorPrimary];
    CALayer *layer = [self.cell.title layer];
    [layer setBorderWidth:0.5f];
    [layer setBorderColor:[YSLUiUtils colorPrimary].CGColor];
    layer.cornerRadius = 3.0f;
}

- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
//获取当前要操作的Cell
    self.cell = (YSLSeeEvaluateCell *)[collectionView cellForItemAtIndexPath:indexPath];
//可以对cell 的属性做一些设置
    self.cell.title.textColor = [YSLUiUtils colorThree];
    CALayer *layer = [self.cell.title layer];
    [layer setBorderWidth:0.5f];
    [layer setBorderColor:[YSLUiUtils colorSeven].CGColor];
    layer.cornerRadius = 3.0f;
}
复制代码

#####UICollectionViewFlowLayout流布局管理器 UICollectionViewFlowLayout是一种流布局管理器,即从左到右从上到下布局。 #####流布局管理器的一些常见属性 初始化:UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init]; 设置滚动方向:scrollDirection,默认为垂直滚动UICollectionViewScrollDirectionVertical,设置为UICollectionViewScrollDirectionHorizontal为水平滚动。 设置每个单元格的大小:itemSize。 设置整个collectionView的内边距:sectionInset,类型是UIEdgeInsets结构体。UIEdgeInsets包括:top(上边界),left(左边界),bottom(下边界),right(右边界)4个成员。UIEdgeInsetsMake函数可以创建UIEdgeInsets结构体实例。 设置每一行之间的间距:minimumLineSpacing。 设置单元格之间的间距:minimumInteritemSpacing。 #####UICollectionViewDelegateFlowLayout提供的一些方法

//动态设置每个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{
}
复制代码

转载于:https://juejin.im/post/5cb467885188251d2869994e

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/100981.html原文链接:https://javaforall.net

(1)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号