初识UIStackView

Stack View提供横向和纵向的线性布局功能，管理着所有在它的 arrangedSubviews数组中的所有子视图，会自动对这些子视图进行布局处理。

属性

stackView中的布局情况是根据其axis,alignement,distribution,spacing等其他属性共同决定。

a. Axis：stackview布局的轴向，分为垂直和水平

uistackview-axis

b. Alignment:决定了Stack View如何沿它轴向的垂直方向摆放它的subview,水平轴向和垂直轴向会有所不同。

UIStackViewAlignment	含义	展示
UIStackViewAlignmentFill	在StackView轴向的垂直方向上拉伸所有子view来填充StackView	uistackview-align-fill
UIStackViewAlignmentLeading	用于stackview是垂直轴向时，所有子view靠左对齐	uistackview-align-leading
UIStackViewAlignmentTop	用于stackview是水平轴向时，所有子view靠顶部对齐	uistackview-align-top
UIStackViewAlignmentCenter	在StackView轴向的垂直方向上子视图以中线为基准对齐	uistackview-align-center
UIStackViewAlignmentTrailing	用于stackview是垂直轴向时，所有子view靠右对齐	uistackview-align-trailing
UIStackViewAlignmentBottom	用于stackview是水平轴向时，所有子view靠底部对齐	uistackview-align-bottom
UIStackViewAlignmentFirstBaseline	用于stackview是水平轴向时，按照第一个子视图中文字的第一行对齐	uistackview-align-firstBaseline
UIStackViewAlignmentLastBaseline	用于stackview是水平轴向时，按照最后一个子视图中文字的最后一行对齐	uistackview-align-lastBaseline

c. Distibution:决定子视图的分布比例

UIStackViewDistribution	含义	展示
UIStackViewDistributionFill	默认，在StackView轴向延伸方向上缩放子View，使得所有子View能填充完StackView，如果子Views超出StackView，根据其compression resistance 优先级进行压缩；如果子Views不能填充完StackView，根据于其hugging优先级进行放大；如果相等的话，则按照arrangedSubviews数组中index顺序	uistackview-distrubute-fill
UIStackViewDistributionFillEqually	在StackView延伸方向上使每个子View都一样长	uistackview-distrubute-fillequal
UIStackViewDistributionFillProportionally	在StackView延伸方向上根据子View的实际内容按比例进行缩放	uistackview-distrubute-fillProp
UIStackViewDistributionEqualSpacing	在StackView延伸方向上将子Views间隔相等的空白进行缩放，如果子Views不能填充完StackView，则用空白填充子views之间；如果子Views超出StackView，则根据compression resistance优先级进行压缩；如果相等的话，则按照arrangedSubviews数组中index顺序	uistackview-distrubute-equalSpacing
UIStackViewDistributionEqualCentering	在StackView延伸方向上将子Views的中心线等距进行缩放，如果子View不能填充完StackView，则用空白填充子views之间；如果子View超出StackView，先缩小子views间隔直到其spacing属性定义的最小值；若还是超出，则根据compression resistance优先级进行压缩；如果相等的话，则按照arrangedSubviews数组中index顺序	uistackview-distrubute-equalCenter

d. Spacing:决定子视图的间隔距离
e. 如下图是 水平轴向的stackview属性标注

水平轴向的stackview属性标注

实现

stroyboard中利用stackview

1. 效果展示

   
   
   

   stackview展示01
   
   
   

   stackview展示02

2. 屏幕适配Size Classes

   
   
   

   stackview展示03-1
   
   
   

   stackview展示03-2

将屏幕横过来效果并不是很好，可以借用size classes实现成这样：

stackview展示03-3

sizeclass是对设备的一种抽象。它不再有尺寸、横屏和竖屏的概念，把设备分为紧凑Compact、普通Regular，ios设备和对应的size classes如下图：

sizeclass

ipad是 regular width + regular height

横屏的iphone 6 Plus是 regular width + compact height

竖屏的iphone是 compact width + regular height

横屏的iphone是 compact width + compact height

所以实现上述效果需要在compact height时，stackview的由垂直轴向改为水平，如下图所示

modify

ios7兼容

官方的UIStackView是在iOS9以上系统才可以可以使用，但是有开源代码提供了ios7以上的系统实现了相应的功能：
OAStackView 基于objective-c实现

TZStackView 基于swift实现

参考资料

Stack Views 翻译版

size classes design help

初探 iOS8 中的 Size Class

iOS 9 UIStackView Free Tutorial

UIStackView教程：了解Stack View

Auto Layout Tutorial in iOS 9

UIStackView Tutorial: Introducing Stack Views 翻译版