美文网首页stackview
UIStackView 简单理解

UIStackView 简单理解

作者: blackie_james | 来源:发表于2021-03-04 10:28 被阅读0次

    概览

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

    使用场景

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

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

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

    举几个例子:

    WechatIMG393.png

    WechatIMG394.png

    会员中心.gif

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

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

    UIStackview线性布局框架.jpg

    具体步骤

    创建相关视图

    overridefuncviewDidLoad(){super.viewDidLoad()letscrollView=UIScrollView()scrollView.backgroundColor=UIColor.redletstackView=UIStackView()stackView.axis=.vertical// 纵向布局stackView.distribution=.equalSpacing// 每个item之间间距相同stackView.spacing=20// 相邻item之间间距stackView.alignment=.center// 居中对齐,不对item进行横向拉伸view.addSubview(scrollView)scrollView.addSubview(stackView)foriin0..<10{letitemView=UIButton()// 为了演示效果这里采用 uibutton,点击消失对 UIStackView 布局的影响itemView.setTitle("View\(i)",for:.normal)itemView.addTarget(self,action:#selector(handle),for:.touchUpInside)itemView.backgroundColor=.green            stackView.addArrangedSubview(itemView)}}@objcfunchandle(btn:UIButton){UIView.animate(withDuration:0.25){btn.isHidden=true}}

    UIScorllview 约束设置

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

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

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

    UIStackView 栈内子视图约束设置

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

    预览效果

    线性布局效果.gif

    总结

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

    相关文章

      网友评论

        本文标题:UIStackView 简单理解

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