iOS9新特性 - UIStackView

该文章属于< — 刘小壮>原创,转载请注明:

< — 刘小壮> http://www.jianshu.com/p/173f25d35ddc


iOS9新特性 - UIStackView_第1张图片
占位图

什么是UIStackView?

iOS9中苹果在UIKit框架中引入了一个新的视图类UIStackViewUIStackView类可以帮我们布局UI控件,而我们不需要设置任何约束或设置很少的约束就可以,其他都由UIStackView帮我们自动完成了。

UIStackView提供了两个方向的约束,垂直布局和水平布局,我们可以通过UILayoutConstraintAxis枚举值来查看两种布局方式。

如果初学者来学习UIStackView比较抽象,不太好接触这个新的控件,而且很容易出错,先看一下下面这个GIF来初步了解一下这个控件吧。

动态图

UIStackView

Interface Builder中使用UIStackView就类似于使用一个UI控件一样,通过让将其他视图成为UIStackView的子视图来进行布局的,UIStackView也可以嵌套多个UIStackView

值得注意的是,UIStackView虽然继承自UIView,但是并不参与屏幕的渲染,重写drawRect:方法也是无效的。

UIStackView继承链条,自身特性等信息
iOS9新特性 - UIStackView_第2张图片
配图
枚举值

Interface Builder中的UIStackView控件,右侧设置面板中提供了一些选项,这些设置是对应着代码中的枚举值的:

  • Axis
    Horizontal -> UILayoutConstraintAxisHorizontal
    水平方向布局
    Vertical -> UILayoutConstraintAxisVertical
    垂直方向布局
  • Distribution
    Fill -> UIStackViewDistributionFill
    填充整个UIStackView,并且根据内部子视图尺寸对子视图尺寸进行动态调整。
    Fill Equally -> UIStackViewDistributionFillEqually
    根据视图大小平均分配UIStackView尺寸,等比例填充UIStackView,过程中会根据分配的大小改变子视图尺寸。
    Fill Proportionally -> UIStackViewDistributionFillProportionally
    根据之前的比例填充UIStackView
    Equal Spacing -> UIStackViewDistributionEqualSpacing
    填充整个UIStackView,子视图没有占满UIStackView将会用空白平均填充子视图中间的间距,超出UIStackView将会根据arrangedSubviews数组下标压缩子视图。
    Equal Centering -> UIStackViewDistributionEqualCentering
    平均分配子视图得到每个视图的中心点,使用这个中心点来布局每个子视图,并且保持spacing距离,超出将会重新布局子视图,并压缩部分子视图。
  • Alignment
    Fill -> UIStackViewAlignmentFill
    视图纵向填充
    Top -> UIStackViewAlignmentTop
    视图向上对其(适用于Horizontal模式)
    Center -> UIStackViewAlignmentCenter
    视图居中对其
    Bottom -> UIStackViewAlignmentBottom
    视图向下对其(适用于Horizontal模式)
    First Baseline -> UIStackViewAlignmentFirstBaseline
    根据上方基线布局所有子视图的y值(适用于Horizontal模式)
    Last Baseline -> UIStackViewAlignmentLastBaseline
    根据下方基线布局所有子视图的y值(适用于Horizontal模式)
    trailing -> UIStackViewAlignmentTrailing
    视图向左对齐(适用于Vertical模式)
    leading -> UIStackViewAlignmentLeading
    视图向右对齐(适用于Vertical模式)
  • spacing
    spacing -> CGFloat spacing
    子控件之间的最小距离

可以根据下面的图片结合上面的枚举值联系起来比较好理解


iOS9新特性 - UIStackView_第3张图片
布局样式
arrangedSubviews数组

UIStackView使用arrangedSubviews数组来管理子视图。需要注意的是这个数组是一个readonly的属性,我们需要调用方法对arrangedSubviews数组进行操作。

初始化数组:
- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;
添加子视图:
- (void)addArrangedSubview:(UIView *)view;
移除子视图:
- (void)removeArrangedSubview:(UIView *)view;
根据下标插入视图:
- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;

小试牛刀

我们可以从Interface Builder右侧的操作面板中,选择UIStackView控件直接拖到XIB中。可以选择HorizontalVertical两个方向的UIStackView,也可以在拖到XIB中之后手动修改。

iOS9新特性 - UIStackView_第4张图片
示例图片

然后将两个View拖到这个UIStackView中,父视图也可以将UIStackView作为子视图来进行多层UIStackView嵌套,这也是苹果推荐的做法。

iOS9新特性 - UIStackView_第5张图片
示例图片

打开右侧设置面板来设置UIStackView的一些属性,达到更好的布局效果。

iOS9新特性 - UIStackView_第6张图片
示例图片

除了上面的方法也可以在XIB中直接选择多个View,然后点击右下方的Stack按钮,系统会自动推断布局方式,帮我们自动布局子视图,我们可以在系统布局之后在手动进行调整。

iOS9新特性 - UIStackView_第7张图片
示例图片

代码布局其实本质上就是对数组进行操作,数组中存储的是UIStackView的子视图。然后通过设置UIStackView的枚举值属性进行页面排布。代码布局的方式这里就不演示了。。。

UIStackView和NSLayoutConstraint布局转换

如果你之前的项目中已经有约束,只需要将添加UIStackView管理UI控件约束清除。选中需要添加的UI控件,点击右下方的Stack按钮就可以。

iOS9新特性 - UIStackView_第8张图片
点击按钮

你可能感兴趣的:(iOS9新特性 - UIStackView)