UICollectionView 具体解说学习

UICollectionView 和UITableView非常像,是APPLE公司在iOS 6后推出的用于处理图片这类UITableView 布局困难的控件,和UITableView 一样,它也有自己的Datasource和delegate。以下具体说下像这种方式的效果.

首先来看看UICollectionView 的DataSource。

@protocol UICollectionViewDataSource <NSObject>
@required

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

@optional

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

// The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

@end

能够看到和UITableView 一样,它有两个必须实现的方法:

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section//有多少个item

-dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;//每一个长什么样,它要使用dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:来生成

其他的两个是分别有几部分cell，和UITableView中的numberOfSection一样.默认是1个，viewForSupplementaryElementOfKind这个则是用来做出表头和表尾的。

UICollectionViewDelegate 它的代理方法全是可选的,常常且主要用到的就是:

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;

这是表明选中后要做什么.

以下来实现一下:

首先在自定义的头文件里加入一个UIColletionView的属性(比直接用实例变量好，具体请看Effective objective-c的学习笔记1)配置各种属性,然后加到self.view上。

@property (nonatomic, strong) ZJCollectionViewFlowOut *collectionViewFlowLayout;

    self.collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:self.collectionViewFlowLayout];
    _collectionView.backgroundColor = [UIColor clearColor];
    _collectionView.dataSource = self;
    _collectionView.delegate = self;
    [self.view addSubview:_collectionView];

再设置viewController 遵守delegate和dataSource；

@interface ZJCollectionViewController ()<UICollectionViewDataSource, UICollectionViewDelegate>
@end

这样再xcode 上新的一行输入- collection就会出现非常多collectionView的提示了.

实现:collectionView:cellForItemAtIndexPath:

由于这种方法要用到前面说的那个注冊的cell所以先建一个UICollectionViewCell，顺便搞定那个FlowLayout.

Cell的内容当然能够自定义的了.

在viewDidLoad中创建CollectionView的以下加上:

    [_collectionView registerClass:[ZJCollectionViewCell class] forCellWithReuseIdentifier:kCellReuseIdentifier];

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    ZJCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kCellReuseIdentifier forIndexPath:indexPath];
    NSString *image = @"201502192144014806.jpg";
    cell.userImageView.image = [UIImage imageNamed:image];
    return cell;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.pictureArray.count;
}

在viewDidLoad中collectionView创建之前要创建那个布局的

collectionViewFlowLayout 对象.

    self.collectionViewFlowLayout = [[ZJCollectionViewFlowOut alloc]init];

当中在collectionViewFlowLayout里面是这种:

- (id)init
{
    if (self = [super init]) {
        self.minimumInteritemSpacing = 1.0;//item 之间的行的距离
        self.minimumLineSpacing = 0.0;//item 之间竖的距离
        self.itemSize = (CGSize){[UIScreen mainScreen].bounds.size.width/3,[UIScreen mainScreen].bounds.size.width/3};
        //        self.sectionInset = UIEdgeInsetsMake(4, 4, 4, 4); 这个是设置一个section的距离上下上左下右间距。

}
    return self;
}

得出的结果例如以下图:



这是一个简单的UICollectionView的展示，时间不多。有空再具体点