iOS UICollectionView、UICollectionViewCell和Header、Footer
博客专区 > JoshSone 的博客 > 博客详情
iOS UICollectionView、UICollectionViewCell和Header、Footer
JoshSone 发表于1年前
iOS UICollectionView、UICollectionViewCell和Header、Footer
  • 发表于 1年前
  • 阅读 340
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: UICollectionView、UICollectionViewCell纯代码初始化、Xib初始化、StoryBoard初始化、Header、Footer的Xib初始化、StoryBoard初始化

准备工作:创建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);

 

共有 人打赏支持
粉丝 5
博文 62
码字总数 32794
×
JoshSone
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: