iOS UICollectionView、UICollectionViewCell和Header、Footer
准备工作:创建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 *aaa@qq.com"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 *aaa@qq.com"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);
转载于:https://my.oschina.net/sgcllr/blog/785390
推荐阅读
-
iOS UICollectionView、UICollectionViewCell和Header、Footer
-
iOS 给TableView添加Footer或Header
-
Android ListView中动态显示和隐藏Header&Footer的方法
-
Android ListView中动态显示和隐藏Header&Footer的方法
-
如何为RecyclerView添加Header和Footer
-
使用RecyclerView添加Header和Footer的方法
-
使用RecyclerView添加Header和Footer的方法
-
Android为RecyclerView设置header和footer(RecyclerView.Adapter和BaseQuickAdapter两种方式)
-
在 WordPress 的页眉(header)和页脚(footer)添加代码方法
-
怎样在UICollectionView中添加Header和footer