欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

iOS UICollectionView、UICollectionViewCell和Header、Footer

程序员文章站 2024-03-24 10:03:40
...

准备工作:创建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文件

iOS UICollectionView、UICollectionViewCell和Header、Footer

生成好的文件:

iOS UICollectionView、UICollectionViewCell和Header、Footer

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

iOS UICollectionView、UICollectionViewCell和Header、Footer

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

iOS UICollectionView、UICollectionViewCell和Header、Footer

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

iOS UICollectionView、UICollectionViewCell和Header、Footer

2.SB中,如下操作

iOS UICollectionView、UICollectionViewCell和Header、Footer

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

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

最后生成效果如下:

iOS UICollectionView、UICollectionViewCell和Header、Footer

四.用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