• 概念:一个用于堆叠视图的容器 , iOS9 的API , 适用于通用设备开发

用途:StackView及其子视图可以进行界面自适应 --> 用于"减少"设置约束的工作量

特点:

1. 类似于ContainerView,不能在界面上进行渲染
2. StackView中的子视图只能朝一个方向进行排队 (水平/垂直)
3. StackView可以进行嵌套
4. StackView自适应的优先级要低于手动设置约束(使用StackView后不能再通过frame来改变尺寸),可以通过设置约束来调整StackView进行的自适应处理
5. StackView支持属性动画
6. 不能滚动

• UIStackView 基本布局属性:

StackVIew_property.png

1.Axis : 轴 --> 用于设置子视图的排列方向 (水平/垂直)

2.Aligment : 对齐 --> 用于设置子视图的对齐方式 ,根据Axis

    2.1. horizontal:    fill     填充(垂直填满)
                        top      顶部对齐
                        center   居中对齐
                        bottom   底部对齐

                          基线(只适用于Label类型子视图)
                        First Baseline 第一行文字的基线对齐
                        Last Baseline  最后一行文字的基线对齐

    2.2. Vertical       fill     填充(横向填满)
                        leading  左对齐
                        center   居中对齐
                        traling  右对齐

2.1 水平方向对齐方式

horizontal - fill: 子视图在排列的垂直方向上填满容器

alignment_fill.png

horizontal - top: 子视图在排列方向上顶部对齐

alignment_top.png

horizontal - center: 子视图在排列方向上居中对齐

alignment_center.png

horizontal - bottom: 子视图在排列方向上底部对齐

alignment_bottom.png

horizontal - First Baseline: Label子视图基于第一行文字的基线对齐,只适用于Label

alignment_firstBaseline.png

horizontal - Last Baseline:Label子视图基于第最后一次行文字的基线对齐,只适用于Label

alignment_lastBaseline.png

2.2 垂直方向对齐方式

Vertical - fill:子视图在排列的水平方向上填满容器(与水平方向原理一直)

Vertical - leading: 子视图在排列方向上左对齐

alignment_leading.png

Vertical - center:子视图在排列方向上居中对齐(与水平方向原理一直)

Vertical - traling: 子视图在排列方向上右对齐

alignment_trailing.png

3.Distribution : 分布 --> 用于设置子视图的分布(排列方向上的填充方式)

    3.1. fill                   填充
    3.2. fill Equally           子视图等尺寸填充
    3.3. fill Proportionally    子视图按原始比例填充
    3.4. Equal Spacing          排列方向上子视图等间距
    3.5. Equal Centering        排列方向上子视图中心店之间的距离等间距

Distribution - __ Fill__: 子视图在排列方向上填满容器

distribution_fill.png

Distribution - __ Fill Equally__: 子视图在排列方向上填满容器,且按相等尺寸分布

distribution_fillEqualy.png

Distribution - __ Fill Proportionally__: 子视图在排列方向上填满容器,且按原始比例分布

distribution_fillProportion.png

Distribution - __ Equal Spacing__: 排列方向上子视图等间距

distribution_equalSpacing.png

Distribution - __ Equal Centering__: 排列方向上子视图中心点之间的距离等间距

distribution_equalCentering.png

4.Spacing : 设置子视图之间的间距

Baseline Relative 勾选后变成基于基线(默认基于子视图) --> 基线之间距离,就是垂直方向两条基线的距离