UICollectionView-网格视图

Posted 2020-07-08 梦之魂_JG

1. UICollectionView

   网格视图，除了提供与UITableView同样的功能显示一组顺序显示的数据，还支持多列的布局。

2. UICollectionView 使用

    > 设置Controller要遵循的协议：

    UICollectionViewDataSource               // 数据源协议

    UICollectionViewDelegate                   // 数据行为协议

    UICollectionViewDelegateFlowLayout   // 数据流式布局协议

    > 创建流式布局

    flowLayout = [[UICollectionViewFlowLayout alloc] init]

    > 设置该布局下滑动方向

    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical / Horizontal  // 默认是Vertical 在Horizontal时，元素是依次横向摆放，Vertical时，依次竖向摆放

     > 以布局方式和frame 初始化UICollectionView

     [[UICollectionView alloc] initWithFrame: collectionViewLayout: ]

     > 设置背景色，纯代码实现时，UICollectionView默认背景色是黑色

     .barckgroundColor

     > 设置代理

     .dataSource     // 代理 UICollectionViewDataSource

     .delegate         // 代理 UICollectionViewDelegate ，UICollectionViewDelegateFlowLayout

     > 注册标识单元格UICollectionViewCell， UICollectionView Cell只能使用定制化的，并且必须注册。

     [collectionView registerNib: forCellWithReuseIdentifier:]

     [collectionView registerClass: forCellWithReuseIdentifier:]

     > 注册标识分区表头／表尾 UICollectionReusableView,创建时要手动设置其class

     [collectionView registerNib: forSupplementaryViewOfKind: withReuseIdentifier: ]

     /* forSupplementaryViewOfKind: 表示是为表头还是表尾注册，参数只有两个可选值：UICollectionElementKindSectionHeader：表头，UICollectionElementKindSectionFooter: 表尾  */

     > 协议方法

     - UICollectionViewDataSource

     必须实现：

// 每个分区条数（不是行数）

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

       // 数据绑定cell

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

      其他方法：

// 返回分区数量

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

  // 数据绑定表头／表尾：必须为其设置尺寸才可显示，注意查看不同scrollDirection下表头的展现

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

     － UICollectionViewDelegateFlowLayout

  // 返回分区表头尺寸

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

     // 返回分区表尾尺寸

- (CGSize)collectionView:(UICollectionView *)collectionView layout:

(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

     // 返回每条的尺寸

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

     // 返回每个分区四周的外间距

     - (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

    －UICollectionViewDelegate

   // 条被选中：注意被选中的背景色，只能自定义selectedBackgroundView，且设置后，不能设置cell的背景色，否则无法看到点击选中效果

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

  // 条被反选

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