UIStackView 线性文档流布局

作者: 朽木自雕也 | 来源:发表于2021-01-01 01:04 被阅读0次

概览

UIStackView 为单行或者单列提供自动布局、自动伸缩特性,UIScorllview 提供的特性则contentSize 大于frame.size时可以滑动的特性,理论上将二者的特性结合起来就能实现线性文档流布局,布局从上之下进行排列。

使用场景

  1. 对于一些样式非常复杂的列表,需要为每一种样式单独定义一个cell类,每个cell的功能各自不同,如果使用 UITableView 和 UICollectionView来实现,那么就会在代理方法里面写好多判断逻辑(想想你的 UITableView 代理方法是不是写了 if、else if、switch),有时候一个 - tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 方法里面右上百行代码,甚至更多。这时候使用线性文档流布局是最好不过的选择,将不同样式的组件各自进行封装,各自处理各自的事件, 然后将组件实例通过 UIStactView 的 addArrangedSubview 添加到布局流中去,UIStactView 会根据添加顺序依次进行布局。

  2. 表视图的高度是一个动态性的高度,像有一些场景中文本需要展开和收起功能,使用列表视图实现是比较复杂的,而使用 UIStackView 实现就简单很多了,组件内部只需要管理内部的约束关系,UIStackView 自动实现伸缩。

  3. 有限集列表,对于无限集列表还是推荐使用 UITableView 或者 UICollectionView, 原因不用多说(UICollectionView 和 UITableView 提供 cell 的复用机制,在性能方面更优)

举几个例子:

WechatIMG393.png WechatIMG394.png
会员中心.gif

以上三个页面全部使用UIStackView 作为容器搭建完成

首先看一下 UIStackView 实现线性布局结构图


UIStackview线性布局框架.jpg

具体步骤

创建相关视图

    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进行横向拉伸
        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 约束设置

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

UIStackView 约束设置,关键步骤,设置 stackView 定宽或者像下面这样,依赖于 scrollView 的父视图宽度,高度依赖栈内子视图将其撑开,并撑开 scrollView 的 contentSize

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

UIStackView 栈内子视图约束设置

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

预览效果


线性布局效果.gif

总结

UIStackView 是 苹果官方在iOS 9.0 推出的非常先进的容器视图,结合自动布局能够快速的帮助开发者完成各种布局效果。我在开发《海马体照相馆》app 的过程中大量的使用了 UIStackView,有时间的话分享一篇 UIStackView 的其他方面的应用。

Demo 地址(欢迎大家留言,相互学习):https://github.com/muxueChen/learnStackView

相关文章

  • UIStackView 线性文档流布局

    概览 UIStackView 为单行或者单列提供自动布局、自动伸缩特性,UIScorllview 提供的特性则co...

  • UIStackView的妙用

    UIStackView简介 UIStackView是iOS 9+支持的布局控件,主要用于线性布局,可以简化布局,减...

  • UIStackView 初探(译)

    UIStackView 用于在列或行中布局视图集合的线性接口。 UIStackView 概览 UIStackVie...

  • iOS9新特性UIStackView

    概述 UIStackView是iOS9中新增的API,类似于Android中的线性布局。UIStackView提供...

  • UIStackView简单理解和使用

    一、UIStackView简介 UIStackView是iOS9中新增的API,类似于Android中的线性布局。...

  • iOS布局-UIStackView

    iOS9,苹果推出了基于flexbox布局的UIStackView,继承于UIView。主要用于线性单行/单列的一...

  • 2021-09-09 UIStackView

    iOS9,苹果推出了基于flexbox布局的UIStackView,继承于UIView。主要用于线性单行/单列的一...

  • UIStackView布局

    前言 UIStackView是iOS9引入的用于线性布局的控件,自动管理嵌入其中的子视图的布局。其原理主要是借鉴了...

  • 【UIKit】UIStackView

    UIStackView UIStackView : UIViewiOS 9.0 基于 Flexbox 思想的布局方...

  • UIStackView的应用

    UIStackView的定义 UIStackView控件有两种,横向布局和纵向布局 Axis:设置UIStackV...

网友评论

    本文标题:UIStackView 线性文档流布局

    本文链接:https://www.haomeiwen.com/subject/dipdoktx.html