前言
UITableView
的有一個tableHeaderView屬性:整體列表的頭部,滾動的時候回跟隨列表整體一起滾動前鹅。
常規(guī)設(shè)置tableHeaderView會給定一個UIView再去設(shè)定frame跷跪,一旦是動態(tài)布局還得計算個別動態(tài)控件的高度,再將tableHeaderView的height更新,及其麻煩楷掉。
因此用動態(tài)布局設(shè)定headerView不香么?
動態(tài)布局設(shè)定tableHeaderView
先來看看效果
上邊這個效果就是拿定義的View嵌入到tableView的tableHeaderView中做到的霞势。
完整代碼:
import UIKit
import SnapKit
class ViewController: UIViewController{
let headerView = TestHeaderView(frame: .zero)
let tableView : UITableView = UITableView(frame: .zero, style: .plain)
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(tableView)
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.separatorStyle = .none //隱藏tableview分割線
//把 autoresizingMask 轉(zhuǎn)換為 Constraints烹植,我們要用自動因此設(shè)置為false,不加會警告
tableView.snp.makeConstraints { (make) in
make.edges.equalToSuperview().offset(0)
}
tableView.tableHeaderView = headerView//相當(dāng)于 addsubview
headerView.backgroundColor = .lightGray
headerView.updateBlock = {[weak self] in
self?.headerView.layoutIfNeeded()
self?.tableView.tableHeaderView?.layoutIfNeeded()
}
headerView.snp.makeConstraints { (make) in
make.left.top.equalToSuperview()
make.width.equalTo(UIScreen.main.bounds.width)//
//height 動態(tài)嵌入 不用獲取
}
headerView.loadData()
}
}
extension TestHeaderView {
func loadData() {
header.backgroundColor = .red
content.numberOfLines = 0
content.text = "是打算打算打算大薩達(dá)撒大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打所多所打算大薩達(dá)撒大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打所多所打算大薩達(dá)撒大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打所多所打算大薩達(dá)撒大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打所多所打算大薩達(dá)撒大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打所多所打算大薩達(dá)撒大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打所多所打算大薩達(dá)撒大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打所多所打算大薩達(dá)撒大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打所多所打算大薩達(dá)撒大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打所多所打算大薩達(dá)撒大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打大家快來薩達(dá)所打所多所打算大薩達(dá)撒大家快來薩達(dá)所打大家快所打大家快"
title.text = "撒大聲地計算的撒大聲地"
if let tmpUpdateBlock = self.updateBlock {
tmpUpdateBlock()
}
}
}
class TestHeaderView: UIView {
private let header = UIImageView()
private let title = UILabel()
private let content = UILabel()
private let bottomLine = UIView()
typealias UpdateHeightBlock = ()->();
var updateBlock:UpdateHeightBlock?
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setupUI() {
self.addSubview(header)
self.addSubview(title)
self.addSubview(content)
self.addSubview(bottomLine)
title.backgroundColor = .green
content.backgroundColor = .red
header.layer.cornerRadius = 14
header.layer.masksToBounds = true
header.isUserInteractionEnabled = true
// header.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(headerClick)))
bottomLine.backgroundColor = .darkGray
header.snp.makeConstraints { (make) in
make.left.top.equalTo(15)
make.size.equalTo(28)
}
title.snp.makeConstraints { (make) in
make.centerY.equalTo(header.snp.centerY)
make.left.equalTo(header.snp.right).offset(5)
make.right.equalTo(-15)
}
content.snp.makeConstraints { (make) in
make.top.equalTo(header.snp.bottom)
make.left.equalTo(title)
make.right.equalTo(title)
}
bottomLine.snp.makeConstraints { (make) in
make.left.equalTo(15)
make.right.equalTo(title)
make.top.equalTo(content.snp.bottom).offset(10)
make.height.equalTo(5)
make.bottom.equalToSuperview()
}
}
}
非常簡單的實現(xiàn)代碼核心就是在TestHeader類中聲明一個閉包愕贡,當(dāng)loadData
布局后草雕,通過controller層將headerView和tableView 使用layoutIfNeeded()
更新布局即可。
核心代碼:
headerView.updateBlock = {[weak self] in
self?.headerView.layoutIfNeeded()
self?.tableView.tableHeaderView?.layoutIfNeeded()
}
如果我們在工期緊的時候需要做這種動態(tài)布局的復(fù)雜頁面
固以,可以將tableView的tableHeader作為我們的視圖容器墩虹,contentSize,約束憨琳,tableview內(nèi)部會全部計算好诫钓。肯定是比scrollView省勁的篙螟。