UIStackView 線性文檔流布局

概覽

UIStackView 為單行或者單列提供自動布局、自動伸縮特性,UIScorllview 提供的特性則contentSize 大于frame.size時可以滑動的特性,理論上將二者的特性結(jié)合起來就能實現(xiàn)線性文檔流布局,布局從上之下進(jìn)行排列。

使用場景

  1. 對于一些樣式非常復(fù)雜的列表,需要為每一種樣式單獨定義一個cell類,每個cell的功能各自不同,如果使用 UITableView 和 UICollectionView來實現(xiàn),那么就會在代理方法里面寫好多判斷邏輯(想想你的 UITableView 代理方法是不是寫了 if、else if、switch),有時候一個 - tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 方法里面右上百行代碼,甚至更多。這時候使用線性文檔流布局是最好不過的選擇,將不同樣式的組件各自進(jìn)行封裝,各自處理各自的事件, 然后將組件實例通過 UIStactView 的 addArrangedSubview 添加到布局流中去,UIStactView 會根據(jù)添加順序依次進(jìn)行布局。

  2. 表視圖的高度是一個動態(tài)性的高度,像有一些場景中文本需要展開和收起功能,使用列表視圖實現(xiàn)是比較復(fù)雜的,而使用 UIStackView 實現(xiàn)就簡單很多了,組件內(nèi)部只需要管理內(nèi)部的約束關(guān)系,UIStackView 自動實現(xiàn)伸縮。

  3. 有限集列表,對于無限集列表還是推薦使用 UITableView 或者 UICollectionView, 原因不用多說(UICollectionView 和 UITableView 提供 cell 的復(fù)用機(jī)制,在性能方面更優(yōu))

舉幾個例子:

WechatIMG393.png
WechatIMG394.png

會員中心.gif

以上三個頁面全部使用UIStackView 作為容器搭建完成

首先看一下 UIStackView 實現(xiàn)線性布局結(jié)構(gòu)圖


UIStackview線性布局框架.jpg

具體步驟

創(chuàng)建相關(guān)視圖

    override func viewDidLoad() {
        super.viewDidLoad()
        let scrollView = UIScrollView()
        scrollView.backgroundColor = UIColor.red
        let stackView = UIStackView()
        stackView.axis = .vertical // 縱向布局
        stackView.distribution = .equalSpacing // 每個item之間間距相同
        stackView.spacing = 20 // 相鄰item之間間距
        stackView.alignment = .center // 居中對齊,不對item進(jìn)行橫向拉伸
        view.addSubview(scrollView)
        scrollView.addSubview(stackView)
        
        for i in 0..<10 {
            let itemView = UIButton()// 為了演示效果這里采用 uibutton,點擊消失對 UIStackView 布局的影響
            itemView.setTitle("View\(i)", for: .normal)
            itemView.addTarget(self, action: #selector(handle), for: .touchUpInside)
            itemView.backgroundColor = .green
            stackView.addArrangedSubview(itemView)
        }
    }
    @objc func handle(btn:UIButton) {
        UIView.animate(withDuration: 0.25) {
            btn.isHidden = true
        }
    }

UIScorllview 約束設(shè)置

        scrollView.snp.makeConstraints { (make) in
            make.edges.equalTo(self.view)
        }

UIStackView 約束設(shè)置,關(guān)鍵步驟,設(shè)置 stackView 定寬或者像下面這樣,依賴于 scrollView 的父視圖寬度,高度依賴棧內(nèi)子視圖將其撐開,并撐開 scrollView 的 contentSize

        stackView.snp.makeConstraints { (make) in
            make.left.right.equalTo(self.view)
            make.top.bottom.equalTo(scrollView)
        }

UIStackView 棧內(nèi)子視圖約束設(shè)置

            itemView.snp.makeConstraints { (make) in
                make.height.equalTo(200)
                make.width.equalTo(self.view.frame.width - 40)
            }

預(yù)覽效果


線性布局效果.gif

總結(jié)

UIStackView 是 蘋果官方在iOS 9.0 推出的非常先進(jìn)的容器視圖,結(jié)合自動布局能夠快速的幫助開發(fā)者完成各種布局效果。我在開發(fā)《海馬體照相館》app 的過程中大量的使用了 UIStackView,有時間的話分享一篇 UIStackView 的其他方面的應(yīng)用。

Demo 地址(歡迎大家留言,相互學(xué)習(xí)):https://github.com/muxueChen/learnStackView

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 偶然發(fā)現(xiàn),用過一些,分享給大家 { "XcodeChaJian": [ { "Dname":"...
    MonkeyHan閱讀 7,003評論 0 4
  • 久違的晴天,家長會。 家長大會開好到教室時,離放學(xué)已經(jīng)沒多少時間了。班主任說已經(jīng)安排了三個家長分享經(jīng)驗。 放學(xué)鈴聲...
    飄雪兒5閱讀 7,787評論 16 22
  • 今天感恩節(jié)哎,感謝一直在我身邊的親朋好友。感恩相遇!感恩不離不棄。 中午開了第一次的黨會,身份的轉(zhuǎn)變要...
    余生動聽閱讀 10,798評論 0 11
  • 可愛進(jìn)取,孤獨成精。努力飛翔,天堂翱翔。戰(zhàn)爭美好,孤獨進(jìn)取。膽大飛翔,成就輝煌。努力進(jìn)取,遙望,和諧家園??蓯塾巫?..
    趙原野閱讀 3,437評論 1 1
  • 在妖界我有個名頭叫胡百曉,無論是何事,只要找到胡百曉即可有解決的辦法。因為是只狐貍大家以訛傳訛叫我“傾城百曉”,...
    貓九0110閱讀 3,707評論 7 3

友情鏈接更多精彩內(nèi)容