• 概念:一個(gè)用于堆疊視圖的容器 , iOS9 的API , 適用于通用設(shè)備開發(fā)

用途:StackView及其子視圖可以進(jìn)行界面自適應(yīng) --> 用于"減少"設(shè)置約束的工作量

特點(diǎn):

1. 類似于ContainerView,不能在界面上進(jìn)行渲染
2. StackView中的子視圖只能朝一個(gè)方向進(jìn)行排隊(duì) (水平/垂直)
3. StackView可以進(jìn)行嵌套
4. StackView自適應(yīng)的優(yōu)先級(jí)要低于手動(dòng)設(shè)置約束(使用StackView后不能再通過(guò)frame來(lái)改變尺寸),可以通過(guò)設(shè)置約束來(lái)調(diào)整StackView進(jìn)行的自適應(yīng)處理
5. StackView支持屬性動(dòng)畫
6. 不能滾動(dòng)

• UIStackView 基本布局屬性:

StackVIew_property.png

1.Axis : 軸 --> 用于設(shè)置子視圖的排列方向 (水平/垂直)

2.Aligment : 對(duì)齊 --> 用于設(shè)置子視圖的對(duì)齊方式 ,根據(jù)Axis

    2.1. horizontal:    fill     填充(垂直填滿)
                        top      頂部對(duì)齊
                        center   居中對(duì)齊
                        bottom   底部對(duì)齊

                          基線(只適用于Label類型子視圖)
                        First Baseline 第一行文字的基線對(duì)齊
                        Last Baseline  最后一行文字的基線對(duì)齊

    2.2. Vertical       fill     填充(橫向填滿)
                        leading  左對(duì)齊
                        center   居中對(duì)齊
                        traling  右對(duì)齊

2.1 水平方向?qū)R方式

horizontal - fill: 子視圖在排列的垂直方向上填滿容器

alignment_fill.png

horizontal - top: 子視圖在排列方向上頂部對(duì)齊

alignment_top.png

horizontal - center: 子視圖在排列方向上居中對(duì)齊

alignment_center.png

horizontal - bottom: 子視圖在排列方向上底部對(duì)齊

alignment_bottom.png

horizontal - First Baseline: Label子視圖基于第一行文字的基線對(duì)齊,只適用于Label

alignment_firstBaseline.png

horizontal - Last Baseline:Label子視圖基于第最后一次行文字的基線對(duì)齊,只適用于Label

alignment_lastBaseline.png

2.2 垂直方向?qū)R方式

Vertical - fill:子視圖在排列的水平方向上填滿容器(與水平方向原理一直)

Vertical - leading: 子視圖在排列方向上左對(duì)齊

alignment_leading.png

Vertical - center:子視圖在排列方向上居中對(duì)齊(與水平方向原理一直)

Vertical - traling: 子視圖在排列方向上右對(duì)齊

alignment_trailing.png

3.Distribution : 分布 --> 用于設(shè)置子視圖的分布(排列方向上的填充方式)

    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__: 排列方向上子視圖中心點(diǎn)之間的距離等間距

distribution_equalCentering.png

4.Spacing : 設(shè)置子視圖之間的間距

Baseline Relative 勾選后變成基于基線(默認(rèn)基于子視圖) --> 基線之間距離,就是垂直方向兩條基線的距離