文档章节

iOS UICollectionView、UICollectionViewCell和Header、Footer

JoshSone
 JoshSone
发布于 2016/11/10 08:42
字数 814
阅读 374
收藏 1

准备工作:创建UICollectionView

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
@property(nonatomic,strong)UICollectionView*CV;
@property(nonatomic,strong)UICollectionViewFlowLayout*FL;

①UICollectionViewFlowLayout

UICollectionViewFlowLayout是系统提供给我们一个封装好的布局设置类,其中有一些布局属性我们可以进行设置:

//初始化FL
    self.FL=[[UICollectionViewFlowLayout alloc]init];
    //Cell的大小
    self.FL.itemSize=CGSizeMake(100, 50);
    //Cell的最小行间距
    self.FL.minimumLineSpacing=10;
    //Cell的最小列间距
    self.FL.minimumInteritemSpacing=5;
    //内部的(上左下右)可以左右留空隙
    self.FL.sectionInset = UIEdgeInsetsMake(10, 7, 0, 7);
    
    //滑动方向
    //UICollectionViewScrollDirectionVertical   - 垂直
    
    //UICollectionViewScrollDirectionHorizontal - 水平

    self.FL.scrollDirection=UICollectionViewScrollDirectionVertical;

    //设置header的大小
    self.FL.headerReferenceSize = CGSizeMake(320, 100);

②UICollectionView

//初始化CV
    self.CV=[[UICollectionView alloc]initWithFrame:CGRectMake(0, 64, 320, 350) 
collectionViewLayout:self.FL];
//我曾经在一个ScrollView里面添加CollectionView,CV的高我设置等于ScrollView的高(用自动适配确定),结果造成我的CV明明数据加载完成却无法向下滑动,更改其值为确定值后,才正常
    self.CV.delegate=self;
    self.CV.dataSource=self;
    [self.view addSubview:self.CV];

③两个必写的方法

//这里设置每组里面返回多少Item
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{  
     return  12;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
//在这里复用Cell

}

一:Xib初始化

1.创建UICollectionViewCell,同时生成XIB文件

生成好的文件:

2.在这里我设置了背景颜色,同时设置Identifier。

3.在VC.m文件中

-(void)CreatCellFromXib{
    
    UINib *nib=[UINib nibWithNibName:@"CollectionViewCell" bundle:nil];
    //把nib注册到CollectionView
    //xib文件的初始化方法
    [self.CV registerNib:nib forCellWithReuseIdentifier:@"cellname"];
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellname=@"cellname";
   
    /*
      注意:三码一致
     xib                 - Identifier
     registerNib         - Identifier
     dequeueReusableCell - Identifier  
     */
    CollectionViewCell*cell=[collectionView dequeueReusableCellWithReuseIdentifier:
cellname forIndexPath:indexPath];
     return cell;
    }

二:纯代码初始化

1.创建UICollectionViewCell,为了方便起见我直接命名为UICollectionViewCell2

2.VC.m中初始化Cell,并设置Identifier

-(void)CreatCellFromCode{
    //初始化,在这里设置Identifier
    [self.CV registerClass:[CollectionViewCell2 class] forCellWithReuseIdentifier:@"cellname"];
}

3.复用cell

(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellname=@"cellname";
    CollectionViewCell2 *cell=[collectionView dequeueReusableCellWithReuseIdentifier:cellname forIndexPath:indexPath];
    cell.backgroundColor=[UIColor blueColor];
       return cell;
}

三:StoryBoard初始化

注意:StoryBoard初始化,不用初始化UICollectionView和UICollectionViewFlowLayout
 

1.创建UICollectionViewCell,为了方便起见我直接命名为UICollectionViewCell3

2.SB中,如下操作

3.把UICollectionView当做属性拖入到VC.m中

@property (weak, nonatomic) IBOutlet UICollectionView *CV;
//这两句代码还是要写
self.CV.delegate=self;
self.CV.dataSource=self;

最后生成效果如下:

四.用XIB生成Header、Footer

①首先创建 UICollectionReusableView的子类HeaderView 和FooterView,同时生成XIB文件

②设置XIB文件中的identifier值为header、footer

③注册

UINib *nib=[UINib nibWithNibName:@"HeaderView" bundle:nil];
    [self.CV registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];

//UICollectionElementKindSectionHeader  --header
//UICollectionElementKindSectionFooter  --footer

④回调方法

//header的回调方法
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
          if (kind== UICollectionElementKindSectionHeader)  {
              HeaderView *hview = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"header" forIndexPath:indexPath];
            hview.frame = CGRectMake(0, 0, SW, SH);
            return hview;
        }else{
       FooterView *fview = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footer" forIndexPath:indexPath];
            fview.frame = CGRectMake(0, 0, SW, SH);
            return fview;
}
      
    
    //如果生成两个CV但其中一个没有设置header 可以添加判断后返回一个空View--- return [[UICollectionReusableView alloc]init];
    
}

注意:header大小的设置:!

写法一:

self.FL.headerReferenceSize = CGSizeMake(320, 100);

 写法二:

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    return CGSizeMake(320, 100);
}

写法三:(如果是在StoryBoard里生成的collectionView,这种方法header 的大小位置能确定,但是实际上的item的位置是按照StoryBoard里的位置布局的,也就是说,可能造成headerView和item重合的现象)

CLheader.frame=CGRectMake(0, 0, 320, 100);

 

© 著作权归作者所有

共有 人打赏支持
JoshSone
粉丝 7
博文 76
码字总数 32794
作品 0
长春
iOS工程师
iOS流布局UICollectionView系列二——UICollectionView的代理方法

iOS流布局UICollectionView系列二——UICollectionView的代理方法 一、引言 在上一篇博客中,介绍了最基本的UICollectionView的使用和其中我们常用的属性和方法,也介绍了瀑布流布局的过程与...

珲少
2015/10/27
0
3
iOS CollectionView 的那些事

UICollectionView是开发中用的比较多的一个控件,本文记录UICollectionView在开发中常用的方法总结,包括使用实现Grid布局、添加Header/Footer、自定义layout布局、UICollectionView的其它方...

aron1992
前天
0
0
iOS 11 下 UICollectionView 出现滚动条被 HeaderView 遮挡的问题

iOS 11 下 UICollectionView 出现滚动条被 HeaderView 遮挡的问题 在使用了的 UICollectionView 页面中,滑动页面的时候滚动条会被 HeaderView 遮挡。导致滚动条看起来是断断续续的。 问题页...

宜铜铜
2017/10/21
0
0
(转)直接拿来用!最火的iOS开源项目(二)

“每一次的改变总意味着新的开始。”这句话用在iOS上可谓是再合适不过的了。GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7,有的项目...

孙启超
2013/06/21
0
1
iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局

iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局 一、引言 前面的博客介绍了UICollectionView的相关方法和其协议中的方法,但对布局的管理类UICollectionViewFlowLayout没...

珲少
2015/10/27
0
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Memcached启动参数详解

memcached -d -m 1024 -l 192.168.100.101 -p 11211 -P /tmp/memcached.pid -c 1024 -f 1.25 -n 80 -t 16 运行参数描述 -d:以守护(daemon)进程方式启动; -u:是运行Memcache的用户,例如 ......

月下狼
26分钟前
0
0
xgboost-kaggle

https://www.kaggle.com/dansbecker/xgboost This tutorial is part of the Learn Machine Learning series. In this step, you will learn how to build and optimize models with the powe......

tantexian
27分钟前
0
0
nginx学习八 代理服务

最常用的语法 proxy_pass Syntax: proxy_pass URL;Default: --Context:location.if in location,limit_exception 反向代理 例:/etc/nginx/conf.d/default.conf 反向代理(代理服务端)......

Romanceling
34分钟前
0
0
npm ERR! Unexpected end of JSON ...

npm install 报错: npm ERR! Unexpected end of JSON input while parsing near '..."^2.8.14"},"_hasShrin' npm ERR! A complete log of this run can be found in: ... 打开终端 命令: 第......

大_侠
38分钟前
0
0
Android中的设计模式之责任链模式

参考 《设计模式:可复用面向对象软件的基础 》5.1 Chain of responsibility 职责链 对象行为型模式 《Android源码设计模式解析与实战》第9章 使编程更有灵活性--责任链模式 意图 使多个对象...

newtrek
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部