UICollectionView的基本使用

Posted 2021-03-25 luoluosha

UICollectionView在目前的ios开发中，使用非常广泛。它继承自UIScrollView，可以根据需要自定义各种各样复杂的布局。

使用

• 遵循两个协议
  数据源协议UICollectionViewDataSource
  代理方法协议UICollectionViewDelegate

• 注册cell

1 [collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cellID"];

 

• 布局参数对象UICollectionViewFlowLayout
  这也是UICollectionView的精髓所在，正是通过它，我们才实现了UICollectionView各式各样的布局。

系统提供了两个UICollectionView的布局类：
1.UICollectionViewLayout
是一个抽象类，我们在自定义布局的时候可以继承此类，并在此基础上设置布局信息。
2.UICollectionViewFlowLayout
继承于UICollectionViewLayout，是系统写好的布局类，该类为我们提供了一个简单的布局样式。假如我们只需要一个特别简单的网格布局或者流水布局，可以直接使用它。

创建

不能用init的方式，因为必须提供一个不为空的layout布局参数，给它布局。

1、创建流水布局layout

在其中设定相关属性，如Item的大小等

 1 UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
 2 
 3     // 设置item的行间距和列间距
 4     layout.minimumInteritemSpacing = kLineSpacing;
 5     layout.minimumLineSpacing = kLineSpacing;
 6 
 7     // 设置item的大小
 8     CGFloat itemW = kScreenWidth / 2.5 ;
 9     layout.itemSize = CGSizeMake(itemW, itemW);
10 
11     // 设置每个分区的 上左下右 的内边距
12     layout.sectionInset = UIEdgeInsetsMake(5, 5 ,5, 5);
13     
14     // 设置区头和区尾的大小
15     layout.headerReferenceSize = CGSizeMake(kScreenWidth, 65);
16     layout.footerReferenceSize = CGSizeMake(kScreenWidth, 65);
17 
18     // 设置分区的头视图和尾视图 是否始终固定在屏幕上边和下边
19     layout.sectionFootersPinToVisibleBounds = YES;
20 
21     // 设置滚动条方向
22     layout.scrollDirection = UICollectionViewScrollDirectionVertical;  

 

2、利用layout 创建collecView

 1  UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
 2     collectionView.backgroundColor = [UIColor witheColor];
 3     collectionView.showsVerticalScrollIndicator = NO;   //是否显示滚动条
 4     collectionView.scrollEnabled = YES;  //滚动使能
 5 
 6     //3、添加到控制器的view
 7     [self.view addSubview:collectionView];
 8     _mainCollectionView = collectionView;
 9 
10     //4、布局
11     [_mainCollectionView mas_makeConstraints:^(MASConstraintMaker *make) {
12         make.top.left.bottom.right.equalTo(self.view);
13     }];

 

5、注册cell

一般是自定义的cell。需要注册不同的cell，可由不同的cell的ID决定。

1  [self.mainCollectionView registerClass:[PDcollectionVertivalCell class] 
2 forCellWithReuseIdentifier:@"MAINCOLLECTIONVIEWID"];

6、注册头部视图

1 [self.mainCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader 
2 withReuseIdentifier:@"MAINCOLLECTIONVIEWHEADER"];

7、遵守协议，设置代理

1 <UICollectionViewDelegate,UICollectionViewDataSource>
2 
3     self.mainCollectionView.delegate = self;
4     self.mainCollectionView.dataSource = self;

 

数据源方法

 1 #pragma mark -collectionview 数据源方法
 2 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
 3 
 4     return 6;   //返回section数
 5 }
 6 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
 7 
 8     return self.normalGoodLists.count;  //每个section的Item数
 9 }
10 
11 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
12 {
13     创建item / 从缓存池中拿 Item
14     PDcollectionVertivalCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MAINCOLLECTIONVIEWID" forIndexPath:indexPath];
15     // 外界在此给Item添加模型数据
16     if(self.normalGoodLists.count > 0){
17         PDshopItem *item = self.normalGoodLists[indexPath.item];
18         cell.cheapShopItem = item;
19     }
20     return cell;
21     
22 }

 

创建头部视图

 1 #pragma mark - 头部视图
 2 -(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
 3     
 4     UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader 
 5 withReuseIdentifier:@"MAINCOLLECTIONVIEWHEADER" forIndexPath:indexPath];
 6     // ID必须与注册ID一样
 7    
 8     if(indexPath.section == 0){
 9         
10         [headView addSubview:self.cycleScrollView];  //任何自定义view
11         [self.cycleScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
12             make.top.left.bottom.right.equalTo(headView);
13         }];
14         return headView;
15     }
16 }
17 
18 #pragma mark - 头部视图的尺寸
19 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
20     
21     if(section ==0 ){
22         
23         return CGSizeMake(screenW, 0.4*screenW);
24     }
25     else if(section ==1 ){
26         
27         return CGSizeMake(screenW, 0.25253*screenW);
28     }
29 }

 

代理方法--点击事件

1 #pragma mark - 点击 某个Item时 调用
2 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
3     [collectionView deselectItemAtIndexPath:indexPath animated:YES];//取消选中
4     //do something ...
5 }    

 

UICollectionViewCell

UICollectionView的item，就是一个cell。

• cell的内容——自定义
  默认的cell是UICollectionViewCell对象，它没有任何子控件，所以必须自定义cell（继承自UICollectionViewCell），添加所需的子控件。

• cell的属性——由flowlayout决定，在创建流水布局参数时设定好。

自定义cell

继承自UICollectionViewCell，在.h文件中，添加数据模型属性，用于后续设置cell的内容

1 #import <UIKit/UIKit.h>
2 #import "PDshopItem.h"
3 
4 
5 @interface PDcollectionViewCell : UICollectionViewCell
6 
7 @property(nonatomic,strong)PDshopItem *shopItem;    //数据模型
8 
9 @end

 

在.m文件中

 1 @interface PDcollectionViewCell()
 2 
 3 @property(nonatomic,weak)UIImageView *shopImgView;
 4 @property(nonatomic,weak)UILabel *shopNameLabel;
 5 
 6 @end
 7 
 8 // 在init方法中添加子控件
 9 -(id)initWithFrame:(CGRect)frame{
10 
11     if([super initWithFrame:frame]){
12     //创建子控件、布局
13     ... ... 
14     }
15     return self;
16 }
17 
18 // 重写属性的set方法，给子控件设置数据
19 -(void)setShopItem:(PDshopItem *)shopItem{
20     _shopItem = shopItem;
21     
22     self.shopNameLabel.text = shopItem.goodName;
23     ... ...
24  }

 

 

摘自：https://www.jianshu.com/p/a5f71dc1ead3