添加一个简单的UIView作为UICollectionView的头

时间:2014-02-12 14:53:24

标签: ios header uicollectionview uicollectionreusableview

我有UICollectionView。我想添加一个标题。我的标题只是UILabel。我:

1)在IB中选择“Section Header”作为Collection View附件。

2)在IB的旁边创建了一个Collection Reusable View,声明为collectionViewHeader

3)添加了这些内容:

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    if (kind == UICollectionElementKindSectionHeader) {

            return collectionViewHeader;
    }
    return nil;
}

但他们永远不会被召唤。

我是否必须为该标签创建一个类才能使用

[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];

为什么它不像UITableView那样简单,只需拖放你想要的任何标题? UICollectionView ...

让事情变得如此复杂

4 个答案:

答案 0 :(得分:31)

如下所示

注册标题视图

collectionView.registerClass(HeaderView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView")

UICollectionViewDataSource

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

    let headerView = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView", forIndexPath: indexPath)

    headerView.frame.size.height = 100

    return headerView
}

重要的是,您要提供带有标题大小的流式布局

flowLayout.headerReferenceSize = CGSize(width: self.collectionView.frame.size.width, height: 100)

否则将不会调用数据源方法

答案 1 :(得分:20)

如果未在情节提要中设置标题视图,则必须注册nib。

viewDidLoad中的示例:

- (void)viewDidLoad
{
    [self.collectionView registerClass:NSStringFromClass([YourOwnSubClass class]) forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderViewIdentifier"];
}

无论如何,你也可以继承UICollectionReusableView。

@interface YourOwnSubClass : UICollectionReusableView

然后在你的班级示例中调用委托:

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
           viewForSupplementaryElementOfKind:(NSString *)kind
                                 atIndexPath:(NSIndexPath *)indexPath
{

    YourOwnSubClass *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:
                                         UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];    
    [self updateSectionHeader:headerView forIndexPath:indexPath];

    return headerView;
}

- (void)updateSectionHeader:(UICollectionReusableView *)header forIndexPath:(NSIndexPath *)indexPath
{
    NSString *text = [NSString stringWithFormat:@"header #%i", indexPath.row];
    header.label.text = text;
}

不要忘记在集合视图或流程布局中设置标题大小,以便可以看到标题视图。

答案 2 :(得分:3)

只需将视图添加到UICollectionView并更改insets

即可
collectionView.addSubview(headerView)
collectionView.contentInset.top = 300

headerView.frame = CGRect(x: 0,
                            y: -300,
                            width: collectionView.frame.size.width,
                            height: 300)

答案 3 :(得分:0)

如果您忘记在XIB文件中启用附件,上述方法均无效,请不要忘记激活所需的部分!

enter image description here