ios UICollectionView 带有部分标题，如 UITableView

UICollectionView with section headers like a UITableView

提问by emm

I have a quick question has anyone been able to successfully create and implement section headers in a CollectionView similar to the headers in a TableView ? I did a lot of research and found snippets of code but no real example from anyone who successfully achieved this. I have a CollectionView of photos, What I am trying to achieve is to group them up in sections depending on the month which they were taken. I have managed to split them up into those sections but all I have now is a blank header right above the start of each section. What I want to do is display the months in those currently blank headers. The same way the letters for each section are displayed in the Tableview that displays the contacts. Thanks for your responses in advance.

我有一个简单的问题，是否有人能够在 CollectionView 中成功创建和实现类似于 TableView 中的标题的节标题？我做了很多研究，找到了一些代码片段，但没有成功实现这一目标的任何人的真实例子。我有一个照片的 CollectionView，我想要实现的是根据拍摄月份将它们分组。我已经设法将它们分成这些部分，但我现在拥有的只是每个部分开头上方的空白标题。我想要做的是在那些当前空白的标题中显示月份。与每个部分的字母在显示联系人的 Tableview 中显示的方式相同。感谢您提前回复。

回答by david72

1. Enable the section header/footer view in Storyboard.

2. Implement collectionView:viewForSupplementaryElementOfKindmethod.

1. 在 Storyboard 中启用部分页眉/页脚视图。

2. 实施collectionView:viewForSupplementaryElementOfKind方法。

see This Link

看这个链接

回答by Etienne

Adding section headers in a collection view works for me with the following set up:

通过以下设置在集合视图中添加节标题对我有用：

1. add a xib file to define the header view content. The xib file contains only one cell type definition. In my case, the header view has a custom type (ImageCollectionViewHeaderCell) which derives from UICollectionViewCell. I think it is required but I'm not sure. The cell identifier is also set to predefined string (e.g.) "ImageCollectionViewHeaderCellId"

2. add header and implementation files for the custom type. It is convenient to have a method to get its UINib object (a kind of proxy for the xib file created at step 1)

   @implementation ImageCollectionViewHeaderCell
   + (UINib*) nib
   {
     return [UINib nibWithNibName:@"nameOfXibFileCreatedAtStep1" bundle:nil];
   }
   
   @end
   

3. in the collection view controller (which, in my case, is also the dataSource and delegate of the UICollectionView), in the viewDidLoad method, add the registration for the supplementary element type

   - (void) viewDidLoad
   {
      [_collectionView registerNib:[ImageCollectionViewHeaderCell nib] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"ImageCollectionViewHeaderCellId"];
   }
   

4. in the collection view controller, add the methods to return a non null header height and the header view instances

   - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
   {
     return CGSizeMake(0., 30.);
   }
   
   - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
   {
     NSAssert([kind isEqualToString:UICollectionElementKindSectionHeader], @"Unexpected supplementary element kind");
     UICollectionReusableView* cell = [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                                                 withReuseIdentifier:ImageCollectionViewHeaderCellIdentifier
                                                                        forIndexPath:indexPath];
   
     NSAssert([cell isKindOfClass:[ImageCollectionViewHeaderCell class]], @"Unexpected class for header cell");
   
     ImageCollectionViewHeaderCell* header_view = (ImageCollectionViewHeaderCell*) cell;
   
     // custom content
   
     return cell;
   }
   

1. 添加一个 xib 文件来定义标题视图内容。xib 文件仅包含一种单元格类型定义。就我而言，标题视图有一个自定义类型 (ImageCollectionViewHeaderCell)，它派生自 UICollectionViewCell。我认为这是必需的，但我不确定。单元标识符也设置为预定义的字符串（例如）“ImageCollectionViewHeaderCellId”

2. 为自定义类型添加头文件和实现文件。有一种方法可以方便地获取其 UINIb 对象（一种在步骤 1 中创建的 xib 文件的代理）

   @implementation ImageCollectionViewHeaderCell
   + (UINib*) nib
   {
     return [UINib nibWithNibName:@"nameOfXibFileCreatedAtStep1" bundle:nil];
   }
   
   @end
   

3. 在集合视图控制器（在我的例子中，也是 UICollectionView 的数据源和委托）中，在 viewDidLoad 方法中，添加补充元素类型的注册

   - (void) viewDidLoad
   {
      [_collectionView registerNib:[ImageCollectionViewHeaderCell nib] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"ImageCollectionViewHeaderCellId"];
   }
   

4. 在集合视图控制器中，添加返回非空标题高度和标题视图实例的方法

   - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
   {
     return CGSizeMake(0., 30.);
   }
   
   - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
   {
     NSAssert([kind isEqualToString:UICollectionElementKindSectionHeader], @"Unexpected supplementary element kind");
     UICollectionReusableView* cell = [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                                                 withReuseIdentifier:ImageCollectionViewHeaderCellIdentifier
                                                                        forIndexPath:indexPath];
   
     NSAssert([cell isKindOfClass:[ImageCollectionViewHeaderCell class]], @"Unexpected class for header cell");
   
     ImageCollectionViewHeaderCell* header_view = (ImageCollectionViewHeaderCell*) cell;
   
     // custom content
   
     return cell;
   }