tableHeaderView自動布局技巧

前言

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省勁的篙螟。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末菌湃,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子遍略,更是在濱河造成了極大的恐慌惧所,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件绪杏,死亡現(xiàn)場離奇詭異下愈,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蕾久,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進(jìn)店門势似,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人僧著,你說我怎么就攤上這事叫编。” “怎么了霹抛?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵搓逾,是天一觀的道長。 經(jīng)常有香客問我杯拐,道長霞篡,這世上最難降的妖魔是什么世蔗? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮朗兵,結(jié)果婚禮上污淋,老公的妹妹穿的比我還像新娘。我一直安慰自己余掖,他們只是感情好寸爆,可當(dāng)我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著盐欺,像睡著了一般赁豆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上冗美,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天魔种,我揣著相機(jī)與錄音,去河邊找鬼粉洼。 笑死节预,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的属韧。 我是一名探鬼主播安拟,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼宵喂!你這毒婦竟也來了去扣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤樊破,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后唆铐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哲戚,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年艾岂,在試婚紗的時候發(fā)現(xiàn)自己被綠了顺少。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡王浴,死狀恐怖脆炎,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情氓辣,我是刑警寧澤秒裕,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站钞啸,受9級特大地震影響几蜻,放射性物質(zhì)發(fā)生泄漏喇潘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一梭稚、第九天 我趴在偏房一處隱蔽的房頂上張望颖低。 院中可真熱鬧,春花似錦弧烤、人聲如沸忱屑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽莺戒。三九已至,卻和暖如春话浇,著一層夾襖步出監(jiān)牢的瞬間脏毯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工幔崖, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留食店,地道東北人。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓赏寇,卻偏偏與公主長得像吉嫩,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子嗅定,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容