在我們的工作過程中默垄，經(jīng)常用到的是UITableView.本文章首先從兩個(gè)方面介紹UICollectionView.首先介紹和UITableView的不同，并且一些基本的用法甚纲，然后會(huì)介紹UICollectionView的自定義layout口锭。
和UITableView不同，一些基本用法
初始化
UITableView直接init就可以了介杆，初始化UICollectionView必須制定layout
tableView初始化
UITableView *tableView = [[UITableView alloc] init];
collectionView初始化
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(100, 100);
layout.minimumLineSpacing = 20;
layout.minimumInteritemSpacing = 10;
layout.headerReferenceSize = CGSizeMake(self.view.frame.size.width, 100);
self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:layout];
** collectionView必須自定義collectionViewCell**
tableView和collectionView都有datasource和delegate.所以鹃操，如果獲取cell的方法中，沒有初始化cell春哨，會(huì)報(bào)錯(cuò)
錯(cuò)誤的做法：
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
// 如果僅僅這么寫荆隘，是有問題的。在tableview中是沒有問題的
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
if (!cell) {
cell = [[UICollectionViewCell alloc] init];
}
cell.backgroundColor = [UIColor redColor];
return cell;
}
正確的做法：
-(void)viewDidLoad {
[self.collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
if (!cell) {
cell = [[MyCollectionViewCell alloc] init];
}
cell.backgroundColor = [UIColor redColor];
return cell;
}
section header的不同
tableView就不過多的闡述赴背。collectionView增加了Supplementary視圖
首先注冊section header view
[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView"];
然后實(shí)現(xiàn)datasource
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView" forIndexPath:indexPath];
headerView.backgroundColor = [UIColor blueColor];
return headerView;
}
return nil;
}
同時(shí)設(shè)置header的size
// 在初始化layout的時(shí)候
layout.headerReferenceSize = CGSizeMake(self.view.frame.size.width, 100);
自定義CollectionViewLayout
大部分情況下xcode提供的默認(rèn)瀑布流布局UICollectionViewFlowLayout就可以使用椰拒。但是，我們還是介紹一下自定義layout說用到的一些方法
首先 UICollectionView增加了兩種視圖Supplementary(補(bǔ)充試圖)癞尚，我們section的header和footer是用它實(shí)現(xiàn)的耸三，datasource提供了相應(yīng)的delegate
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView" forIndexPath:indexPath];
headerView.backgroundColor = [UIColor blueColor];
return headerView;
}
return nil;
}
還增加了另外一種視圖，裝飾視圖(Decoration)視圖浇揩，這種視圖可以提供諸如背面圖版(backdrop)等視覺增強(qiáng)效果.
有一點(diǎn)要記住的是仪壮，decoration views完全是由layout管理的，與cell或supplementary views不一樣,它不在collection view data source的管轄范圍內(nèi)
下面會(huì)貼出一些代碼胳徽，自定義layout
首先定義繼承于UICollectionViewLayout的自定義layout
.h
@interface MyCollectionViewLayout : UICollectionViewLayout
@end
.m
@implementation MyCollectionViewLayout
- (void)prepareLayout {
// prepareLayout 準(zhǔn)備一些基本數(shù)據(jù)
[super prepareLayout];
[self registerClass:[MyCollectionReusableView class] forDecorationViewOfKind:@"CDV"];
}
- (CGSize)collectionViewContentSize {
return self.collectionView.frame.size;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
// 此方法是設(shè)置每一個(gè)item的一些顯示积锅，是通過layoutAttributesForElementsInRect調(diào)用的
UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath ];
attributes.size = CGSizeMake(215/3.0, 303/3.0);
attributes.center=CGPointMake(80*(indexPath.item+1), 62.5+125*indexPath.section);
return attributes;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath {
// 如果collectionview需要裝飾視圖爽彤，比如背景啊，書架等
UICollectionViewLayoutAttributes* att = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:elementKind withIndexPath:indexPath];
att.frame=CGRectMake(0, (125*indexPath.section)/2.0, 320, 125);
att.zIndex=-1;
return att;
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
// 這是最酷的方法缚陷，加載整個(gè)layout的時(shí)候处面，我認(rèn)為它是發(fā)動(dòng)機(jī)
NSMutableArray* attributes = [NSMutableArray array];
//把Decoration View的布局加入可見區(qū)域布局西篓。
for (int y=0; y<3; y++) {
NSIndexPath* indexPath = [NSIndexPath indexPathForItem:3 inSection:y];
[attributes addObject:[self layoutAttributesForDecorationViewOfKind:@"CDV"atIndexPath:indexPath]];
}
for (NSInteger i=0 ; i < 3; i++) {
for (NSInteger t=0; t<3; t++) {
NSIndexPath* indexPath = [NSIndexPath indexPathForItem:t inSection:i];
[attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
}
}
return attributes;
}
每個(gè)cell view、supplemental view和decoration view 都有layout屬性。想要知道layouts如何靈活海铆，只需看看 UICollectionViewLayoutAttributes
對象的特性就知道了：
frame
center
size
transform3D
alpha
zIndex
hidden
屬性由你可能想要的那種委托方法指定：
-layoutAttributesForItemAtIndexPath:
-layoutAttributesForSupplementaryViewOfKind:atIndexPath:
-layoutAttributesForDecorationViewOfKind:atIndexPath:
這是最酷的方法：
-layoutAttributesForElementsInRect:
比較好的文章
http://nshipster.cn/uicollectionview/
對Decoration視圖使用http://kyoworkios.blog.51cto.com/878347/1341549
