UICollectionView基础

作者: 无敌小阿铭 | 来源:发表于2016-06-27 20:29 被阅读230次

    UICollectionView

    先方一波效果图


    屏幕快照 2016-06-27 下午8.26.31.png
    • UICollectionLayout
      UICollectionLayout布局类,是一个抽象的类,用来管理item的大小和位置等布局信息。
      UICollectionFlowLayout是UICollectionLayout子类,系统提供给我们封装好的基础瀑布流的布局类

    代码部分😳

    /** 创建布局类对象*/
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    
    /** 设置item的大小 默认值:(50, 50)*/
        flowLayout.itemSize = CGSizeMake(100, 100);
        
        
        /** 设置滚动方向*/
        flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
        
        /** 设置头部视图的大小*/
        flowLayout.headerReferenceSize = CGSizeMake(100, 50);
        
        /** 设置尾部视图的大小*/
        flowLayout.footerReferenceSize = CGSizeMake(200, 100);
        
        /** 设置两列之间间距的最小值*/
        // flowLayout.minimumInteritemSpacing = 100;
        
        /** 设置两行之间间距的最小值*/
        flowLayout.minimumLineSpacing = 50;
        
        flowLayout.sectionInset = UIEdgeInsetsMake(20, 50, 50, 100);
        
    // 先写这个在写UICollectionFlowLayout你就懂了😳
    // collectionView初始化方法的第二个参数就是上面说的布局类对象😄
        /** 根据布局类对象,创建conllectionView.*/
        UICollectionView *girlCollectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
        [self.view addSubview:girlCollectionView];
        [flowLayout release];
        [girlCollectionView release];
        
        girlCollectionView.backgroundColor = [UIColor whiteColor];
        
    //跟特么tableView的协议长得差不多😄
    //长这样:<UICollectionViewDataSource, UICollectionViewDelegate>。。。😏
        /** 指定代理人*/
        girlCollectionView.delegate = self;
        girlCollectionView.dataSource = self;
    
        /** 注册collectionView cell 的重用池*/
        [girlCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
        
        /** 注册collectionView 头视图的重用池*/
        [girlCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
        
        /** 注册collectionView 尾部视图的重用池*/
        [girlCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
    

    以上就是创建UICollectionView的代码😳看着好像很多其实头部跟尾部的重用池并不常用主要还是协议代理人不要忘了,以及一些布局类对象UICollectionFlowLayout的一些属性,下面是协议方法,协议方法也跟UITableView差不多,他俩共同继承于UIScrollView类,很多人误认为UICollectionView是UITabelView的儿子,其实他是UIScrollView的儿子,而UICollectionView和UITableView是兄妹关系,乱。。。。关系
    下面是协议方法的代码部分😳😳😳

    • 首先是UICollectionViewDataSource的协议方法,他有两个必须实现的"卖身契"

    返回每个分区item的个数

    /** 必须实现的两个协议方法*/
    /** 返回item的个数*/
    -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
        
        return 50;
        
    }
    

    返回cell说白了就是给每个cell里边加东西用的😳

    /** 返回cell*/
    -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
        
        UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
        
        cell.contentView.backgroundColor = [UIColor colorWithRed:arc4random() % 265 / 255.0 green:arc4random() % 265 / 255.0 blue:arc4random() % 265 / 255.0 alpha:0.5];
        
        return cell;
        
    }
    
    • 非必须实现的卖身契😨
      返回分区数
    -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
        
        return 5;
        
    }
    

    返回头部视图或者尾部视图

    -(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
        
        if (kind == UICollectionElementKindSectionHeader) {
            
            /** 从重用池当中取出头部视图*/
            UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
            headerView.backgroundColor = [UIColor redColor];
            
            
            return headerView;
            
        } else {
            
            UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath];
            footerView.backgroundColor = [UIColor orangeColor];
            
            return footerView;
            
        }
        
    }
    
    • 还有个UICollectionViewDelegate协议方法😳

    就是item块的点击方法

    /** 点击item的协议方法*/
    -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
        
        NSLog(@"item: %ld", indexPath.row);
        
    }
    

    这一块的方法就很重要了😳 他可以实现很多东西比如页面跳转是做项目是常用的方法

    屏幕快照 2016-06-27 下午7.19.14.png

    就像介个样子😳点一个电影进去就会进入详情界面

    OK,CollectionView就这么些东西了!!!

    相关文章

      网友评论

      本文标题:UICollectionView基础

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