如何使用Storyboard实现自定义表视图节页眉和页脚

Question

在不使用故事板的情况下,我们可以简单地将其UIView拖到画布上,将其布局,然后将其设置在tableView:viewForHeaderInSection或tableView:viewForFooterInSection委托方法中.

我们如何使用StoryBoard完成此操作,我们无法将UIView拖到画布上

Answer 1

只需使用原型单元格作为节标题和/或页脚.

• 添加一个额外的单元格并将所需的元素放入其中.
• 将标识符设置为特定的(在我的情况下为SectionHeader)
• 实现tableView:viewForHeaderInSection:方法或tableView:viewForFooterInSection:方法
• 使用[tableView dequeueReusableCellWithIdentifier:]来获得头
• 实施tableView:heightForHeaderInSection:方法.

-(UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    static NSString *CellIdentifier = @"SectionHeader"; 
    UITableViewCell *headerView = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (headerView == nil){
        [NSException raise:@"headerView == nil.." format:@"No cells with matching CellIdentifier loaded from your storyboard"];
    }
    return headerView;
}  

编辑:如何更改标题标题(评论问题):

1. 向标题单元格添加标签
2. 将标签的标签设置为特定的数字(例如123)
3. 在您的tableView:viewForHeaderInSection:方法中通过调用获取标签:

    UILabel *label = (UILabel *)[headerView viewWithTag:123]; 

4. 现在您可以使用标签设置新标题:

    [label setText:@"New Title"];

Answer 2

我知道这个问题适用于iOS 5,但为了未来读者的利益,请注意我们现在可以使用的有效iOS 6 dequeueReusableHeaderFooterViewWithIdentifier代替dequeueReusableCellWithIdentifier.

所以viewDidLoad,请拨打registerNib:forHeaderFooterViewReuseIdentifier:或registerClass:forHeaderFooterViewReuseIdentifier:.然后viewForHeaderInSection,打电话tableView:dequeueReusableHeaderFooterViewWithIdentifier:.您不使用此API的单元格原型(它是基于NIB的视图或以编程方式创建的视图),但这是用于出列页眉和页脚的新API.

Answer 3

在iOS 6.0及更高版本中,新dequeueReusableHeaderFooterViewWithIdentifierAPI 已经发生了变化.

我已经写了一个指南(在iOS 9上测试过),可以这样总结:

1. 子类 UITableViewHeaderFooterView
2. 使用子类视图创建Nib,并添加1个容器视图,其中包含页眉/页脚中的所有其他视图
3. 注册Nib viewDidLoad
4. 实现viewForHeaderInSection并使用dequeueReusableHeaderFooterViewWithIdentifier以获取页眉/页脚

Answer 4

我在故事板中使用原型单元在iOS7中工作.我的自定义部分标题视图中有一个按钮,用于触发在故事板中设置的segue.

从Tieme的解决方案开始

正如pedro.m指出的那样,问题在于点击节标题会导致选择节中的第一个单元格.

正如Paul Von指出的那样,通过返回单元格的contentView而不是整个单元格来解决这个问题.

然而,正如Hons所指出的那样,长按所述部分标题会使应用程序崩溃.

解决方案是从contentView中删除任何gestureRecognizers.

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
     static NSString *CellIdentifier = @"SectionHeader";
     UITableViewCell *sectionHeaderView = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

     while (sectionHeaderView.contentView.gestureRecognizers.count) {
         [sectionHeaderView.contentView removeGestureRecognizer:[sectionHeaderView.contentView.gestureRecognizers objectAtIndex:0]];
     }

     return sectionHeaderView.contentView; }

如果你没有在节标题视图中使用手势,这个小小的黑客似乎完成了它.

Answer 5

如果使用故事板,则可以使用tableview中的原型单元格来布局标题视图.设置一个唯一的id和viewForHeaderInSection,您可以使用该ID将单元格出列并将其强制转换为UIView.

Answer 6

如果你需要一个Swift实现,请按照接受的答案的说明,然后在你的UITableViewController中实现以下方法:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    return tableView.dequeueReusableCell(withIdentifier: "CustomHeader")
}

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 75
}

Answer 7

我提出的解决方案基本上与故事板引入之前使用的解决方案相同.

创建一个新的空接口类文件.根据需要将UIView拖到画布上.

手动加载nib,在viewForHeaderInSection或viewForFooterInSection委托方法中指定相应的页眉/页脚部分.

我希望Apple用故事板简化这个场景,并不断寻找更好或更简单的解决方案.例如,可以直接添加自定义表格页眉和页脚.

Answer 8

当您返回单元格的contentView时,您将遇到两个问题:

1. 与手势相关的崩溃
2. 你不重用contentView(每次viewForHeaderInSection通话,你创建新的单元格)

解:

表头\页脚的包装类.它只是容器,继承自UITableViewHeaderFooterView,将细胞保持在里面

https://github.com/Magnat12/MGTableViewHeaderWrapperView.git

在UITableView中注册类(例如,在viewDidLoad中)

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.tableView registerClass:[MGTableViewHeaderWrapperView class] forHeaderFooterViewReuseIdentifier:@"ProfileEditSectionHeader"];
}

在你的UITableViewDelegate中:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    MGTableViewHeaderWrapperView *view = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"ProfileEditSectionHeader"];

    // init your custom cell
    ProfileEditSectionTitleTableCell *cell = (ProfileEditSectionTitleTableCell * ) view.cell;
    if (!cell) {
        cell = [tableView dequeueReusableCellWithIdentifier:@"ProfileEditSectionTitleTableCell"];
        view.cell = cell;
    }

    // Do something with your cell

    return view;
}