在Storyboard中为UITableView添加Header和Footer

在Storyboard中为UITableView添加Header和Footer

 

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

使用代码添加:

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

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

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

在Storyboard中添加:

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

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

修改tableHeaderView和tableFooterView的高度:

自适应高度的Header和Footer

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

写好了约束后,在-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; }

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

举个例子:

给Label增加大段文本,并且修改numberOfLines为0,运行后的效果:

大功告成!

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/