美文网首页
UICollectionView原理及基本使用

UICollectionView原理及基本使用

作者: 乡下秋草 | 来源:发表于2017-06-06 11:46 被阅读110次

    1、显示过程

    当UICollectionView显示内容时,先从数据源获取cell,然后交给UICollectionView。再从UICollectionViewLayout获取对应的layout attributes(布局属性)。最后,根据每个cell对应的layout attributes(布局属性)来对cell进行布局,生成了最终的界面。而用户交互的时候,都是通过Delegate来进行交互。

    2、数据源和代理方法

    注册cell

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

    注册Supplementary View 即分组头部底部视图

    //UICollectionElementKindSectionHeader 头部
    //UICollectionElementKindSectionFooter 底部
    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"cellHead"];
    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind: UICollectionElementKindSectionFooter withReuseIdentifier:@"cellFoot"];
    
    
    

    数据源方法

    /**
     获取分组内item的数量
    */
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
        
        return 3;
    }
    /**
     获取分组内section的数量
     */
    - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
        return 3;
        
    }
    /**
     获取头部尾部视图
     */
    - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
        
        if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
            UICollectionReusableView *headerView =(UICollectionReusableView *) [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"cellHead" forIndexPath:indexPath];
            
            
            [headerView setBackgroundColor:[UIColor redColor]];
            return headerView;
        }else{
            UICollectionReusableView *footerView =(UICollectionReusableView *) [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"cellFoot" forIndexPath:indexPath];
            [footerView setBackgroundColor:[UIColor greenColor]];
            return footerView;
        }
        
    }
    /**
     获取UICollectionViewCell
     */
    - ( UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
        
        UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell1" forIndexPath:indexPath];
        [cell setBackgroundColor:[UIColor blueColor]];
        return cell;
        
    }
    
    

    常用代理方法

    //这个协议用来设置和处理collectionView的功能和一些逻辑,所有方法都是可选实现:是否允许某个Item的高亮,返回NO,则不能进入高亮状态
    - (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath{
        return YES;
    }
    //当item高亮时触发的方法
    
    - (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath{
        NSLog(@"indexpath == %ld",(long)indexPath.row);
    
    }
    //结束高亮状态时触发的方法
    
    - (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath{
        NSLog(@"indexpath == %ld",(long)indexPath.row);
    
    }
    //是否可以选中某个Item,返回NO,则不能选中
    
    - (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath{
        return YES;
    }
    //是否可以取消选中某个Item
    
    - (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
        return YES;
    }
    //已经选中某个item时触发的方法
    
    - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
        NSLog(@"indexpath == %ld",(long)indexPath.row);
    
    }
    //取消选中某个Item时触发的方法
    
    - (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
        
        NSLog(@"indexpath == %ld",(long)indexPath.row);
        
    }
    

    长按item弹出编辑菜单

    //这个方法设置是否展示长按菜单
    
    - (BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath{
        return YES;
    }
    //这个方法用于设置要展示的菜单选项
    
    - (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender{
        return  YES;
    }
    //这个方法用于实现点击菜单按钮后的触发方法,通过测试,只有copy,cut和paste三个方法可以使用
    - (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender{
        
        if ([NSStringFromSelector(action) isEqualToString:@"cut:"]) {
            //点击了cut
            NSLog(@"点击了cut");
        }
        if ([NSStringFromSelector(action) isEqualToString:@"paste:"]) {
            //点击了paste
            NSLog(@"点击了paste");
    
        }
        if ([NSStringFromSelector(action) isEqualToString:@"copy:"]) {
            //点击了copy
            NSLog(@"点击了copy");
    
        }
        
        
    }
    

    3、UICollectionViewLayout

    UICollectionViewLayout是通过UICollectionViewLayoutAttributes类来管理cell、Supplementary View和Decoration View的位置、transform、alpha、hidden等等。
    UICollectionViewLayout的属性

    //同一组当中,垂直方向:行与行之间的间距;水平方向:列与列之间的间距
    @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原理及基本使用

          本文链接:https://www.haomeiwen.com/subject/npjgfxtx.html