ios collectview

作者唯一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沒什么太大的差距?

//歡迎一起交流探討。




最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容