这个控件,看起来与UITableView有点像,而且基本的用法也很相像哦!!!


我们来看看API:

  1. #pragma mark - UICollectionViewDataSource  
  2. // 指定Section个数  
  3. - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {  
  4.   return 3;  
  5. }  
  6.   
  7. // 指定section中的collectionViewCell的个数  
  8. - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {  
  9.   return 10;  
  10. }  
  11.   
  12. // 配置section中的collectionViewCell的显示  
  13. - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {  
  14.   CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CellIdentifier" forIndexPath:indexPath];  
  15.   cell.backgroundColor = [UIColor redColor];  
  16.   cell.textLabel.text = [NSString stringWithFormat:@"(%ld %ld)", indexPath.section, indexPath.row];  
  17.     
  18.   return cell;  
  19. }  


看看直线布局的API:

  1. #pragma mark - UICollectionViewDelegateFlowLayout  
  2. - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {  
  3.   return CGSizeMake(self.view.frame.size.width / 3 - 10, self.view.frame.size.width / 3 - 10);  
  4. }  
  5.   
  6. // 设置每个cell上下左右相距  
  7. - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {  
  8.   return UIEdgeInsetsMake(5, 5, 5, 5);  
  9. }  
  10.   
  11. // 设置最小行间距,也就是前一行与后一行的中间最小间隔  
  12. - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {  
  13.   return 10;  
  14. }  
  15.   
  16. // 设置最小列间距,也就是左行与右一行的中间最小间隔  
  17. - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {  
  18.   return 10;  
  19. }  
  20.   
  21. // 设置section头视图的参考大小,与tableheaderview类似  
  22. - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {  
  23.   return CGSizeMake(self.view.frame.size.width, 40);  
  24. }  
  25.   
  26. // 设置section尾视图的参考大小,与tablefooterview类似  
  27. - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {  
  28.   return CGSizeMake(self.view.frame.size.width, 40);  
  29. }  


如果是固定的,可以使用全局属性:

  1. NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionViewFlowLayout : UICollectionViewLayout  
  2.   
  3. @property (nonatomic) CGFloat minimumLineSpacing;  
  4. @property (nonatomic) CGFloat minimumInteritemSpacing;  
  5. @property (nonatomic) CGSize itemSize;  
  6. @property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -perferredLayoutAttributesFittingAttributes:  
  7. @property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical  
  8. @property (nonatomic) CGSize headerReferenceSize;  
  9. @property (nonatomic) CGSize footerReferenceSize;  
  10. @property (nonatomic) UIEdgeInsets sectionInset;  
  11.   
  12. @end  


常用到的代理方法:

  1. #pragma mark - UICollectionViewDelegate  
  2. // 允许选中时,高亮  
  3. - (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath {  
  4.   NSLog(@"%s", __FUNCTION__);  
  5.   return YES;  
  6. }  
  7.   
  8. // 高亮完成后回调  
  9. - (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath {  
  10.   NSLog(@"%s", __FUNCTION__);  
  11. }  
  12.   
  13. // 由高亮转成非高亮完成时的回调  
  14. - (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath {  
  15.   NSLog(@"%s", __FUNCTION__);  
  16. }  
  17.   
  18. // 设置是否允许选中  
  19. - (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath {  
  20.   NSLog(@"%s", __FUNCTION__);  
  21.   return YES;  
  22. }  
  23.   
  24. // 设置是否允许取消选中  
  25. - (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath {  
  26.   NSLog(@"%s", __FUNCTION__);  
  27.   return YES;  
  28. }  
  29.   
  30. // 选中操作  
  31. - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {  
  32.   NSLog(@"%s", __FUNCTION__);  
  33. }  
  34.   
  35. // 取消选中操作  
  36. - (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {  
  37.   NSLog(@"%s", __FUNCTION__);  
  38. }  


demo:https://github.com/632840804/CollectionViewDemo