前言部分:
UICollectionView是苹果官方提供的一种瀑布流效果.
layout只负责布局样式,而不负责创建view。(view的创建是通过代理方法 datasource来实现的)
Layout对象中定义了view的位置以及view大小size的信息
UICollectionView 的三要素介绍
(1)Cells:Layout就像一个管理者,而cell就是被管理者,每一个cell代
表了collectionview中的一个item,一个collectionview可以放在一
由Layout对象定义的。
(2)Supplementary Views:纯属显示的一个要素,不能被用户选择,而且
还是可有可无的。只要你想为Section或者整个collection view 添加
页眉和页脚,它就是了。
(3)Decoration Views:一个装饰品,不可被用户选择,类似于
Supplementary View,使用和位置都是由Layout定义的。可有可无。
需要用到的数据:
NSString *path = [[NSBundle mainBundle]pathForResource:@"Data" ofType:@"json"];
NSData *data = [NSData dataWithContentsOfFile:path];
NSArray *picArr = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
self.arr = [NSMutableArray array];
//通过遍历picArr把里面的图片地址当到self.arr里
for (NSDictionary *dic in picArr)
{
//NSLog(@"%@",dic[@"thumbURL"]);
[self.arr addObject:dic[@"thumbURL"]];
}
**下面关于UICollectionViewFlowLayout设置**
1.创建对象
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
2.不同于tableView,它是用Item显示,所以需要先设置每个Item有多大
flowLayout.itemSize = CGSizeMake(80, 160);
这个尺寸是自适应的
3.设置列间距
flowLayout.minimumInteritemSpacing =2;
4.设置行间距
flowLayout.minimumLineSpacing = 20;
5.设置滚动方向.默认是垂直方向
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
6.设置头或尾视图的尺寸
flowLayout.headerReferenceSize = CGSizeMake(0, 300);
**下面关于collectionView设置**
1.创建一个collectionView
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:flowLayout];
2.签订协议履行协议内容
(1).签协议
collectionView.dataSource = self;
collectionView.delegate = self;
(2).实现协议
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.arr.count;
}
**注意**
**我们要注意与众不同的是cell的创建方式与tableView 的方式不同,我们在viewDidLoad中用注册的方式建立cell,如下:
//第一个参数:需要制定注册对象的类型
//第二个参数:重用标志
[collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@"reuse"];
//这个是cell之间的颜色
collectionView.backgroundColor = [UIColor whiteColor];**
**使用注册的方式创建cell.必须使用自定义的cell.否则在里面会重复大量的创建视图,为了杜绝重复创建,必须使用自定义的cell**
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//在collectionCell创建的时候,提供了另外一种不同于tableView的cell创建的方式
//通过注册的方式,已经不用有重用标注 而且不用判断cell状况了 cell肯定不为空
MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];
//通过注册的方式创建的cell,在取值的时候就不需要在进行是否为空
cell.contentView.backgroundColor = [UIColor yellowColor];
cell.titleLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
//用sd让图片显示
[cell.myImageView sd_setImageWithURL:[NSURL URLWithString:self.arr[indexPath.row]]];
return cell;
}
在自定义的cell中的设置
**.h文件中**
@interface MyCell : UICollectionViewCell
@property (nonatomic, retain)UIImageView *myImageView;
@property (nonatomic, retain)UILabel *titleLabel;
@end
**.m文件中**
@implementation MyCell
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 100)];
[self.contentView addSubview:self.myImageView];
[_myImageView release];
self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, 80, 30)];
[self.contentView addSubview:self.titleLabel];
[_titleLabel release];
}
return self;
}
- (void)dealloc
{
[_myImageView release];
[_titleLabel release];
[super dealloc];
}
@end
定义头视图的代码
**1.在UICollectionViewFlowLayout创建对象下面给头视图预留空间**
flowLayout.itemSize = CGSizeMake(80, 160);
**还有给尾视图留空间的**
flowLayout.footerReferenceSize
**2.注册头视图**
第一个参数:需要注册的对象类型
第二个参数:指定的是头视图还是尾视图,常量字符串在系统的UICollectionVIewFlowLayout类的上面
第三个参数:重用标志
collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
3.自定义头视图cell的.h中
@property (nonatomic, retain)UILabel *myLabel;
4.自定义头视图cell的.m中
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
//创建子视图
self.myLabel = [[UILabel alloc] init];
self.myLabel.backgroundColor = [UIColor yellowColor];
[self addSubview:self.myLabel];
[_myLabel release];
}
return self;
}
- (void)layoutSubviews
{
[super layoutSubviews];
//在这设置子视图位置的大小
self.myLabel.frame = CGRectMake(10, 10, 100, 30);
}
5.头视图显示cell的代码部分
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
MyCollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
view.myLabel.text = @"111111";
return view;
}else
{
return nil;
}
}