iOS UITableView ExpandableHeader（可形變的Header）

標籤：圖片   mode   style   color   fit   自己   exp   pre   int   

 

 

 

最常見的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.yif 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）