美文网首页iOS精華ios开发iOS开发精进
IOS-UICollectionView及其常用方法

IOS-UICollectionView及其常用方法

作者: 小行为 | 来源:发表于2016-02-23 11:56 被阅读5052次

    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 ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout, UICollectionViewDelegate >
    
    @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;
    }
    

    相关文章

      网友评论

      本文标题:IOS-UICollectionView及其常用方法

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