UIStackView

Posted 2020-06-18 Beche

一、基本概念

1、UIStackView。提供接口用于平铺一行或一列的视图组合，本身不具有展示功能，只能为子视图提供布局约束。horizontal stack view的子视图采用横排布局，vertical stack view的子视图采用竖排布局。

2、axis：轴。horizontal stack view轴线为水平方向，vertical stack view轴线为垂直方向。

3、alignment：对齐（垂直轴线方向，变换子视图的尺寸）。

在horizontal stack view中，存在fill、top、center、bottom4个选项，fill是单方向拉伸子视图，至全部填充满；而top、center、bottom表示不拉伸子视图大小，分别将视图移动到首端、中间、底部。

在vertical stack view中，存在fill、leading、center、trailing4个选项，fill是单方向拉伸子视图，至全部填充满；而leading、center、trailing表示不拉伸子视图大小，分别将视图移动到左边、中间、右边。

4、distribution:分布（轴线方向，变换子视图尺寸）。

1）以fill开头的选项，保证子视图间的间距均为spacing值，反之，则不是。

2）Fill Equally选项调节所有子视图，使之在axis轴向上拥有相同尺寸，以填充 stack 视图；

非Fill Equally的选项，各自采用各自axis轴方向上的 intrinsicContentSize 值。

5、spacing：间距。即子视图之间的最小间距。

 

二、UIStackView自动布局

步骤一：在storyBoard中拖入horizontal/vertical stack view视图，设置视图的约束。(约束其实就是确定上下左右距离其它视图距离，在pin工具中，选择constrain to margins，那么以margins的约束为起点，会出现即使设置居左为0，结果距左还有一段距离)

步骤二：在attributes inspector设置stack view的属性，用来给子视图添加约束。

 

三、问题

如果只有一个子视图，不管如何设置distribution的选项，子视图在axis方向全部填充。

解决方案：

将stack view的alignment设置为center，将stack view的distribute设置为fill euqal，将子视图的UIViewContentMode设置为ScaleAspectFit

给button视图添加点击事件，但是无事件响应

原因：

由于另外一个视图遮住我的button视图，所以button视图没接收到事件触发。