开始拥抱UIStackView 吧(一)

前言


在iOS 9 前如果你要使用Auto Layout 实现一个线性布局,或者一些复杂布局页面,需要你添加很多约束,但是iOS 9 后有了UIStackView,彻底简化的Auto Layout 布局的约束,但是刚推出来的时候绝大多数App 还是要适配iOS8。

然而现在基本都放弃了iOS8的支持,那没有任何理由拒绝这个布局神器。


UIStackView 简介

UIStackView 可以让我使用Auto Layout的强大功能,能够轻松创建适配屏幕旋转,屏幕大小,动态布的用户界面,是它会自动为每个subview创建和添加Auto Layout constraints。当然你可以控制subview的大小和位置。可以通过选项配置subview的大小、排布以及彼此间的间距。

布局属性

可以在Storyboard 里UI组件控制器中搜索 UIStackView

开始拥抱UIStackView 吧(一)

我们会方向有两个方向的StackView 一个是水平方向的,一个是垂直方向的。

我们拖拽一个横屏的stack view 到故事版中。然后在右边属性管理器中观看它的基本属性

 开始拥抱UIStackView 吧(一)

一图胜过千言万语。

开始拥抱UIStackView 吧(一)

 Axis:有两个选项,用来设置stack view 水平 还是垂直样式。

Alignment:  用来设置子视图垂直方向的布局,有下面6个属性可选择

1. Fill: 填充满所在的父类stack view

开始拥抱UIStackView 吧(一)

2. Top: 顶部对齐 所在的父类stack view

开始拥抱UIStackView 吧(一)

3. Center  中间对齐 所在的父类stack view

开始拥抱UIStackView 吧(一)

4. Bottom  底部对齐 所在的父类stack view

开始拥抱UIStackView 吧(一)

5. First Baseline  首行基线对齐 所在的父类stack view

开始拥抱UIStackView 吧(一)

6. First Baseline  末尾基线对齐 所在的父类stack view

开始拥抱UIStackView 吧(一)

Distribution:用来设置子视图水平方向的布局,有下面5个属性可选择

1. Fill:水平填充满。

开始拥抱UIStackView 吧(一)

2.  Fill Equally:水平相等 填充满。

开始拥抱UIStackView 吧(一)

3. Equal Spacing:  stack view 子视图之间Spacing 相等,这个spacing 一定大于默认是设置的spacing

开始拥抱UIStackView 吧(一)

4. Equal Spacing: 每个子视图中心线之间距离相等

开始拥抱UIStackView 吧(一)

5. Fill Proporttionally: 按照每个子视图等比例填充满。

开始拥抱UIStackView 吧(一)

Spacing:每个子视图之间间距。