ios的通过Xib构建UICollectionView的简单运用

众所周知，UICollectionView是ios6才最新引进来的API，用于展示集合视图，可实现多列布局；

经常听人说起 UICollectionView怎么好用，由于之前在赶项目也没有什么时间去学习这个，现在闲下来，学习了简单的使用，感觉功能还是蛮强大的，相对UIScrollView和UITableView它相对而言更灵活了；

UICollectionView有两种方式，一种是 Xib还有一种是纯代码，今天暂时是学习的Xib的方式 ；

学习总结如下：

1.创建工程，要实现UICollectionView需要ViewController实现它的三个代理协议UICollectionViewDataSource、UICollectionViewDelegate、UICollectionViewDelegateFlowLayout；

2.声明相关的UICollectionView的类如下：

@property (nonatomic,strong)UICollectionView *collectionView;

3.创建Xib文件，命名为CollectionCell，在xib中拖入如下视图

拖入后如下图所示，

在这个cell里面添加相应的控件，添加完如下所示：

到这里xib文件算是创建完了；

4.在ViewController.m文件中初始化 UICollectionView如下所示：

[objc]  view plain  copy

 print ?

1. <span style="font-size:14px;">    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];  
2.     self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:flowLayout];  
3.     self.collectionView.delegate = self;        //实现代理  
4.     self.collectionView.dataSource = self;      //实现数据源方法  
5.     self.collectionView.allowsMultipleSelection = YES;      //实现多选，默认是NO  
6.     [self.view addSubview:self.collectionView];</span>  

5.在ViewDidLoad中通过Nib生成cell，然后注册 Nib的view需要继承 UICollectionViewCell

    [self.collectionViewregisterNib:[UINibnibWithNibName:@"CollectionCell"bundle:nil]forCellWithReuseIdentifier:@"collectionCellID"];

6.实现他的代理方法，主要有如下几个

[objc]  view plain  copy

 print ?

1. //有多少个item  
2. -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{  
3.       
4.     return self.dataArray.count;  
5. }  
6.   
7.   
8. -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{  
9.       
10.     UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionCellID" forIndexPath:indexPath];  
11.       
12.     UIImageView *imageView = (UIImageView *)[cell viewWithTag:1];   //在创建Xib的时候给了控件相应的tag值  
13.     UILabel *label = (UILabel *)[cell viewWithTag:2];  
14.       
15.     [imageView setImage:[UIImage imageNamed:[self.dataArray objectAtIndex:indexPath.row]]];  
16.     [label setText:[self.dataArray objectAtIndex:indexPath.row]];  
17.       
18.     cell.backgroundColor = [UIColor redColor];  
19.       
20.     return cell;  
21.       
22. }  
23.   
24. //UICollectionViewCell的大小  
25. -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{  
26.       
27.     return CGSizeMake(90, 116);  
28. }  

[objc]  view plain  copy

 print ?

1. //选择cell时  
2. -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{  
3.       
4.     UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];  
5.     cell.backgroundColor =  [UIColor greenColor];  
6. }  
7.   
8. //取消cell时  
9. -(void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{  
10.       
11.     UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];  
12.     cell.backgroundColor =  [UIColor redColor];  
13. }  

完成以上操作运行 效果图如下；

http://blog.youkuaiyun.com/chuming0311/article/details/49251315