【问题标题】:UICollectionView with two headers带有两个标题的 UICollectionView
【发布时间】:2013-08-09 09:36:56
【问题描述】:

在 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 - 但我只希望第一个标题是粘性的。这就是为什么我不能只在一个标题中包含所有内容。

【问题讨论】:

    标签: iphone ios objective-c uicollectionview uicollectionviewlayout


    【解决方案1】:

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

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

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

    这是我的输出 ---

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

    Here u can get the entire Implementation File

    【讨论】:

    • 这似乎是一个不错的方向。使用这种方法,我可以为两个标题使用不同的布局吗?并允许我让一个标题为“粘性”,而另一个标题正常滚动。
    • 是的,为什么不呢,只需在 viewForSupplementaryElementOfKind 上应用部分条件,您就可以获得每个部分的不同布局的标题。
    • 如何设置 CustomFlowLayout 仅第 2 部分?
    【解决方案2】:

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

    创建类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;
    }
    

    【讨论】:

    • 虽然此链接可能会回答问题,但建议在答案正文中发布必要的信息。不鼓励仅链接答案。
    • @Krishnabhadra 好的,我做到了.. 谢谢 :)
    【解决方案3】:

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

    【讨论】:

    • 这应该可以,只是不要认为它们是两个标题。
    • 我无法想象这将如何工作,因为标题具有不同的行为。
    【解决方案4】:

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

    【讨论】:

    • 您可以在两个标题子视图中尝试不同的自动调整大小掩码。
    【解决方案5】:

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

    【讨论】:

      【解决方案6】:

      定义你的 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)
                  }
              }
          }
      

      【讨论】:

        【解决方案7】:

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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2019-11-06
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2014-01-21
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多