再谈布局之 UIStackView

时间:2024-04-03 10:06:26

UIStackView 是 iOS9 新增的一个布局技术。熟练掌握相当节省布局时间。

UIStackView 是 UIView 的子类,是用来约束子控件的一个控件。但他的作用仅限于此,他不能被渲染(即用来呈现自身的内容),类似于 backgroundColor 等。

这个控件只有4个属性:

  • Axls: 子控件的布局方向,水平或者垂直;
  • Alignment: 设置非轴方向子视图的对齐方式,类似于 UILabel 的 Alignment 属性;
  • Distribution: 子控件的分布比例;
  • Spacing: 控制子视图之间的间隔大小。

因为比较简单,属性具体不作详细解释。下面以实例形式展示 UIStackView 的用法。

要使用 UIStackView,可直接向 storyboard 中拖入 UIStackView 控件,然后向控件中拖入其他控件进行相关设置,也可在先拖入其他控件后点击下图所示的按钮将其整合成 stack:
再谈布局之 UIStackView

下面展示将两个按钮等宽且水平平铺且间距为20摆放:
再谈布局之 UIStackView

完成后,此时若往 StackView 中再拖入按钮,则会自动平铺如下(不必作其他改变):
再谈布局之 UIStackView

在设置完按钮属性后,只需对外层的 StackView 进行约束布局即可。另外,UIStackView 是支持嵌套的,利用这一点,可以布局更加复杂的 UI 。

由此可延伸布局更复杂的视图,下图为例(详细的布局步骤不再赘述):
再谈布局之 UIStackView

如果后续想再往视图中添加控件,直接拖入即可自动铺放,无需重新设置 StackView 内部的约束,这给布局带来的很大的方便和较好的扩展性(若未使用 UIStackView,由于多个控件之间往往是相互依赖的,则之前的布局可能会因为一个控件的改变而发生较大的变化)。

这只是对 UIStackView 的一个简单的引入和讲解,后续会根据需求逐步深入。