UICollectionView详解之基础使用介绍

    xiaoxiao2021-12-15  32

    UICollectionView简介

    UICollectionView在iOS6.0以后引进,与UITableView比较相似。但是UICollectionView将布局完全交给UICollectionViewLayout,而且允许用户自定义layout来进行布局。使其功能比UITableView更加强大、布局更加灵活,迅速在各大APP广泛使用。

    本篇将对UICollectionView的使用进行简单介绍,主要包括UICollectionView的视图组成、数据源、常用代理方法以及UICollectionViewFlowLayout的使用。下一遍将会详细讲解UICollectionViewLayout的自定义布局。

    UICollectionView的视图组成:

    UICollectionView由cell视图、Supplementary View和Decoration View三部分组成。

    cell视图

    这个大家应该都很清楚,UICollectionView主要内容展示的视图

    Supplementary View

    对于每组section的信息视图,类似于UITableView的header或者footer

    Decoration View

    装饰视图,好像很少使用

    cell视图跟Supplementary View使用是需要先进行注册以便实现复用: 注册cell的方法,第一个是代码创建,第二个是xib创建 - (void)registerClass:(nullable Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier; - (void)registerNib:(nullable UINib *)nib forCellWithReuseIdentifier:(NSString *)identifier; 注册Supplementary View的方法,第一个是代码创建,第二个是xib创建 - (void)registerClass:(nullable Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier; - (void)registerNib:(nullable UINib *)nib forSupplementaryViewOfKind:(NSString *)kind withReuseIdentifier:(NSString *)identifier; 在数据源回调中复用的方法: - (__kindof UICollectionViewCell *)dequeueReusableCellWithReuseIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath; - (__kindof UICollectionReusableView *)dequeueReusableSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath; ***上面方法的的kind和elementKind参数用来区分是头部视图还是尾部视图

    UICollectionView的数据源代理方法:

    //必须实现的数据源代理 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section; - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath; //可选数据源代理 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView; - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath; 处理移动相关(详细使用看demo) - (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0); - (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath NS_AVAILABLE_IOS(9_0);

    UICollectionView的常用代理方法:

    //点击cell高亮相关 - (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath; //cell选中相关 - (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath; - (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath; // called when the user taps on an already-selected item in multi-select mode - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath; //cell以及Supplementary View绘制相关 - (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); - (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath; ***这几个方法可以添加简易的动画,例如添加如下几句代码,cell加载的时候将会有放缩等效果。 - (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0) { cell.contentView.alpha = 0; cell.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(0, 0), 0); [UIView animateKeyframesWithDuration:.5 delay:0.0 options:0 animations:^{ /** * 分步动画 第一个参数是该动画开始的百分比时间 第二个参数是该动画持续的百分比时间 */ [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.8 animations:^{ cell.contentView.alpha = .5; cell.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(1.2, 1.2), 0); }]; [UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{ cell.contentView.alpha = 1; cell.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(1, 1), 0); }]; } completion:^(BOOL finished) { }]; } //长按显示菜单相关:(demo中有详细使用) - (BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath; - (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender; - (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender; //转场相关(下一篇会讲解) - (nonnull UICollectionViewTransitionLayout *)collectionView:(UICollectionView *)collectionView transitionLayoutForOldLayout:(UICollectionViewLayout *)fromLayout newLayout:(UICollectionViewLayout *)toLayout;

    UICollectionViewFlowLayout && UICollectionViewLayout:

    UICollectionView之所以比UITableView强大,主要在于其精髓UICollectionViewLayout的布局。它通过 UICollectionViewLayoutAttributes 类来管理 cell 、 Supplementary View 和 Decoration View 的 位置 、 transform 、 alpha 、 hidden 等等。先看看系统为我们提供的UICollectionViewFlowLayout布局的使用吧。

    UICollectionViewFlowLayout 的常用属性

    //决定了每行的间隔 @property (nonatomic) CGFloat minimumLineSpacing; //决定了Item之间的间隔 @property (nonatomic) CGFloat minimumInteritemSpacing; //cell的大小(如果实现的代理该设置无效) @property (nonatomic) CGSize itemSize; //cell大小的预计算 @property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes: //布局的方向 @property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical //头视图跟尾视图的大小(横向的时候,headerReferenceSize.width有效,headerReferenceSize.height无效。纵向时相反) @property (nonatomic) CGSize headerReferenceSize; @property (nonatomic) CGSize footerReferenceSize; //间距 @property (nonatomic) UIEdgeInsets sectionInset; // Set these properties to YES to get headers that pin to the top of the screen and footers that pin to the bottom while scrolling (similar to UITableView). @property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0); @property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

    UICollectionViewFlowLayout 的代理方法

    //基本就是上面的属性通过代理的方法返回 - (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; - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section; - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section; 文/阿聪o(简书作者) 原文链接:http://www.jianshu.com/p/b0d03c40fd65 著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
    转载请注明原文地址: https://ju.6miu.com/read-1000269.html

    最新回复(0)