23

UICollectionView 中有两个标题?

我有一个使用流布局的 UICollectionView,它也有页眉和页脚:

---------   
| head  |
---------
| A | B |
---------
| C | D |
---------
| foot  |
---------

有时,我想要两个标题,如下所示:

---------   
| head1 |
---------   
| head2 |
---------
| A | B |
---------
| C | D |
---------
| foot  |
---------

我坚持如何实现这一目标。流布局似乎只允许一头一脚。如何添加第二个标题?


编辑:我还实现了粘性标题 - http://blog.radi.ws/post/32905838158/sticky-headers-for-uicollectionview-using - 但我只希望第一个标题是粘性的。这就是为什么我不能将所有内容都包含在一个标题中。

4

7 回答 7

35

您只需要使用一个简单的技巧。为所有部分显示页眉和页脚。

您不想在哪个部分显示页脚只需将其大小为零传递为:-

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
    if(section==0)
    {
        return CGSizeZero;
    }

    return CGSizeMake(320, 50);
}

在这里,我使用了两个部分,例如

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

并且仅在最后一个部分中传递了行数

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    if (section==1) {
        return 20;
    }
    return 0;
}

这是我的输出---

在此处输入图像描述

红色视图是页眉,绿色一个是页脚。

在这里你可以得到整个实现文件

于 2013-08-13T12:10:29.913 回答
5

此内容可能会帮助您实现您想要的

创建类CollectionHeaderView并使其派生自UICollectionReusableView容器并制作容器,然后在制作 2 uiview 并将其放入此容器中

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableview = nil;

    if (kind == UICollectionElementKindSectionHeader) {
        CollectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];

        headerView.firstContainer.titleLabel.text = @"MY Header View 1";//Here you can set title 

        headerView.secondContainer.titleLabel.text = @"MY Header View 2";//Here you can set title  
        UIImage *headerImage = [UIImage imageNamed:@"header_banner.png"];
        headerView.firstContainer.backgroundImage.image = headerImage;
       headerView.secondContainer.backgroundImage.image = headerImage;

        reusableview = headerView;
    }

    if (kind == UICollectionElementKindSectionFooter) {
        UICollectionReusableView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"FooterView" forIndexPath:indexPath];

        reusableview = footerview;
    }

    return reusableview;
}
于 2013-08-09T10:01:39.813 回答
4

您应该将标题(1 和 2)都放在另一个视图中,并将该视图放置为标题 1。因此,仅在集合视图中的标题上创建。

于 2013-08-09T09:48:30.600 回答
2

您可以做的是使用带有两个部分的 UITableView 并将 UICollectionView 放在第二部分的单元格中。

于 2013-08-09T14:05:33.750 回答
2

你如何添加一个标题?我想通过指定节标题?拥有两个标题的方法是在一个标题主视图中包含两个标题子视图。

于 2013-08-09T09:48:38.960 回答
2

定义你的 UICollectionViewCell 这将是你的类型 UICollectionElementKindSectionHeader 的标题视图 - 在我的情况下,我有两个标题 - OfferHeaderCell 和 APRHeaderCell 定义如下:

verticalCollectionView.register(UINib(nibName: "OfferHeaderCell", bundle: nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "OfferHeaderCell")
verticalCollectionView.register(UINib(nibName: "APRHeaderCell", bundle: nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "APRHeaderCell")

继续并为每个部分返回一个标题,然后在此 UICollectionViewDelegateFlowLayout 函数中将部分标题的大小设置为零

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    if(section==0) {
        return CGSize.zero
    } else if (section==1) {
        return CGSize(width:collectionView.frame.size.width, height:133)
    } else {
        return CGSize(width:collectionView.frame.size.width, height:100)
    }

}

为两个不同的部分定义 viewForSupplementaryElementOfKind 很重要,如下所示:

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {

    var reusableview = UICollectionReusableView()
    if (kind == UICollectionElementKindSectionHeader) {
        let section = indexPath.section
        switch (section) {
        case 1:
            let  firstheader: OfferHeaderCell = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "OfferHeaderCell", for: indexPath) as! OfferHeaderCell
            reusableview = firstheader
        case 2:
            let  secondHeader: APRHeaderCell = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "APRHeaderCell", for: indexPath) as! APRHeaderCell
            reusableview = secondHeader
        default:
            return reusableview

        }
    }
    return reusableview
}

最后是数据源,

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 3
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    if (section==2) {
        return 2
    }
    return 0
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = verticalCollectionView.dequeueReusableCell(withReuseIdentifier: "ReviseOfferCell", for: indexPath)
    cell.backgroundColor = UIColor.white
    return cell
}

注意:不要忘记添加 UICollectionFlowLayout 如下:

// MARK: UICollectionViewDelegateFlowLayout

extension MakeAnOfferController: UICollectionViewDelegateFlowLayout {

        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

            if indexPath.item == 0 {
                return CGSize(width: self.view.frame.size.width, height: 626.0)
            }
            return CGSize()
        }

        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {

            if(section==0) {
                return CGSize.zero
            } else if (section==1) {
                return CGSize(width:collectionView.frame.size.width, height:133)
            } else {
                return CGSize(width:collectionView.frame.size.width, height:100)
            }
        }
    }
于 2017-10-10T20:19:01.670 回答
0

通过在可重用标题中创建两个视图来实现此功能,仅当该部分是第二部分时才实施粘性标题。另外,我将 numberOfSection 调整为 2。通过在 viewForSupplementaryElementOfKind 中隐藏和显示视图来切换标题。

于 2014-12-04T08:21:40.247 回答