带有节标题的UICollectionView,如UITableView

Question

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

Answer 1

1. 在Storyboard中启用节头/页脚视图.

2. 实施collectionView:viewForSupplementaryElementOfKind方法.

请参阅此链接

Answer 2

在集合视图中添加节标题适用于我,具有以下设置:

1. 添加xib文件以定义标题视图内容.xib文件只包含一个单元格类型定义.在我的例子中,标题视图有一个自定义类型(ImageCollectionViewHeaderCell),它派生自UICollectionViewCell.我认为这是必需的,但我不确定.单元标识符也设置为预定义字符串(例如)"ImageCollectionViewHeaderCellId"

2. 添加自定义类型的标头和实现文件.有一个方法来获取其UINib对象(在步骤1中创建的xib文件的一种代理)很方便

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

3. 在集合视图控制器(在我的情况下,也是UICollectionView的dataSource和委托)中,在viewDidLoad方法中,添加补充元素类型的注册

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

4. 在集合视图控制器中,添加方法以返回非null标头高度和标头视图实例

   - (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;
   }