UICollectionView的基本使用

UICollectionView在目前的iOS開發中，使用很是普遍。它繼承自UIScrollView，能夠根據須要自定義各類各樣複雜的佈局。

使用

• 遵循兩個協議
  數據源協議UICollectionViewDataSource
  代理方法協議UICollectionViewDelegate

• 註冊cell

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

 

• 佈局參數對象UICollectionViewFlowLayout
  這也是UICollectionView的精髓所在，正是經過它，咱們才實現了UICollectionView各式各樣的佈局。

系統提供了兩個UICollectionView的佈局類：
1.UICollectionViewLayout
是一個抽象類，咱們在自定義佈局的時候能夠繼承此類，並在此基礎上設置佈局信息。
2.UICollectionViewFlowLayout
繼承於UICollectionViewLayout，是系統寫好的佈局類，該類爲咱們提供了一個簡單的佈局樣式。假如咱們只須要一個特別簡單的網格佈局或者流水佈局，能夠直接使用它。

建立

不能用init的方式，由於必須提供一個不爲空的layout佈局參數，給它佈局。

一、建立流水佈局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;  

 

二、利用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     //三、添加到控制器的view
 7     [self.view addSubview:collectionView];
 8     _mainCollectionView = collectionView;
 9 
10     //四、佈局
11     [_mainCollectionView mas_makeConstraints:^(MASConstraintMaker *make) {
12         make.top.left.bottom.right.equalTo(self.view);
13     }];

 

五、註冊cell

通常是自定義的cell。須要註冊不一樣的cell，可由不一樣的cell的ID決定。

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

六、註冊頭部視圖

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

七、遵照協議，設置代理

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