1. 程式人生 > >iOS UITableView ExpandableHeader(可形變的Header)

iOS UITableView ExpandableHeader(可形變的Header)

tar gpo span top tableview target rto off 自己實現

最常見的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)