文章目录

  • UICollectionView简介
  • UICollectionViewLayout与UICollectionViewFlowLayout的对比
  • 一些基本属性
  • 实现简单布置九宫格视图
  • UICollectionViewDataSource协议
  • UICollectionViewDelegate协议


UICollectionView简介

UICollectionView是iOS6.0之后一个新的UI控件,和UITableView有些相似,其中很多方法都很相似。

UICollectionViewLayout与UICollectionViewFlowLayout的对比

UICollectionViewLayout是一个layout对象,UICollectionView几乎所有的显示效果都由UICollectionViewLayout负责。
UICollectionViewFlowLayout是继承自UICollectionViewLayout的,是官方实现的流水布局效果,是一种非常经典的布局效果,应该也是我们最常用的。

一些基本属性

UICollectionViewFlowLayout的一些基本属性:

itemSize 每个item的大小;
minimumLineSpacing 每行最小间距;
minimumInteritemSpacing 每列最小间距;
sectionInset 每个section的边距;
scrollDirection 元素滚动方向。

实现简单布置九宫格视图

  1. 先在C的ViewDidLoad中添加代码
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UICollectionViewFlowLayout* flowLayout = [[UICollectionViewFlowLayout alloc] init];

    flowLayout.itemSize = CGSizeMake(100, 100);

    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;

    flowLayout.minimumLineSpacing = 20;

    flowLayout.minimumInteritemSpacing = 20;

    flowLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);

    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:flowLayout];

    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"myCell"];

    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.view addSubview:self.collectionView];
   
}

需要注意的一点CollectionView在完成代理传回时,必须注册一个cell
self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"myCell"]; 和tableView类似,又有所不同,除了注册Cell的方法外,还可以通过临时创建来做

//返回分区个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
//返回每个分区的item个数
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 10;
}
//返回每个item
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewCell * cell  = [collectionView dequeueReusableCellWithReuseIdentifier:@"myCell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
    return cell;
}

如果内容大小超出一屏,和tableview类似时可以进行时图滑动的
,我们在上面设置布局方式的时候设置了垂直布局layout.scrollDirection = UICollectionViewScrollDirectionVertical; //这个是水平布局 //layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; 这样系统会在一行充满后进行第二行的排列,如果设置为水平布局,则会在一列充满后,进行第二列的布局,这种方式也被称为流式布局

UICollectionViewDataSource协议

此协议主要用于collectionView的相关数据处理,包含方法如下
有两个方法是我们必须实现的
设置每个分区的item个数

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

设置返回每个item的属性

  • (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
  • 下面的方法是可选实现的,一般都会去实现
  • (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

对头视图或者尾视图进行设置

  • (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

设置某个item是否可以被移动,返回NO则不能移动

  • (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0);

移动item的时候,会调用这个方法

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

UICollectionViewDelegate协议

这个协议用来设置和处理collectionView的功能和一些逻辑,所有方法都是可选实现:

是否允许某个Item的高亮,返回NO,则不能进入高亮状态

  • (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath;

结束高亮状态时触发的方法

  • (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath;

是否可以选中某个Item,返回NO,则不能选中

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

是否可以取消选中某个Item

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

已经选中某个item时触发的方法

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

取消选中某个Item时触发的方法

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

将要加载某个Item时调用的方法

  • (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0);

将要加载头尾视图时调用的方法

  • (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0);

已经展示某个Item时触发的方法

  • (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath;

已经展示某个头尾视图时触发的方法

  • (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;

collectionView进行重新布局时调用的方法

  • (nonnull UICollectionViewTransitionLayout *)collectionView:(UICollectionView *)collectionView transitionLayoutForOldLayout:(UICollectionViewLayout *)fromLayout newLayout:(UICollectionViewLayout *)toLayout;