本文是通過一個實例來了解如何使用UICollectionView滋觉，并在文章的最后加上了常用的方法

UICollectionView 和 UICollectionViewController 用于展示集合視圖，布局更加靈活勋陪，可實現(xiàn)多列布局，用法類似于UITableView 和 UITableViewController 類。
使用UICollectionView 必須實現(xiàn)UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout這三個協(xié)議。

下面將通過一個例子逝嚎，來具體介紹

• 自定義Cell

  1. 新建類CollectionViewCell繼承自UICollectionViewCell 并勾上Also create XIB file
     
     image
     
     新建后出現(xiàn)三個文件CollectionViewCell.h、CollectionViewCell.m详恼、CollectionViewCell.xib
  2. 點(diǎn)擊CollectionViewCell.xib补君，改變cell大小為200*60
     
     image
  3. 在CollectionViewCell.xib的CollectionCell中添加一個ImageView和一個Label
     
     image

  4. 創(chuàng)建imageView與Label的映射

     
     
     image
     
     
     image
  5. 選中CollectionViewCell.m , 重寫init方法

  self = [super initWithFrame:frame];
  if (self) {
      // 初始化時加載collectionCell.xib文件
      NSArray *arrayOfViews = [[NSBundle mainBundle] loadNibNamed:@"CollectionViewCell" owner:self options:nil];
      // 如果路徑不存在，return nil
      if (arrayOfViews.count < 1){
          return nil;
      }
      // 如果xib中view不屬于UICollectionViewCell類昧互，return nil
      if (![[arrayOfViews objectAtIndex:0] isKindOfClass:[UICollectionViewCell class]]){
          return nil;
      }
      // 加載nib
      self = [arrayOfViews objectAtIndex:0];
  }
  return self;
  } ```
  6. 選中CollectionViewCell.xib 修改其identifier為CollectionCell
  
  

• 定義UICollectionView

  1. 拖動一個Collection View到指定ViewController的View上
  2. 連線dataSource和delegate挽铁，并創(chuàng)建映射，命名為CollectionView
     連線dataSource和delegate：選擇collectionView按住CTRL鍵硅堆，拉至ViewController處
  3. 選中Collection View Cell 拉動大小至 200*60
  4. 選中CollectionViewCell屿储，修改Class，繼承自CollectionCell
  5. 在ViewDidLoad方法中聲明Cell的類渐逃，在ViewDidLoad方法中添加够掠，此句不聲明，將無法加載茄菊，程序崩潰
     其中CollectionCell為cell的Identifier

[self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"CollectionCell"];6. 選擇十張照片拉入Assets.xcassets 這里我拉入的格式為.jpg 名稱1~10 7. 在xxxViewController.h中聲明代理
@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>```
8. 在.m文件中實現(xiàn)代理方法

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
  //返回每個section中item的個數(shù)
  return 10;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
  CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionCell" forIndexPath:indexPath]; 
  //圖片名稱
  NSString *imageToLoad = [NSString stringWithFormat:@"%d.jpg", indexPath.row];
  //加載圖片
  cell.imageView.image = [UIImage imageNamed:imageToLoad];
  //設(shè)置label文字
  cell.label.text = [NSString stringWithFormat:@"{%ld,%ld}",(long)indexPath.row,(long)indexPath.section];
  
  return cell;
}

• 效果圖如下

  image

• 代碼示例我已放在我的github上疯潭，歡迎下載

• 一些常見代碼

pragma mark -- UICollectionViewDataSource

//定義展示的UICollectionViewCell的個數(shù)
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 30;
}
//定義展示的Section的個數(shù)
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
//每個UICollectionView展示的內(nèi)容
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString * CellIdentifier = @"GradientCell";
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];

cell.backgroundColor = [UIColor colorWithRed:((10 * indexPath.row) / 255.0) green:((20 * indexPath.row)/255.0) blue:((30 * indexPath.row)/255.0) alpha:1.0f];  
return cell;  

}```

#pragma mark --UICollectionViewDelegateFlowLayout   
//定義每個UICollectionView 的大小  
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    return CGSizeMake(96, 100);  
}   
//定義每個UICollectionView 的 margin  
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  
{  
    return UIEdgeInsetsMake(5, 5, 5, 5);  
}
#pragma mark --UICollectionViewDelegate   
//UICollectionView被選中時調(diào)用的方法  
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];  
    cell.backgroundColor = [UIColor whiteColor];  
}```