在Storyboard中为UITableView添加Header和Footer

时间：2024-01-07 18:32:08

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

使用代码添加:

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

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

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

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

- (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

大功告成!

原文链接：http://jerrytian.com/2016/03/05/在Storyboard中为UITableView添加Header和Footer/

Tips

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

相关文章