iOS--UICollection

关于UICollectionView的使用

与tableView的重要性一样，collectionView也是我们常用到的控件，在这里我只初步介绍collectionView的两种简单定制方法以及正确的注册、使用方法

一 、纯代码自定义CollectionCell

定制一个简单显示一条文字数据的cell

首先这是在Cell的h文件中，我只写一条属性

1.1、h文件中添加字段或模型属性

#import <UIKit/UIKit.h>
@interface textCell : UICollectionViewCell
//1.用来接收需要显示的数据
@property (nonatomic, copy) NSString * title;
@end

1.2、在m文件中来实现控件的构造排版

#import "textCell.h"
@implementation textCell { 
    UILabel * _titleLabel;
 }
//2.在这个方法中去实例化子视图，添加到contentview上
- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        _titleLabel = [[UILabel alloc]init];
        //控件是加到contentView
        [self.contentView addSubview:_titleLabel];   
    }
    return self;
}
//3.设置子视图的frame
- (void)layoutSubviews {
    CGFloat titleX = 0;
    CGFloat titleY = 0;
    CGFloat titleW = self.frame.size.width;
    CGFloat titleH = self.frame.size.height;
    _titleLabel.frame = CGRectMake(titleX, titleY, titleW, titleH);   
}
//4.显示数据 (如果是模型也是一样的书写方式给属性控件赋值)
- (void)setTitle:(NSString *)title {
    _title = title;;
    _titleLabel.text = title;
}
@end

1.3、在controller中注册Cell

与tableView不同的是：collectionViewCell必须有一种布局方式来显示，也就是在创建collectionView的时候需要传入的layout方式，所以遵循协议包括有: UICollectionViewDataSource,
UICollectionViewDelegate,
UICollectionViewDelegateFlowLayout

- (void)viewDidLoad {
    [super viewDidLoad];
    [self createCollectionView];
}

/**创建视图*/
- (void)createCollectionView {
    //1.创建一个布局类对象（专门用来负责collectionView的布局）
    //UICollectionViewLayout这个类是专门用来负责对collectionView布局的类
    //UICollectionViewFlowLayout继承自UICollectionViewLayout，让collectionView以瀑布流的形式来布局
    UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc]init];
     //设置每个item的size（宽高）
    //通过这个属性来设置item的size、以及footerView等与布局有关的属性 collectionView中的每个item的size都是一样的
    flowLayout.itemSize = CGSizeMake(100, 150);
    //设置滚动方向
//UICollectionViewScrollDirectionVertical, 垂直方向（默认）
//UICollectionViewScrollDirectionHorizontal 水平方向
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
    //2.创建collectionView对象
    _collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
    //3.设置代理
    //datasource和delegate两种
    _collectionView.dataSource = self;
    //同时设置了UICollectionViewDelegate和UICollectionViewDelegateFlowLayout的代理
    _collectionView.delegate = self;
    //4.显示到界面上
    [self.view addSubview:_collectionView];
    //5.注册cell（告诉collectionView在自动创建cell的时候，cell的类型和复用ID）
    //参数1：告诉collectionView创建什么类型的cell
    //参数2：告诉collectionView创建的cell的复用ID
   [_collectionView registerClass:[textCell class] forCellWithReuseIdentifier:@"cellID"];
}

在协议方法中返回复用的Cell

//用来创建cell的
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    //1.去复用队列中，带着复用ID去找可以复用的cell
    TJDCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellID" forIndexPath:indexPath];
    //如果在复用队列中没有找到可以复用的cell，不需要程序员自己去创建一个新的cell。collectionView会自动帮你创建。前提：要在collectionView中注册cell，告诉collectionView你需要它帮你创建的cell的类型和cell的复用ID。
    //2.刷新数据
    //使用collectionView一般需要自定制cell的】
    cell.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255.0f green:arc4random() % 256 / 255.0f blue:arc4random() % 256 / 255.0f alpha:1];
    cell.title = [NSString stringWithFormat:@"第%ld组，第%ld个",indexPath.section,indexPath.item];
    return cell;
}

二、xib定制的CollectionCell

定制显示一张图片的Cell
与手写代码类似

2.1、在xib中拖入一个imageView

__如下图

2.2、在cell的h文件中

#import <UIKit/UIKit.h>
@interface CustomCollectionViewCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *iconImage;
@end

2.3、在cell的m文件中

和代码定制的一样

2.4、在controller中

   //flowLayout 是一个设置cell的属性  对于UICollectionView来说 item就是cell
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //自定制cell的图片 要和itemSize大小一样
    flowLayout.itemSize = CGSizeMake(50, 50);
    //设置滚动方法 scrollDirection
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    //竖向
//    UICollectionViewScrollDirectionVertical,
    //横向
//    UICollectionViewScrollDirectionHorizontal
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:flowLayout];
    collectionView.backgroundColor = [UIColor whiteColor];
    //设置复用属性
    //第一个参数 cell的类型
    //第二个参数 cell的复用标示
    [collectionView registerNib:[UINib nibWithNibName:@"CustomCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"cell"];
    //对比 手写代码复用写这个 registerClass
    //[collectionView registerClass:[Custom1CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    [self.view addSubview:collectionView];
}

2.5、在collectionView的datasource协议中实现

//创建cell 刷新cell
-(UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //去复用队列里找 有没有空闲的cell  如果没有，这个方法会自动创建一个cell出来
    Custom1CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.imageView.image = [UIImage imageNamed:[_dataArray[indexPath.row] objectForKey:@"icon"]];
//    cell.iconImage.image = [UIImage imageNamed:@"1.jpg"];
    return cell;
}