带有自定义标题的 UICollectionView

Posted

技术标签:

【中文标题】带有自定义标题的 UICollectionView【英文标题】:UICollectionView with custom header 【发布时间】:2014-10-30 18:46:10 【问题描述】:

我正在尝试开发一个 UICollectionView,它支持包含 UIScrollview 的自定义标头。问题是(根据我目前在文档中找到的内容)UICollection 视图不支持像 UITableview 这样的静态标题视图(我可以使用情节提要在其中放置一个视图)。标头是一个 UICollectionResusableView 实例,每次上下滚动 Collection View 时都会重新生成该实例。显然这种视图无法连接到插座,因为它是一个动态原型,如 UITableViewCell。 如何添加自定义视图(以及我可以连接的相对视图控制器)作为我的集合视图的标题?

PS。我在 ios8 上开发

【问题讨论】:

【参考方案1】:

我可以使用 Table View Cell 原型作为标题,这样我就可以从 Interface Builder 执行所有操作。也许这也适用于 Collection View:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section 
    AXSHomeSectionHeaderCell *sectionHeader = [tableView dequeueReusableCellWithIdentifier:@"Home Section Header"];

    return sectionHeader;

我会看:

dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

--- 编辑---

也许我对上面的答案没有完全理解你的问题。你想要一个 UIView,而不是你可以直接连接到你的 View Controller,但你希望它与 Collection View 一起滚动?我过去使用的一种技术是在一个 UIScrollView 中使用 UIView 和 UICollectionView,其中集合视图的宽度/高度总是与需要的一样大,因此它本身不会获得滚动视图,然后应用大小UIView 和 UICollectionView 都在滚动视图中,因此它们作为一个滚动视图。

我是这样处理这种情况的:

示例

我有一个 UIScrollView,它带有一个 UIView 作为顶部和 UICollectionView 下方的标题。 UIScrollView 有一个高度确定的自动布局约束,需要将其设置为其中两个视图内容的精确高度(也许对你来说也是宽度)。我只知道加载数据后集合视图会有多大,所以我在重新加载后开始测量,然后再测量大小。

// Method being called after I successfully fetched my data
- (void)handleSuccess:(HomeScreenData *)homeScreen 
    self.eventsCollectionViewDatasource.featuredEvents = homeScreen.events;

    [self.eventsCollectionView reloadData];

    float headerHeight = CGRectGetHeight(self.headerView.frame);
    float eventsCollectionHeight = self.eventsCollectionView.contentSize.height;

    float totalScrollerHeight = headerHeight + eventsCollectionHeight; // This is how tall the scroller should be, you can do more fancy stuff if you need the width as well

    self.scrollViewContainerViewHeight.constant = totalScrollerHeight; // With autolayouts, use whatever you like

它还将支持滚动滚动!事实上,我使用它是顶部的旋转木马类型的集合视图,带有横向滚动,其下方的表格具有垂直滚动 together 与基于顶部集合视图的轮播。它与 Interface Builder 中的任何其他非重复嵌套项一样平易近人。

【讨论】:

我在考虑您在编辑中描述的方法,但我有点担心性能,因为在这种情况下,单元格不会被重用。我希望有可能像在 UITableView 中一样将静态 UIView 作为 CollectionView 的标题,但似乎不可能 我强烈建议您采用这样的方法,即为集合视图提供显示所有单元格所需的所有大小,并将其与标题 UIView 放在它们自己的滚动视图中。听起来您此时正试图过多地弯曲 UICollectionView。如果您有耐心,我可以搜索我的一些代码并发布它。【参考方案2】:

您可以从对象库中删除 Collection Reusable View 并将其放到您的 collection view 中。然后,您可以在情节提要中进行任何您想要的设计,并使用其标识符将其出列,就像您对单元格所做的那样(但使用 dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath: 您在数据源方法中执行的操作, collectionView:viewForSupplementaryElementOfKind:atIndexPath:)。

 -(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath 
     RDReusableHeader *headerView = nil; // this is my subclass of a  UICollectionReusableView
     if (kind == UICollectionElementKindSectionHeader)
         headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyView" forIndexPath:indexPath];
         // configure the view here
     

    return headerView;

【讨论】:

这就是我目前正在做的事情,但是如果我将 UIScrollview 放在 Collection Reusable View 中,那么每次我滚动时都会重新创建它,作为他可重用的一部分。我需要像 UITableView 中的静态视图

以上是关于带有自定义标题的 UICollectionView的主要内容,如果未能解决你的问题,请参考以下文章

带有自定义 UICollectionViewCell 的 UICollectionView

UICollectionview 带有动态数据的自定义布局

UICollectionView - 垂直滚动,带有自定义布局的水平分页

UICollectionView:1 行水平滚动(从右到左),带有来自右侧的新单元格的自定义动画

具有自定义布局的 UICollectionView 变为空白

UICollectionView 中的自定义布局