在StoryBoard中将视图添加到CollectionView标题 [英] Add a view to CollectionView header in StoryBoard

问题描述

我在我的CollectionView顶部有2个视图，只想滚动所有这3个视图。我明白最好的方法是将这两个顶部视图放在我的collectionView标题中。如何在故事板（界面生成器）中实现此功能而无需任何代码？
（我在我的另一个tableView中使用这种方式，但我不能用CollectionoView做到这一点）

我将这两个视图拖动到我的collectionView的reusableView（headerView ），我遇到了这个错误：
在这里输入图像描述

解决方案

无法在界面构建器中拖放，并且无法获取集合视图的标题视图。你必须另外实现返回UICollectionReusableView的viewForSupplementaryElementOfKind方法。在使用集合可重用视图时，我们必须以不同的方式处理该视图，类似于我们为可重用细胞所做的事情。
$ b

1. 为该标题创建一个类（HeaderViewExample）


2. 将类（HeaderViewExample）分配给您刚添加到界面构建器中的可重用视图。 给可重用标识符（HeaderViewExample）
   
3. 现在您将标签或按钮添加到可重复使用的视图中，并为Class HeaderViewExample 中的这些出口创建出口。

（注意：使用可重复使用的视图时，请勿直接在控制器中创建插座。）

现在使用下面的代码更新您的CollectionViewController。

  override func collectionView（collectionView：UICollectionView，viewForSupplementaryElementOfKind类型：字符串，atIndexPath indexPath：
 NSIndexPath） - > UICollectionReusableView {
 
 var reusableView = UICollectionReusableView（）
 
 if kind == UICollectionElementKindSectionHeader {
 guard let view = collectionView？.dequeueReusableSupplementaryViewOfKind（kind，withReuseIdentifier：String（HeaderViewExample ），forIndexPath：indexPath）as？ HeaderViewExample else {return reusableView} 
 view.label =Test String
 view.backgroundColor = UIColor.redColor（）
} else {
 assert（false，Unexpected element kind ）
} 
 
 return reusableView 
} 
  

I have 2 views on top of my CollectionView and just want to scroll on all these 3 views. I understand the best approach is to place these 2 top views in my collectionView header. How can I achieve this in storyboard (interface builder) without any code? (I use this way in my another tableView but I have can't do this with CollectionoView)

I drag those 2 views to my collectionView's reusableView(headerView) and I've faced with this error: enter image description here

解决方案

There is no way you can drag and drop in interface builder and get header view for collection view. You have to additionally implement viewForSupplementaryElementOfKind method which returns UICollectionReusableView. While using collection reusable view, we have to treat that view in different way similar to stuffs we do for reusable cell.

Steps to follow.

1. Create a class (HeaderViewExample) for that header view.
2. Assign class (HeaderViewExample) to the reusable view you have just added in interface builder.
3. Give a reusable identifier (HeaderViewExample) to that reusable view.
4. Now you add label or buttons to the reusable view and create outlets for those outlets in the Class HeaderViewExample.

(Note: While using reusable views, don't create outlets directly in the controller.)

Now Update your CollectionViewController with the below code.

override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: 
NSIndexPath) -> UICollectionReusableView {

    var reusableView = UICollectionReusableView()

    if kind == UICollectionElementKindSectionHeader {
          guard let view = collectionView?.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: String(HeaderViewExample), forIndexPath: indexPath) as? HeaderViewExample else { return reusableView }
          view.label = "Test String"
          view.backgroundColor = UIColor.redColor()
    } else {
      assert(false, "Unexpected element kind")
    }

    return reusableView
  }

这篇关于在StoryBoard中将视图添加到CollectionView标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！