作者唯一QQ:228544117;
一.簡單介紹
UICollectionView 這個類是iOS6
新引進(jìn)的API，它的布局更加靈活，簡單來說就是多列的UITableView,那么UICollectionView的實現(xiàn)和UITableView的實現(xiàn)基本一樣，也是存在datasource和delegate的，其中datasource為view提供數(shù)據(jù)源，告訴view要顯示些什么東西以及如何顯示它們，delegate提供一些樣式的小細(xì)節(jié)以及用戶交互的相應(yīng)，除此之外UICollectionView還有一個不得不提的就是UICollectionViewLayout。
二.UICollectionView里面常用的方法(列舉其中常用的，具體的請查看相關(guān)的API)
/** 使用class或者xib注冊UICollectionViewCell*/
- (void)registerClass:(nullableClass)cellClass forCellWithReuseIdentifier:(NSString*)identifier;- (void)registerNib:(nullableUINib*)nib forCellWithReuseIdentifier:(NSString*)identifier;
/** 先會從緩存池中取,如果沒有會自動為我們創(chuàng)建cell，而不像之前那樣還要我們自己去創(chuàng)建*/
- (__kindofUICollectionViewCell*)dequeueReusableCellWithReuseIdentifier:(NSString*)identifier forIndexPath:(NSIndexPath*)indexPath;
/** 如果需要給每組的collectionview加上一個headerView或者footerView的話，就要用到這個方法，同樣也是先從緩存池中取，沒有自動創(chuàng)建,elementKind是需要創(chuàng)建的是頭部還是底部兩種類型*/-
(__kindofUICollectionReusableView*)dequeueReusableSupplementaryViewOfKind:(NSString*)elementKind withReuseIdentifier:(NSString*)identifier forIndexPath:(NSIndexPath*)indexPath;
/** 總共多少組*/- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView;
/** 每組中cell的個數(shù)*/
- (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;
三.用代碼實現(xiàn)簡單的collectionView
#pragma mark -- lazy load
- (UICollectionView*)collectionView {if(_collectionView ==nil) {
UICollectionViewFlowLayout*layout = [[UICollectionViewFlowLayoutalloc] init];
// 設(shè)置collectionView的滾動方向，需要注意的是如果使用了collectionview的headerview或者footerview的話， 如果設(shè)置了水平滾動方向的話，那么就只有寬度起作用了了[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的個數(shù)*/
- (NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section {return15;}
/** cell的內(nèi)容*/
- (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沒什么太大的差距?
//歡迎一起交流探討。
