如何创建UICollectionView
集合视图的布局UICollectionViewFlowLayout
自定义cell
布局协议UICollectionViewDelegateFlowLayout
UICollectionView与UITableView的实现类似，都需要设置delegate和dataSource
在collectionView中，cell的布局比tableView要复杂，需要使用一个类来描述集合视图的布局---UICollectionViewLayout->UICollectionViewFlowLayout
创建步骤
1.使用系统布局UICollectionViewFlowLayout
2.创建UICollectionView
3.设置代理，设置数据源
4.设置自定义Cell
数据源
我们需要给collectionView指定一个数据源，它负责给对collectionView提供数据与显示
#import "JYFViewController.h"
#import "Model.h"
#import "MyCell.h"
#import "MyHeader.h"
#import "MyFooter.h"
#import "UIImageView+WebCache.h"
@interface JYFViewController ()<</span>UICollectionViewDataSource,UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
@property (nonatomic, retain) NSMutableArray *allDataArray;
@end
@implementation JYFViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 1.获取文件路径
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"Data"ofType:@"json"];
// 2.读取文件数据
NSData *data = [NSData dataWithContentsOfFile:filePath];
// 3.解析数据
NSArray *array = [NSJSONSerialization JSONObjectWithData:dataoptions:NSJSONReadingAllowFragments error:nil];
// 4.遍历放入大数组中
self.allDataArray = [NSMutableArray array];
for (NSDictionary *dict in array) {
Model *model = [Model new];
[model setValuesForKeysWithDictionary:dict];
[_allDataArray addObject:model];
[model release];
NSLog(@"%@", _allDataArray);
}
// 1.创建UICollectionViewFlowLayout
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayoutalloc] init];
// 1.1设置每个Item的大小
flowLayout.itemSize = CGSizeMake(90, 210);
// 1.2 设置每列最小间距
flowLayout.minimumInteritemSpacing = 10;
// 1.3设置每行最小间距
flowLayout.minimumLineSpacing = 10;
// 1.4设置滚动方向
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 1.5设置header区域大小
flowLayout.headerReferenceSize = CGSizeMake(self.view.bounds.size.width,50);
// 1.6设置footer区域大小
flowLayout.footerReferenceSize = CGSizeMake(self.view.bounds.size.width,50);
// 1.7 设置item内边距大小
flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
// 2.创建UICollectionView
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
// 3.设置数据源代理、collection代理
collectionView.dataSource = self;
collectionView.delegate = self;
[self.view addSubview:collectionView];
[collectionView release];
[flowLayout release];
collectionView.backgroundColor = [UIColor colorWithRed:0.895 green:1.000blue:0.656 alpha:1.000];
// 4.注册cell的类型和重用标示符
[collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@"cell"];
// 5.注册footer和header类型的重用标识符
[collectionView registerClass:[MyHeader class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
[collectionView registerClass:[MyFooter class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter
withReuseIdentifier:@"footerView"];
}
#pragma mark - UICollectionViewDataSource Methods
#pragma mark 设置有多少个section
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView
{
return 5;
}
#pragma mark 设置某个分组有多少行
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 13;
}
#pragma mark 设置某个Item显示什么内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 1.去重用队列中查找
MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
// 2.使用
// CGFloat red = arc4random()% 256 / 255.0;
// CGFloat green = arc4random() % 256 / 255.0;
// CGFloat blue = arc4random() % 256 / 255.0;
// cell.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
cell.label.text = [NSString stringWithFormat:@"s = %ld r = %ld", indexPath.section, indexPath.row];
// 3.获取将要显示的模型
Model *model = _allDataArray[indexPath.row];
// 4.使用第三方获取图片并自动缓存
NSURL *imageUrl = [NSURL URLWithString:model.thumbURL];
[cell.imageView sd_setImageWithURL:imageUrl placeholderImage:[UIImageimageNamed:@"[email protected]"]];
return cell;
}
#pragma mark 处理点击事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"我被点击了");
}
#pragma mark - UICollectionViewDelegateFlowLayout Method
#pragma mark 设置item的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(90, 120);
}
#pragma mark 设置footer和header
- (UICollectionReusableView *)collectionView:(UICollectionView*)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
if (kind == UICollectionElementKindSectionHeader) {
// 去重用队列取可用的header
MyHeader *reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerView"forIndexPath:indexPath];
// 使用
reusableView.headerImage.image = [UIImage imageNamed:@"屏幕快照 2014-0 9.30.50 9-11 上午.png"];
// 返回
return reusableView;
}else{
// 去重用队列取可用的footer
MyFooter *reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footerView"forIndexPath:indexPath];
// 使用
reusableView.backgroundColor = [UIColor redColor];
// 返回
return reusableView;
}
}
#pragma mark 设置header和footer高度
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
return CGSizeMake(self.view.bounds.size.width, 70);
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
return CGSizeMake(self.view.bounds.size.width, 70);
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)dealloc
{
[_allDataArray release];
[super dealloc];
}
@end
总结：
集合视图UICollectionView和表示图UITableView很相似，可根据layout属性设置，显示单元格集合内容
UICollectionViewDataSource类作为集合视图的数据源，向集合视图提供数据。集合视图依赖于委托（Delegate）中定义的方法对用户进行响应