IOS-UICollectionView及其常用方法

UICollectionViewLayout

UICollectionViewLayout是UICollectionView比UITableView强大的原因，通过 UICollectionViewLayoutAttributes 类来管理 cell 、 Supplementary View 和 Decoration View 的位置、 transform 、 alpha 、 hidden 等等。

UICollectionViewLayout这个类只是一个基类，我们给UICollectionView使用的都是它的子类。系统为我们提供了一个最常用的layout为 UICollectionViewFlowLayout 。当UICollectionViewLayout满足不了我们的需求时，我们可以子类化UICollectionViewLayout 或者自定义layout 。

我们先来了解它内部的常用的属性：

//同一组当中，行与行之间的最小行间距，但是不同组之间的不同行cell不受这个值影响。
@property (nonatomic) CGFloat minimumLineSpacing;
//同一行的cell中互相之间的最小间隔，设置这个值之后，那么cell与cell之间至少为这个值
@property (nonatomic) CGFloat minimumInteritemSpacing;
//每个cell统一尺寸
@property (nonatomic) CGSize itemSize;
//滑动反向，默认滑动方向是垂直方向滑动
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
//每一组头视图的尺寸。如果是垂直方向滑动，则只有高起作用；如果是水平方向滑动，则只有宽起作用。
@property (nonatomic) CGSize headerReferenceSize;
//每一组尾部视图的尺寸。如果是垂直方向滑动，则只有高起作用；如果是水平方向滑动，则只有宽起作用。
@property (nonatomic) CGSize footerReferenceSize;
//每一组的内容缩进
@property (nonatomic) UIEdgeInsets sectionInset;

UICollectionView类似于UITableView和UITableViewController,使用UICollectionView必须实现
UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout这三个协议。
代码如下：

@interface ViewController ()

@end

@implementation ViewController

NSString *identifier = @"cell";
/**
 *  注册增补视图用的
 */
NSString *headerIdentifier = @"header";
NSString *footerIdentifier = @"footer";

- (void)viewDidLoad {
    [super viewDidLoad];
    // 创建布局对象
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    // 设置最小行间距
    flowLayout.minimumLineSpacing = 50;
    // 最小列间距
    flowLayout.minimumInteritemSpacing = 40;
    /**
     *   设置item的大小 格局item的大小自动布局列间距
     *
     *  @param 50 宽
     *  @param 50 高
     *
     *  @return
     */
    flowLayout.itemSize = CGSizeMake(150, 120);
    /**
     *  设置自动滚动的方向 垂直或者横向
     */
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    /**
     *  设置集合视图内边距的大小
     *
     *  @param 20 上
     *  @param 20 左
     *  @param 20 下
     *  @param 20 右
     *
     *  @return  UIEdgeInsetsMake  与下面的方法相同  -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
     */
    flowLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
    /**
     *  设置header区域大小
     *
     *  @param 414 414
     *  @param 70  无用
     *
     *  @return
     */
    flowLayout.headerReferenceSize = CGSizeMake(414, 70);
    /**
     *  设置footer区域的大小
     *
     *  @param 414 无用
     *  @param 70  自己设置
     *
     *  @return  如果写了这里必须设置注册
     */
//    flowLayout.footerReferenceSize = CGSizeMake(414, 70);
    
    /**
     创建UICollectionView前必须先创建布局对象UICollectionViewFlowLayout
     
     - returns: UICollectionViewFlowLayout(布局对象)
     */
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
    //设置属性
    collectionView.backgroundColor = [UIColor whiteColor];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    
    // 是否显示垂直方向指示标, 继承于UIScrollView, 他的方法可以调用
    collectionView.showsVerticalScrollIndicator = NO;

    // 注册
    [collectionView registerClass:[TestCollectionViewCell class] forCellWithReuseIdentifier:identifier];
    
    /**
     *  注册增补视图
     */
    [collectionView registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];

   [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerIdentifier];
    // 添加到视图上
    [self.view addSubview:collectionView];

}

#warning UICollectionViewDataSource

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    TestCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    
    cell.contentView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1.0];
    cell.imageView.image = [UIImage imageNamed:@"Icon@2x"];
    cell.label.text = @"测试";
    return cell;
}

// 设置每个分区返回多少item
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 15;
}

// 设置集合视图有多少个分区
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 4;
   }

/**
 *  返回增补视图
 *
 *  @param collectionView
 *  @param kind
 *  @param indexPath
 *
 *  @return
 */
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    // 如果是头视图
    if (kind == UICollectionElementKindSectionHeader) {
        // 从重用池里面取
        HeaderCollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier forIndexPath:indexPath];
        headerView.backgroundColor =[UIColor orangeColor];
        headerView.titleLabel.text = @"测试";
        return headerView;
    }else{
        UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:footerIdentifier forIndexPath:indexPath];
//        footerView.backgroundColor = [UIColor brownColor];
//        return footerView;
        return nil;
    }
    
}

#warning UICollectionViewDelegate
// 点击item触发的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    
    /**
    推出的页面的布局一般在这里写 最小行间距.列间距等
     - returns:
     */
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    
    DetailCollectionViewController *detailVC = [[DetailCollectionViewController alloc] initWithCollectionViewLayout:flowLayout];
    
    [self.navigationController pushViewController:detailVC animated:YES ];
     NSLog(@"%ld-%ld",indexPath.section,indexPath.row);
    
}

/**
 *  指定那些路径可以被点击
 *
 *  @param collectionView
 *  @param indexPath
 *
 *  @return
// */
//-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath{
//    
//    if (indexPath.section == 0) {
//        return NO;
//    }
//    return YES;
//}


#warning UICollectionViewDelegateFlowLayout

/**
 *  返回内边距的上左下右的距离
 *
 *  @param collectionView       UICollectionView
 *  @param collectionViewLayout UICollectionViewLayout
 *  @param section
 *
 *  @return
 */
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    
    
    return UIEdgeInsetsMake(30, 30, 30, 30);
    
}

我们首先了解UICollectionView的工作流程，先将UICollectionView分成视图、数据源和代理方法、UICollectionViewLayout三方面来进行介绍

一、视图

UICollectionView上面显示内容的视图有三种Cell视图、Supplementary View和Decoration View。
Cell视图
CollectionView只要内容由他展示数据从数据源获取出来，类似于UITableView中的cell；
Supplementary View
他展示的是每一组的信息类似于cell，他也是从数据员获取的数据，但是与cell有一点不同，他并不是强烈需要的。如flow layout中的header 和 footer；
Decoration View
这个视图是一个装饰视图，它没有什么功能性，它不跟数据源有任何关系，它完全属于layout对象。

二、数据源和代理方法

1、注册cell

在使用数据源返回cell给collectionView之前，我们必须先要注册，用来进行重用。
registerClass: forCellWithReuseIdentifier:
registerNib: forCellWithReuseIdentifier:

显而易见，前面两个方法是注册cell，其中，注册的方式有两种，第一种是直接注册class，它重用的时候会调用[[UICollectionView alloc] init]这样的初始化方法创建cell；另外一种是注册nib，它会自动加载nib文件。
注册的之后，我们如何重用？
在数据源方法当中返回 cell
的方法当中通过dequeueReusableCellWithReuseIdentifier:forIndexPath:
方法获取cell。

示例代码：

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ 
CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellReuseIdentify forIndexPath:indexPath];
cell.backgroundColor = [UIColor lightGrayColor]; cell.textLabel.text = [NSString stringWithFormat:@"(%zd,%zd)", indexPath.section, indexPath.row]; return cell;
}

2、数据源方法

数据源方法与UITableView类似，主要有：
numberOfSectionsInCollectionView:
collectionView: numberOfItemsInSection:
collectionView: cellForItemAtIndexPath:
collectionView: viewForSupplementaryElementOfKind: atIndexPath:

3、代理方法

数据源为UICollectionView提供数据相关的内容，而代理则主要负责用户交互、与数据无关的视图外形。主要分成两部分：

1、通过调用代理方法，管理视图的选中、高亮

collectionView:shouldDeselectItemAtIndexPath:
collectionView:didSelectItemAtIndexPath:
collectionView:didDeselectItemAtIndexPath:
collectionView:shouldHighlightItemAtIndexPath:
collectionView:didHighlightItemAtIndexPath:
collectionView:didUnhighlightItemAtIndexPath:

2、长按cell，显示编辑菜单当用户长按cell时，collection view视图会显示一个编辑菜单。这个编辑菜单可以用来剪切、复制和粘贴cell。不过，要显示这个编辑菜单需要满足很多条件，代理对象必须实现下面三个方法：

collectionView:shouldShowMenuForItemAtIndexPath:
collectionView:canPerformAction:forItemAtIndexPath:withSender:
collectionView:performAction:forItemAtIndexPath:withSender:

对于指定要编辑的cell，collectionView:shouldShowMenuForItemAtIndexPath:
方法需要返回YES

collectionView:canPerformAction:forItemAtIndexPath:withSender:
方法中，对于剪切、复制、粘贴三种action至少有一个返回YES。其实，编辑菜单是有很多种action的，但是对于UICollectionView来说，它仅仅支持的剪切、复制、粘贴三个，所以说这个代理方法至少支持这三种的一种。
剪切、复制、粘贴的方法名是：
cut:
copy:
paste:

当上面的条件都满足了，用户就可以长按cell显示出编辑菜单，然后选择对应的action，从而就会回调delegate的collectionView:performAction:forItemAtIndexPath:withSender: 方法去做对应的事情。

当我们想控制编辑菜单仅仅显示复制和粘贴时，我们就可以在collectionView:canPerformAction:forItemAtIndexPath:withSender:
方法中进行操作，具体请见下面代码：

- (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender{
    if ([NSStringFromSelector(action) isEqualToString:@"copy:"]
        || [NSStringFromSelector(action) isEqualToString:@"paste:"])
        return YES;
    return NO;
}