在Storyboard中为UITableView添加Header和Footer

在Storyboard中为UITableView添加Header和Footer


我在这里所说的Header和Footer并不是sectionHeadersectionFooter,而是指UITableViewtableHeaderViewtableFooterView,这两个可以跟随tableView滑动的头部和尾部.

使用代码添加:

首先需要用代码(或者使用xib)创建一个继承自UIViewheaderView或者footerView,然后使用下列代码给tableView增加头部和尾部.

1
2
self.tableView.tableHeaderView = headerView;
self.tableView.tableHeaderView = footerView;

但是这种方法相对来说比较麻烦,在Storyboard可以很轻松的完成这个任务.

在Storyboard中添加:

添加的方法非常简单,直接拖就OK了,并且能直接在headerView和footerView中使用AutoLayout给子控件布局.
在Storyboard中为UITableView添加Header和Footer

添加到UITableViewCell上面的就是headerView,下面的就是footerView,如果没有给UITableView添加Cell的话,拖到UITableView里面默认是headerView,所以如果需要添加尾部,确保有至少一个Cell就OK了.

修改tableHeaderView和tableFooterView的高度:

在Storyboard中为UITableView添加Header和Footer

自适应高度的Header和Footer

如果希望tableHeaderViewtableFooterView根据内容自适应高度,则需要用到-systemLayoutSizeFittingSize:这个方法来实现.
实现自适应高度的前提,约束要完整,要保证View内部上下左右所有方向都有约束支撑.例如下图的一个例子:
在Storyboard中为UITableView添加Header和Footer

写好了约束后,在-viewDidLayoutSubviews中添加如下代码:

1
2
3
4
5
6
7
8
9
10
- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    
    //利用systemLayoutSizeFittingSize:计算出真实高度
    CGFloat height = [self.tableView.tableHeaderView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
    CGRect headerFrame = self.tableView.tableHeaderView.frame;
    headerFrame.size.height = height;
    //修改tableHeaderView的frame
    self.tableView.tableHeaderView.frame = headerFrame;
}

这样就能实现高度自适应啦~~~

举个例子:
在Storyboard中为UITableView添加Header和Footer

给Label增加大段文本,并且修改numberOfLines为0,运行后的效果:
在Storyboard中为UITableView添加Header和Footer

大功告成!

Tips

  • 使用这个方法可以很方便的在Storyboard中调整Group样式的UITableView的顶部留白高度.
  • UITableViewController或者UIViewController+UITableView的组合都一样适用,但是后者要记得给UITableView添加一个Cell才能添加footerView哦.

转自Jerry Tian's Blog:https://jerrytian.com/2016/03/05/%E5%9C%A8Storyboard%E4%B8%AD%E4%B8%BAUITableView%E6%B7%BB%E5%8A%A0Header%E5%92%8CFooter/