一.簡(jiǎn)單介紹
UICollectionView 這個(gè)類是iOS6 新引進(jìn)的API，它的布局更加靈活，簡(jiǎn)單來(lái)說(shuō)就是多列的UITableView,那么UICollectionView的實(shí)現(xiàn)和UITableView的實(shí)現(xiàn)基本一樣酣倾，也是存在datasource和delegate的意荤，其中datasource為view提供數(shù)據(jù)源洛勉，告訴view要顯示些什么東西以及如何顯示它們邻邮，delegate提供一些樣式的小細(xì)節(jié)以及用戶交互的相應(yīng)，除此之外UICollectionView還有一個(gè)不得不提的就是UICollectionViewLayout。
二.UICollectionView里面常用的方法(列舉其中常用的征绎，具體的請(qǐng)查看相關(guān)的API)
/** 使用class或者xib注冊(cè)UICollectionViewCell*/
- (void)registerClass:(nullable Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier;
- (void)registerNib:(nullable UINib *)nib forCellWithReuseIdentifier:(NSString *)identifier;
/** 先會(huì)從緩存池中取,如果沒(méi)有會(huì)自動(dòng)為我們創(chuàng)建cell，而不像之前那樣還要我們自己去創(chuàng)建*/
- (__kindof UICollectionViewCell *)dequeueReusableCellWithReuseIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath;
/** 如果需要給每組的collectionview加上一個(gè)headerView或者footerView的話磨取，就要用到這個(gè)方法人柿，同樣也是先從緩存池中取，沒(méi)有自動(dòng)創(chuàng)建,elementKind是需要?jiǎng)?chuàng)建的是頭部還是底部?jī)煞N類型*/
- (__kindof UICollectionReusableView *)dequeueReusableSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath;
/** 總共多少組*/
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;
/** 每組中cell的個(gè)數(shù)*/
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
/** 每個(gè)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 ;
/** 選中某一個(gè)cell*/
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;
三.用代碼實(shí)現(xiàn)簡(jiǎn)單的collectionView
#pragma mark -- lazy load
- (UICollectionView *)collectionView {
if (_collectionView == nil) {
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
// 設(shè)置collectionView的滾動(dòng)方向忙厌，需要注意的是如果使用了collectionview的headerview或者footerview的話凫岖， 如果設(shè)置了水平滾動(dòng)方向的話，那么就只有寬度起作用了了
[layout setScrollDirection:UICollectionViewScrollDirectionVertical];
// layout.minimumInteritemSpacing = 10;// 垂直方向的間距
// layout.minimumLineSpacing = 10; // 水平方向的間距
_collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
_collectionView.backgroundColor = [UIColor whiteColor];
_collectionView.dataSource = self;
_collectionView.delegate = self;
}
return _collectionView;
}
#pragma mark -- life cycle
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationItem.title = @"UICollectionView Demo";
self.navigationController.navigationBar.barTintColor = [UIColor redColor];
[self.view addSubview:self.collectionView];
// 注冊(cè)collectionViewcell:WWCollectionViewCell是我自定義的cell的類型
[self.collectionView registerClass:[WWCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
// 注冊(cè)collectionView頭部的view逢净，需要注意的是這里的view需要繼承自UICollectionReusableView
[self.collectionView registerNib:[UINib nibWithNibName:@"WWCollectionReusableView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
// 注冊(cè)collectionview底部的view,需要注意的是這里的view需要繼承自UICollectionReusableView
[self.collectionView registerNib:[UINib nibWithNibName:@"WWCollectionFooterReusableView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
}
#pragma mark -- UICollectionViewDataSource
/** 每組cell的個(gè)數(shù)*/
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 15;
}
/** cell的內(nèi)容*/
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
WWCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor yellowColor];
cell.topImageView.image = [UIImage imageNamed:@"1"];
cell.bottomLabel.text = [NSString stringWithFormat:@"%zd.png",indexPath.row];
return cell;
}
/** 總共多少組*/
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 6;
}
/** 頭部/底部*/
- (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 = [NSString stringWithFormat:@"頭部 - %zd",indexPath.section];
return view;
}else {
// 底部
WWCollectionFooterReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind :kind withReuseIdentifier:@"footer" forIndexPath:indexPath];
view.footerLabel.text = [NSString stringWithFormat:@"底部 - %zd",indexPath.section];
return view;
}
}
#pragma mark -- UICollectionViewDelegateFlowLayout
/** 每個(gè)cell的尺寸*/
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(60, 60);
}
/** 頭部的尺寸*/
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
return CGSizeMake(self.view.bounds.size.width, 40);
}
/** 頂部的尺寸*/
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
return CGSizeMake(self.view.bounds.size.width, 40);
}
/** section的margin*/
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(5, 5, 5, 5);
}
#pragma mark -- UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"點(diǎn)擊了第 %zd組 第%zd個(gè)",indexPath.section, indexPath.row);
}
四.效果圖
?最基本的collectionView.png
