第五篇 UICollectionView

创建项目

创建一个单视图项目，布局跟上一篇类似，不过tableview换成了CollectionView.添加完组件别忘了进行布局约束设置。然后就是把CollectionView的背景设置成白色吧（默认黑色）。

内容布局

项目创建好之后，你会发现有一个警告，说是需要给Cell设置一个重用标识，设置过程如下：



设置完成后，Command＋B，你会发现警告没了。

cell的默认大小是50X50，我们需要对其进行调整：



如果拖动调整不好操作，可以直接输入数值，这里调整为96X180.

有时候我们还会需要一个header或者footer,或者二者同时存在：



这里设置header高度为180，footer高度为100.

header和footer也需要设置重用标识，否则运行则会崩溃掉，设置方法与cell类似。

cell内部，添加一个ImageView和一个Label：

设置委托

不再演示。

关联对象

不再演示。

添加常用委托方法

@interface ViewController ()
{
NSArray* datas;
}
@property (weak, nonatomic) IBOutlet UICollectionView *CollectionView;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
datas = [NSArray arrayWithObjects:@"111",@"222",@"333",@"444",@"555",@"666",@"777",@"888",@"999",@"000",@"aaa",@"bbb",@"ccc",@"ddd",@"eee", nil];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

#pragma mark - CollectionViewDataSource
-(NSInteger)collectionView:(UICollectionView *)collectionView
numberOfItemsInSection:(NSInteger)section
{
return [datas count];
}

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell*cell;
UILabel* labName;

cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"mycell" forIndexPath:indexPath];
labName = (UILabel*)[cell viewWithTag:2];
labName.text = datas[indexPath.item];

return cell;
}
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
viewForSupplementaryElementOfKind:(NSString *)kind
atIndexPath:(NSIndexPath *)indexPath
{
UICollectionReusableView * resusableView;
if ([kind isEqualToString:UICollectionElementKindSectionHeader])
{
resusableView =  [collectionView dequeueReusableSupplementaryViewOfKind :kind   withReuseIdentifier:@"header"  forIndexPath:indexPath];
}
if ([kind isEqualToString:UICollectionElementKindSectionFooter])
{
resusableView =  [collectionView dequeueReusableSupplementaryViewOfKind :kind   withReuseIdentifier:@"footer"  forIndexPath:indexPath];
}
return resusableView;
}

#pragma mark - UICollectionViewDelegate
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
// 跳转，暂不实现
}
#pragma mark - UICollectionViewFlowLayout

- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout*)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(96, 180);
}

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(5,5,5,5);
}

-(CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
referenceSizeForHeaderInSection:(NSInteger)section
{
return CGSizeMake(self.CollectionView.bounds.size.width, 180);
}

@end

最终效果