iOS UITableView ExpandableHeader(可形变的Header)

Posted Ficow Shen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS UITableView ExpandableHeader(可形变的Header)相关的知识,希望对你有一定的参考价值。

 

 

 

最常见的header就是在tableView下拉时header里的图片会放大的那种,

最近研究了一下,自己实现了这种header。

 

 

 

1.设置TableView的contentInset(为header预留空间)和contentOffset(使tableView加载完成后显示最顶部)

tableView.contentInset = UIEdgeInsetsMake(headerHeight, 0, 0, 0)
tableView.setContentOffset(CGPoint.init(x: 0, y: -headerHeight), animated: true)

 

 

 

 

2.为header添加约束(SnapKit)

var headerHeightConstraint:Constraint?
var headerTopConstraint:Constraint?

 

tableView.addSubview(header)
header.snp.makeConstraints { (m) in
    headerTopConstraint = m.top.equalTo(tableView.snp.top).offset(-headerHeight).constraint
    m.leading.equalTo(tableView.snp.leading)
    m.width.equalTo(SCREEN_WIDTH)
    headerHeightConstraint = m.height.equalTo(headerHeight).constraint
}

 

 

 

 

3.监测TableView的contentOffset,并改变header的约束

let yOffset = -scrollView.contentOffset.y
if yOffset >  headerHeight {
    headerTopConstraint?.layoutConstraints.first?.constant = -yOffset
    headerHeightConstraint?.layoutConstraints.first?.constant = yOffset
}

 

 

 

4.设置header部分的contentMode(模式如果不对,内容缩放的方式就会不同)

header.contentMode = .scaleAspectFit //模式请根据实际情况自选

 

 

 

 


Ficow原创,转载请注明出处:http://www.cnblogs.com/ficow/p/7301110.html

以上是关于iOS UITableView ExpandableHeader(可形变的Header)的主要内容,如果未能解决你的问题,请参考以下文章

iOS 编辑UITableView(根据iOS编程编写)

iOS小技能:1. 什么是UITableView? 2. UITableView如何展示数据

iOS开发之UITableView的使用

iOS开发UI篇—UITableview控件简单介绍

iOS横竖滚动UITableView

iOS-UITableView重用机制