UICollectionview的使用詳解

  1. 三個代理<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
    前兩個的用法和tableView的很像,第三個是布局的協(xié)議。(注意:頭視圖尾視圖都是由代理方法獲得,而且需要寫注冊,缺少了也不行。) 注冊以后,就不需要再去管理復(fù)用的問題了。這點就很簡單。這個如果用好的話,會非常的簡單。
  2. item(即cell)的布局原理(類似tableView)
  3. header/footer View的布局原理
    都是繼承于UICollectionReusableView,并且必須要從dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:這個代理方法中獲取,而且根據(jù)不同的kind作為headerView或者footerView,切記:collectionView中頭部視圖和尾部視圖也需要注冊

下面直接上代碼,看注釋即可:

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>{

}
@property (strong, nonatomic)UICollectionView *collectionView;

@end

ViewController.m

#import "ViewController.h"
#import "NewSceneCollectionHeaderView.h"
#import "NewSceneCollectionFooterView.h"
#import "NewSceneCollectionViewCell.h"

@interface ViewController ()

@end

//cell、header、footerView 標(biāo)識
static NSString *cellIdentifier = @"NewSceneCollectionViewCell";
static NSString *headerIdentifier = @"NewSceneCollectionHeaderView";
static NSString *footerIdentifier = @"NewSceneCollectionFooterView";

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //創(chuàng)建布局對象
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //flowlaout的屬性,確定是水平滾動,還是垂直滾動
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    
    //接下來就在創(chuàng)建collectionView的時候初始化,就很方便了(能直接帶上layout)
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 200, 320, 280) collectionViewLayout:flowLayout];
    self.collectionView.backgroundColor = [UIColor grayColor]; 
    
    //指定數(shù)據(jù)源和代理
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    
    //添加到主頁面上去 
    [self.view addSubview:self.collectionView];
    
    //collectionCell的注冊
    [self.collectionView registerClass:[NewSceneCollectionViewCell class] forCellWithReuseIdentifier:cellIdentifier];
    
    //collection頭視圖的注冊。  注意:奇葩的地方來了,頭視圖和尾部視圖也得注冊
    [self.collectionView registerClass:[NewSceneCollectionHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
    [self.collectionView registerClass:[NewSceneCollectionFooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:footerIdentifier];
    
    /*另一種方式
    //從Xib上注冊
    UINib *nib = nil;
    nib = [UINib nibWithNibName:cellIdentifier bundle:nil];
    [self.collectionView registerNib:nib
                 forCellWithReuseIdentifier:cellIdentifier];
    //注冊headerview和footerview
    nib = [UINib nibWithNibName:headerIdentifier bundle:nil];
    [self.collectionView registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
    nib = [UINib nibWithNibName:footerIdentifier bundle:nil];
    [self.collectionView registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerIdentifier];
    */
    [self.view addSubview:self.collectionView];
}

/********************************************************
 *UICollectionViewDataSource/Delegate/DelegateFlowLayout
 ********************************************************/
#pragma mark  UICollectionViewDataSource/Delegate

//返回多少組(section),此方法不寫默認(rèn)是1組(跟tableview類似)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

#pragma mark required
//每組返回多少個Item,這個Item類似tableview中的cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}

//返回cell,這里構(gòu)建Item(即cell)
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //這里是自定義的cell
    NewSceneCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

#pragma mark  optional
//自定義header/footerView
// The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
//這里返回的view必須要從dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:這個方法中獲取,而且根據(jù)不同的kind作為headerView或者footerView,切記:collectionView中頭部視圖和尾部視圖也需要注冊
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableView = nil;
    if (UICollectionElementKindSectionHeader == kind) {
        //這里是自定義的頭視圖
        NewSceneCollectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerIdentifier forIndexPath:indexPath];
        headerView.backgroundColor = [UIColor whiteColor]; 
        return headerView;
    }
    if (UICollectionElementKindSectionFooter == kind {
        //這里是自定義的尾視圖               
        NewSceneCollectionFooterView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:footerIdentifier forIndexPath:indexPath];
        footerView.backgroundColor = [UIColor whiteColor]; 
        return footerView;
    }
    return reusableView;
}

#pragma mark --UICollectionViewDelegateFlowLayout

//布局確定每個Item 的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{    
    return CGSizeMake(100, 100);
}

//布局確定每個section內(nèi)的Item距離section四周的間距 UIEdgeInsets
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(10, 10, 10, 10);
}

//返回每個section內(nèi)上下兩個Item之間的間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 10; 
}
//返回每個section內(nèi)左右兩個Item之間的間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 10;
}

//返回headerView的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
    CGFloat width = CGRectGetWidth(collectionView.bounds);
    CGFloat height = width + 86;
    return CGSizeMake(width, height);
}

//返回footerView的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
    CGFloat width = CGRectGetWidth(collectionView.bounds);
    CGFloat height = 144;
    return CGSizeMake(width, height);
}

#pragma mark --UICollectionViewDelegate

//UICollectionView被選中時調(diào)用的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NewSceneCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.backgroundColor = [UIColor greenColor];
    NSLog(@"item======%ld",(long)indexPath.item);
    NSLog(@"row=======%ld",(long)indexPath.row);
    NSLog(@"section===%ld",(long)indexPath.section);
}

//返回這個UICollectionView是否可以被選擇
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容