博客> UICollectionView 集合视图基本使用
UICollectionView 集合视图基本使用
2017-08-16 12:25 评论:0 阅读:290 诸葛亮倒骑小毛驴
ios UICollectionView 集合视图基本使用

UICollectionView简介

  • UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView 和 UITableViewController 类。

  • 使用UICollectionView 必须实现UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout这三个协议。

UICollectionViewFlowLayout

  • UICollectionViewFlowLayout是苹果内置的一种流式的布局,其继承于UICollectionViewLayout,负责整个视图的布局,通过这个类,可以高度的定制每个item的位置,以及表头、脚注和装饰视图的位置,只需简单的配置几个属性就可以完成整个布局的搭建。

  • 初始化方法:alloc + init

  • 常用属性:

    • itemSize:设置item尺寸

    • minimumLineSpacing:设置每行之间的间距

    • minimumInteritemSpacing:设置每行内部item之间的间距

    • headerReferenceSize:设置头部size

    • footerReferenceSize:设置脚注size

    • scrollDirection:设置滚动方向
  • sectionHeadersPinToVisibleBounds:设置是否当元素超出屏幕之后固定头部视图位置,默认NO,iOS9新特性;

  • sectionFootersPinToVisibleBounds:设置是否当元素超出屏幕之后固定尾部视图位置,默认NO,iOS9新特性;

  • 属性配置UICollectionViewFlowLayout是在全局配置布局,想要单独定制每个item,需遵守UICollectionViewDelegate以及UICollectionViewDelegateFlowLayout协议,并根据需要实现如下方法即可:

// 1、单独定制item的尺寸

  • (CGSize)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

// 2、定义每个UICollectionView的margin(间距),对每一个section单独设置边界,即内部cell上下左右距离header和footer的边界(间距)

  • (UIEdgeInsets)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

// 3、单独定制每行之间的间距

  • (CGFloat)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;

// 4、单独定制每行item之间的间距

  • (CGFloat)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

// 5、单独定制头部视图size

  • (CGSize)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;

// 6、单独定制脚注视图size

  • (CGSize)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

UICollectionView 常用方法

初始化

  • (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout;

注册 注册Cell

  • (void)registerClass:(Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier; 1 注册头部或尾部视图 // @param elementKind // UICollectionElementKindSectionHeader:头部 // UICollectionElementKindSectionFooter:尾部

  • (void)registerClass:(Class)viewClass forSupplementaryViewOfKind:(NSString )elementKind withReuseIdentifier:(NSString )identifier;

重用

// 1、Cell重用

  • (id)dequeueReusableCellWithReuseIdentifier:(NSString )identifier forIndexPath:(NSIndexPath)indexPath;

// 2、supplementary View重用

  • (id)dequeueReusableSupplementaryViewOfKind:(NSString)elementKind withReuseIdentifier:(NSString )identifier forIndexPath:(NSIndexPath*)indexPath;

操作

items操作 // 插入

  • (void)insertItemsAtIndexPaths:(NSArray *)indexPaths;

// 删除

  • (void)deleteItemsAtIndexPaths:(NSArray *)indexPaths;

// 刷新

  • (void)reloadItemsAtIndexPaths:(NSArray *)indexPaths;

// 移动

  • (void)moveItemAtIndexPath:(NSIndexPath )indexPath toIndexPath:(NSIndexPath )newIndexPath;

sections操作 // 插入

  • (void)insertSections:(NSIndexSet *)sections;

// 删除

  • (void)deleteSections:(NSIndexSet *)sections;

// 刷新

  • (void)reloadSections:(NSIndexSet *)sections;

// 移动

  • (void)moveSection:(NSInteger)section toSection:(NSInteger)newSection;

indexPath 获取方法

// 根据某一个点的位置获取item的indexPath

  • (nullable NSIndexPath *)indexPathForItemAtPoint:(CGPoint)point;

// 根据cell获取item的indexPath

  • (nullable NSIndexPath )indexPathForCell:(UICollectionViewCell )cell;

reordering 重新排序(iOS9新特性)

一般重新排序步骤需经历如下周期,与手势搭配使用,根据手势的周期变化执行不同的方法: // 1、设置是否允许移动item

  • (BOOL)collectionView:(UICollectionView )collectionView canMoveItemAtIndexPath:(NSIndexPath )indexPath;

// 2、一般在手势开始时调用,与 indexPathForItemAtPoint 搭配使用,根据手势在视图上的位置获取item所在的indexPath, 开始在特定的索引路径上对cell(单元)进行Interactive Movement(交互式移动工作)

  • (BOOL)beginInteractiveMovementForItemAtIndexPath:(NSIndexPath *)indexPath;

// 3、 在手势作用期间更新交互移动的目标位置。

  • (void)updateInteractiveMovementTargetPosition:(CGPoint)targetPosition;

// 4、在完成手势动作后,结束交互式移动

  • (void)endInteractiveMovement;

// 5、取消移动

  • (void)cancelInteractiveMovement;

// 6、当移动结束后,如下方法将会被触发。

  • (void)collectionView:(UICollectionView )collectionView moveItemAtIndexPath:(NSIndexPath )sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath;

UIScrollViewDelegate

// 1、设置是否允许选中

  • (BOOL)collectionView:(UICollectionView )collectionView shouldSelectItemAtIndexPath:(NSIndexPath )indexPath;

// 2、设置是否允许取消选中

  • (BOOL)collectionView:(UICollectionView )collectionView shouldDeselectItemAtIndexPath:(NSIndexPath )indexPath;

// 3、选中

  • (void)collectionView:(UICollectionView )collectionView didSelectItemAtIndexPath:(NSIndexPath )indexPath;

// 4、取消选中

  • (void)collectionView:(UICollectionView )collectionView didDeselectItemAtIndexPath:(NSIndexPath )indexPath;

UICollectionViewDataSource

// 1、设置section组数

  • (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

// 2、设置item个数

  • (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;

// 3、配置cell

  • (UICollectionViewCell )collectionView:(UICollectionView )collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

// 4、自定义头部、脚注视图

  • (UICollectionReusableView )collectionView:(UICollectionView )collectionView viewForSupplementaryElementOfKind:(NSString *)kind

tips:配置Cell以及头部或者脚注视图需子类化UICollectionViewCell或UICollectionReusableView,并重写initWithFrame方法,添加视图;

UICollectionView 常用属性

delegate:设置代理

dataSource:设置数据源

allowsSelection:设置是否可以选中

allowsMultipleSelection:设置是否可以多选

收藏
2
sina weixin mail 回到顶部