iOS开发之高级视图—— UICollectionView

         UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API，用于展示集合视图，布局更加灵活，可实现多列布局，用法类似于UITableView 和UITableViewController 类。

         优点：

         1⃣️可以高度定制内容的展现

         2⃣️管理数据最佳的做法

         3⃣️即使是处理大量数据，也非常的高效

        UICollectionView的整体是由3个元素构成分别如下:        

               Cells(单元格)

              Supplementary Views（补充的view，相当于TableView的页眉和页脚）

              Decoration Views（装饰View，用于装饰整个UICollectionView的） 

        通常使用UICollectionView 需要实现如下3个协议
       UICollectionViewDataSource  主要用于向Collection View提供数据
       UICollectionViewDelegate

       UICollectionViewDelegateFlowLayout

         

     协议常用方法介绍

     UICollectionViewDataSource

        //定义显示的UICollectionViewCell的数量  

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

       //定义显示的Section的实例  

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

      //每个UICollectionView显示的内容  

      -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

      UICollectionViewDelegateFlowLayout   

           //定义每个UICollectionView 的大小  

           - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

          //定义每个UICollectionView 的 间距  

          -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

     UICollectionViewDelegate   

          //UICollectionView被选中时调用的方法  

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

        //返回这个UICollectionView是否可以被选择  

       -(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath; 

   

     本例子实现了一个简单的相册。

    ViewController.h

//
// ViewController.h
// UICollectionViewApp
//
// Created by Apple on 16/5/26.
// Copyright © 2016年 Apple. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>

@end


       ViewController.m

//
// ViewController.m
// UICollectionViewApp
//
// Created by Apple on 16/5/26.
// Copyright © 2016年 Apple. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

NSMutableArray* imgNames;

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

imgNames = [[NSMutableArray alloc] init];
for (int i=1;i<=8; i++) {
[imgNames addObject:[NSString stringWithFormat:@"%d.jpg",i]];

}

// UICollectionViewFlowLayout布局采用"流"的方式管理UICollectionView中的所有单元格，这些单元格要么横向排列，要么纵向排列，其效果就像一个网格
UICollectionViewFlowLayout* flowLayout = [[UICollectionViewFlowLayout alloc] init];

// UICollectionView可实现多列布局
UICollectionView* collectionView = [[UICollectionView alloc] initWithFrame:[[UIScreen mainScreen] bounds] collectionViewLayout:flowLayout];

// 设置UICollectionView的背景颜色
[collectionView setBackgroundColor:[UIColor whiteColor]];

// 注册UICollectionViewCell
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellID"];

// 设置dataSource
collectionView.dataSource= self;
// 设置delegate
collectionView.delegate = self;

// 将UICollectionView添加到视图控制器
[self.view addSubview:collectionView];

}

//返回数据总共有多少，就是需要创建多少个Cell单元
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

return [imgNames count];

}

//产生一个一个的Cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

// 获取一个UICollectionViewCell
UICollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellID" forIndexPath:indexPath];

// 创建一个UIImageView
UIImageView* imgView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:imgNames [indexPath.row]]];

// 设置cell的背景
cell.backgroundView = imgView;

return cell;

}

#pragma mark - UICollectionViewDelegateFlowLayout
//返回每个cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

return CGSizeMake(self.view.frame.size.width/2-20, self.view.frame.size.height/3-10);
}
//设置每一个Cell的垂直和水平间距
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
//top
//left
//bottom
//right
return UIEdgeInsetsMake(10, 5, 10, 5);
}

@end


    效果图如下：