首页 > 代码库 > iOS开发-UI (三)Collection
iOS开发-UI (三)Collection
知识点
1.UICollectionView的创建
2. UICollectionView的常用代理方法
3. UICollectionView相关XIB操作
================================
UICollectionView的创建
1.UICollectionViewLayout
作用:控制collectionView布局的一个抽象类
注意:一般不直接使用这个类,因为这个类很多方法都没有实现,只是规定了很多属性和方法,自已定义布局需要创建一个类继承UICollectionViewLayout,然后设定自定义布局
2.UICollectionViewFlowLayout
作用:系统写好的一个瀑布流布局
//使用系统写好的一个瀑布流布局
UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];
/*
UICollectionViewScrollDirectionVertical,
UICollectionViewScrollDirectionHorizontal
*/
//设置滑动的方向
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
//设置item之间的最小间距(竖直滑动的时候,表示的横向间距,水平滑动的时候,表示的是纵向间距)
layout.minimumInteritemSpacing = 35;
//设置item之间的最小间距(竖直滑动的时候,表示的纵向间距,水平滑动的时候,表示的是横向间距)
layout.minimumLineSpacing = 10;
3.- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout;
作用:创建一个UICollectionView,必须提供一个UICollectionViewLayout
//实例化一个UICollectionView
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
4.协议代理
1)UICollectionViewDataSource
2)UICollectionViewDelegateFlowLayout
================================
UICollectionView的常用代理方法
#pragma mark- UICollectionView的代理方法
1.- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
作用:返回组数
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 10;
}
2.- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
作用:返回元素个数
//返回每组当中所有的元素个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}
3.- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
作用:返回元素所使用的UICollectionViewCell
//返回每个元素所使用的UICollectionViewCell对象
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//去复用队列查找cell
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
//改变背景色
cell.backgroundColor = [UIColor redColor];
return cell;
}
4.- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
作用:返回元素的CGSize大小
//修改每一个item的宽度和高度
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(100, 100);
}
5.- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
作用:返回元素之间允许的最小间距,如果是水平滑动,则代表垂直距离,如果竖直滑动,则代表横向距离
//效果同layout.minimumInteritemSpeacing,二选一
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
}
6.- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
作用:返回元素之间允许的最小间距,如果是水平滑动,则代表横向距离,如果竖直滑动,则代表垂直距离
//效果同layout.minimumLineSpacing,二选一
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
}
7.- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
作用:控制一组视图和屏幕边界的(上,左,下,右)距离
//返回每一组元素跟屏幕4个边界的距离(上,左,下,右)
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
//创建一个UIEdgeInsets的结构体
return UIEdgeInsetsMake(10, 10, 10, 10);
}
8.- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
作用:返回头部视图的CGSize,如果是水平滑动,则宽度有效,如果是竖直滑动,只有高度有效
//返回头部视图的宽和高
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
//注意:如果是竖直滑动,则只有高度有效,如果是水平滑动,则只有宽度有效
return CGSizeMake(50, 50);
}
9.- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
作用:返回头部视图
//返回头部和尾部视图所使用的UICollectionReusableView对象
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
//由于头部和尾部视图的实例化都需要调用此方法,所以需要通过kind判断生成的是头部视图还是尾部视图
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
//表示需要创建头部视图
//复用形式创建头部视图
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
//改变背景色
headerView.backgroundColor = [UIColor greenColor];
return headerView;
}
return nil;
}
10.- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;
作用:选中某个元素
//选中某一个item
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"第%ld组第%ld个",indexPath.section,indexPath.item);
}
iOS开发-UI (三)Collection