文档章节

iOS UICollectionView、UICollectionViewCell和Header、Footer

JoshSone
 JoshSone
发布于 2016/11/10 08:42
字数 814
阅读 387
收藏 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
08/17
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
周记3——解决fixed属性在ios软键盘弹出后失效的bug

  这周在做空间(“类似”qq空间)项目。首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部。此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了。后来发现,...

辛月
08/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
14分钟前
0
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
3
0
命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
今天
1
0
OSChina 周四乱弹 —— 上帝对我单身年限的惩罚越来越长了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享张卫健的单曲《身体健康》 《身体健康》- 张卫健 手机党少年们想听歌,请使劲儿戳(这里) 昨天是重阳节咯, 可惜小小编辑总是晚...

小小编辑
今天
12
1
django rest framework 外键序列化方法与问题总结

django rest framework 外键序列化方法与问题总结 当借口中需要出现一对多关系的时候,我们可以用rest_framwork的序列化功能来处理,代码如下. # models.pyfrom django.db import modelscl...

_Change_
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部