欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

iOS界面布局简化UIStackView使用详解,

来源: 开发者 投稿于  被查看 5176 次 评论:55

iOS界面布局简化UIStackView使用详解,


目录
  • 前言
  • UIStackView布局思想
    • distribution:
    • alignment:
  • UIStackView用法
    • 初始化
    • 添加、删除子视图
    • 排列方向
    • 布局方式
    • 对齐方式
    • 间距

前言

在过去iOS页面布局较为传统,大多数人使用Frame或者AutoLayout来布局,在iOS9以后,引入了UIStackViewUIStackView是用于线性布局的控件,可以自动管理子视图布局,自动填充。它借鉴了前端的布局算法Flexbox,可以简便地实现各种页面布局。

UIStackView虽然已经不是新控件了,但还是有很多同学并没有使用起来。通常有时改别人的代码看到乱糟糟的布局代码就有很多槽点。所以这也是写这篇文章的目的所在,真的推荐大家使用StackView。事半功倍,省下来的时间摸鱼不香嘛。

回归正题,不管是使用Frame或者AutoLayout来布局,我们都需要对所有的控件的位置、大小进行设置,Frame需要指定位置布局,AutoLayout需要指定约束布局;

UIStackView布局方式凸显它的优势在于不需要设置排列视图(即子视图)的位置,大小(不是必须的),而是通过自身的排列、分布方式自动完成布局。

对比起来,使用UIStackView更高效,我们可以通过嵌套UIStackView快速完成各式各样的布局。

UIStackView布局思想

UIStackView的初衷就是为了简化的界面布局,适用于列或行中布局视图集合。

StackView使用自动布局(AutoLayout)来定位和设置其排列视图的大小。StackView将第一个和最后一个排列的视图与其沿堆栈轴的边缘对齐。在水平堆栈中,这意味着第一个排列视图的前缘被固定在StackView的前缘上,而最后一个排列视图的后缘被固定在StackView的后缘上;在垂直堆栈中,顶部和底部边缘分别固定在堆栈的顶部和底部边缘上。

StackView会根据自身的布局规则进行填充排列视图。

distribution:

distribution 即排列方式:

  • fill根据抗拉伸、压缩优先级填充(默认拉伸第一个排列视图)
  • fillEqually在排列方向上的填充大小相同(即横向布局宽度相同,纵向布局高度相同)
  • fillProportionally根据排列视图的大小按比例填充
  • equalSpacing均匀地填充视图之间的间距
  • equalCentering根据排列视图中心点之间的相同间隔填充

alignment:

alignment即对齐方式:(垂直于排列方向)

  • fill填充排列视图到StackView的可用空间
  • topStackView的顶部排列(与之相似的是leading
  • bottomStackView的尾部排列(与之相似的是trailing
  • centerStackView的中间排列
  • firstBaseline以第一个基准线排列
  • lastBaseline以最后一个的基准线排列

如需设置排列视图之间的间距可以通过设置space属性,若是排列视图之间的间距不同,可以使用方法指定某个排列视图的间距(此方法iOS11以上使用),或者使用一个无用的view插入在视图之间替代间隙,此view仅作为间距使用(使用xibStoryboard会经常使用此类方法,可以参照)。

当你真的了解UIStackView的这些布局思想之后,你就会知道它能帮你解决很多繁琐的布局。(如一个多变的底部操作栏、一行大小各异的控件等等)

从上面的布局思想中,不难看出,其实我们仅需要确定StackView的排列方向,以及排列方式、对其方式,就能大体上对整个排列视图初步的布局,而后在根据不同的视图进行大小上的调整以及间距的调整即可。

使用UIStackView来自动布局子视图,你只需要每个子视图关注自身的大小即可。

以此类操作栏为例,举个栗子

用户评论