UICollectionView的基本使用

UICollectionView在目前的iOS開發中，使用非常廣泛。它繼承自UIScrollView，可以根據需要自定義各種各樣復雜的布局。

使用

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

• 注冊cell

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

 

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

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

創建

不能用init的方式，因為必須提供一個不為空的layout布局參數，給它布局。

1、創建流水布局layout

在其中設定相關屬性，如Item的大小等

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

    // 設置item的行間距和列間距
    layout.minimumInteritemSpacing = kLineSpacing;
    layout.minimumLineSpacing = kLineSpacing;

    // 設置item的大小
    CGFloat itemW = kScreenWidth / 2.5 ;
    layout.itemSize = CGSizeMake(itemW, itemW);

    // 設置每個分區的 上左下右 的內邊距
    layout.sectionInset = UIEdgeInsetsMake(5, 5 ,5, 5);
    
    // 設置區頭和區尾的大小
    layout.headerReferenceSize = CGSizeMake(kScreenWidth, 65);
    layout.footerReferenceSize = CGSizeMake(kScreenWidth, 65);

    // 設置分區的頭視圖和尾視圖 是否始終固定在屏幕上邊和下邊
    layout.sectionFootersPinToVisibleBounds = YES;

    // 設置滾動條方向
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;  

 

2、利用layout 創建collecView

 UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
    collectionView.backgroundColor = [UIColor witheColor];
    collectionView.showsVerticalScrollIndicator = NO;   //是否顯示滾動條
    collectionView.scrollEnabled = YES;  //滾動使能

    //3、添加到控制器的view
    [self.view addSubview:collectionView];
    _mainCollectionView = collectionView;

    //4、布局
    [_mainCollectionView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.bottom.right.equalTo(self.view);
    }];

 

5、注冊cell

一般是自定義的cell。需要注冊不同的cell，可由不同的cell的ID決定。

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

6、注冊頭部視圖

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

7、遵守協議，設置代理

<UICollectionViewDelegate,UICollectionViewDataSource>

    self.mainCollectionView.delegate = self;
    self.mainCollectionView.dataSource = self;

 

數據源方法

#pragma mark -collectionview 數據源方法
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

    return 6;   //返回section數
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    return self.normalGoodLists.count;  //每個section的Item數
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    創建item / 從緩存池中拿 Item
    PDcollectionVertivalCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MAINCOLLECTIONVIEWID" forIndexPath:indexPath];
    // 外界在此給Item添加模型數據
    if(self.normalGoodLists.count > 0){
        PDshopItem *item = self.normalGoodLists[indexPath.item];
        cell.cheapShopItem = item;
    }
    return cell;
    
}

 

創建頭部視圖

#pragma mark - 頭部視圖
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    
    UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader 
withReuseIdentifier:@"MAINCOLLECTIONVIEWHEADER" forIndexPath:indexPath];
    // ID必須與注冊ID一樣
   
    if(indexPath.section == 0){
        
        [headView addSubview:self.cycleScrollView];  //任何自定義view
        [self.cycleScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.left.bottom.right.equalTo(headView);
        }];
        return headView;
    }
}

#pragma mark - 頭部視圖的尺寸
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    
    if(section ==0 ){
        
        return CGSizeMake(screenW, 0.4*screenW);
    }
    else if(section ==1 ){
        
        return CGSizeMake(screenW, 0.25253*screenW);
    }
}

 

代理方法--點擊事件

#pragma mark - 點擊 某個Item時 調用
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    [collectionView deselectItemAtIndexPath:indexPath animated:YES];//取消選中
    //do something ...
}    

 

UICollectionViewCell

UICollectionView的item，就是一個cell。

• cell的內容——自定義
  默認的cell是UICollectionViewCell對象，它沒有任何子控件，所以必須自定義cell（繼承自UICollectionViewCell），添加所需的子控件。

• cell的屬性——由flowlayout決定，在創建流水布局參數時設定好。

自定義cell

繼承自UICollectionViewCell，在.h文件中，添加數據模型屬性，用於后續設置cell的內容

#import <UIKit/UIKit.h>
#import "PDshopItem.h"


@interface PDcollectionViewCell : UICollectionViewCell

@property(nonatomic,strong)PDshopItem *shopItem;    //數據模型

@end

 

在.m文件中

@interface PDcollectionViewCell()

@property(nonatomic,weak)UIImageView *shopImgView;
@property(nonatomic,weak)UILabel *shopNameLabel;

@end

// 在init方法中添加子控件
-(id)initWithFrame:(CGRect)frame{

    if([super initWithFrame:frame]){
    //創建子控件、布局
    ... ... 
    }
    return self;
}

// 重寫屬性的set方法，給子控件設置數據
-(void)setShopItem:(PDshopItem *)shopItem{
    _shopItem = shopItem;
    
    self.shopNameLabel.text = shopItem.goodName;
    ... ...
 }

 

 

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