作者唯一QQ:228544117;

一.簡單介紹

UICollectionView 這個類是iOS6

新引進的API，它的布局更加靈活，簡單來說就是多列的UITableView,那么UICollectionView的實現和UITableView的實現基本一樣，也是存在datasource和delegate的，其中datasource為view提供數據源，告訴view要顯示些什么東西以及如何顯示它們，delegate提供一些樣式的小細節以及用戶交互的相應，除此之外UICollectionView還有一個不得不提的就是UICollectionViewLayout。

二.UICollectionView里面常用的方法(列舉其中常用的，具體的請查看相關的API)

/** 使用class或者xib注冊UICollectionViewCell*/

- (void)registerClass:(nullableClass)cellClass forCellWithReuseIdentifier:(NSString*)identifier;- (void)registerNib:(nullableUINib*)nib forCellWithReuseIdentifier:(NSString*)identifier;

/** 先會從緩存池中取,如果沒有會自動為我們創建cell，而不像之前那樣還要我們自己去創建*/

- (__kindofUICollectionViewCell*)dequeueReusableCellWithReuseIdentifier:(NSString*)identifier forIndexPath:(NSIndexPath*)indexPath;

/** 如果需要給每組的collectionview加上一個headerView或者footerView的話，就要用到這個方法，同樣也是先從緩存池中取，沒有自動創建,elementKind是需要創建的是頭部還是底部兩種類型*/-

(__kindofUICollectionReusableView*)dequeueReusableSupplementaryViewOfKind:(NSString*)elementKind withReuseIdentifier:(NSString*)identifier forIndexPath:(NSIndexPath*)indexPath;

/** 總共多少組*/- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView;

/** 每組中cell的個數*/

- (NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section;

/** 每個cell的尺寸*/

- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*)indexPath;

/** 頭部的尺寸*/

-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;

/** 頂部的尺寸*/

-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

/** section的margin*/

- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section ;

/** 選中某一個cell*/

- (void)collectionView:(UICollectionView*)collectionView didSelectItemAtIndexPath:(NSIndexPath*)indexPath;

三.用代碼實現簡單的collectionView

#pragma mark -- lazy load

- (UICollectionView*)collectionView {if(_collectionView ==nil) {

UICollectionViewFlowLayout*layout = [[UICollectionViewFlowLayoutalloc] init];

// 設置collectionView的滾動方向，需要注意的是如果使用了collectionview的headerview或者footerview的話， 如果設置了水平滾動方向的話，那么就只有寬度起作用了了[layout setScrollDirection:UICollectionViewScrollDirectionVertical];

// layout.minimumInteritemSpacing = 10;

// 垂直方向的間距// layout.minimumLineSpacing = 10;

// 水平方向的間距_collectionView = [[UICollectionViewalloc] initWithFrame:self.view.bounds collectionViewLayout:layout];? ? ? ? _collectionView.backgroundColor = [UIColorwhiteColor];? ? ?

? _collectionView.dataSource =self;? ? ? ?

_collectionView.delegate =self;? ?

}

return_collectionView;}

#pragma mark -- life cycle

- (void)viewDidLoad {

? [superviewDidLoad];

self.navigationItem.title =@"UICollectionView Demo";

self.navigationController.navigationBar.barTintColor = [UIColorredColor];? ?

[self.view addSubview:self.collectionView];

// 注冊collectionViewcell:WWCollectionViewCell是我自定義的cell的類型[self.collectionView registerClass:[WWCollectionViewCellclass] forCellWithReuseIdentifier:@"cell"];

// 注冊collectionView頭部的view，需要注意的是這里的view需要繼承自UICollectionReusableView[self.collectionView registerNib:[UINibnibWithNibName:@"WWCollectionReusableView"bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"header"];

// 注冊collectionview底部的view,需要注意的是這里的view需要繼承自

UICollectionReusableView[self.collectionView registerNib:[UINibnibWithNibName:@"WWCollectionFooterReusableView"bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionFooterwithReuseIdentifier:@"footer"];}#pragma mark -- UICollectionViewDataSource

/** 每組cell的個數*/

- (NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section {return15;}

/** cell的內容*/

- (UICollectionViewCell*)collectionView:(UICollectionView*)collectionView cellForItemAtIndexPath:(NSIndexPath*)indexPath {

WWCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell"forIndexPath:indexPath];? ? cell.backgroundColor = [UIColoryellowColor];? ? cell.topImageView.image = [UIImageimageNamed:@"1"];??

cell.bottomLabel.text = [NSStringstringWithFormat:@"%zd.png",indexPath.row];}

/** 總共多少組*/

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView {return6;}

/** 頭部/底部*/

- (UICollectionReusableView*)collectionView:(UICollectionView*)collectionView viewForSupplementaryElementOfKind:(NSString*)kind atIndexPath:(NSIndexPath*)indexPath{if([kind isEqualToString:UICollectionElementKindSectionHeader]) {

// 頭部

WWCollectionReusableView *view =? [collectionView dequeueReusableSupplementaryViewOfKind :kind? withReuseIdentifier:@"header"forIndexPath:indexPath];? ? ? ? view.headerLabel.text = [NSStringstringWithFormat:@"頭部 - %zd",indexPath.section];returnview;? ?

}

else

{

// 底部

WWCollectionFooterReusableView *view =? [collectionView dequeueReusableSupplementaryViewOfKind :kind? withReuseIdentifier:@"footer"forIndexPath:indexPath];??

? ? view.footerLabel.text = [NSStringstringWithFormat:@"底部 - %zd",indexPath.section];

return view;

? }

}

#pragma mark -- UICollectionViewDelegateFlowLayout

/** 每個cell的尺寸*/

- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*)indexPath{returnCGSizeMake(60,60);}

/** 頭部的尺寸*/

-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{returnCGSizeMake(self.view.bounds.size.width,40);

}

/** 頂部的尺寸*/

-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{returnCGSizeMake(self.view.bounds.size.width,40);

}

/** section的margin*/

- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

returnUIEdgeInsetsMake(5,5,5,5);

}

#pragma mark -- UICollectionViewDelegate

- (void)collectionView:(UICollectionView*)collectionView didSelectItemAtIndexPath:(NSIndexPath*)indexPath {

NSLog(@"點擊了第 %zd組 第%zd個",indexPath.section, indexPath.row);

}

四.效果圖

//好了寫到這里 大致的邏輯就這? 跟UITableview沒什么太大的差距?

//歡迎一起交流探討。