UIStackView的妙用

2016-11-13  本文已影响0人  jack2gs

UIStackView简介

UIStackView是iOS 9+支持的布局控件,主要用于线性布局,可以简化布局,减少约束的使用。之前学过些WPF,它也有一个类似的布局控件。不得不说用起来确实很方便。

应用场景

主要用于线性布局,支持横向和纵向

主要属性

本文没有涉及最后两个属性。

为什么要使用UIStackView

UIStackView可以在一定程度上减少约束,简化布局,并且使用灵活。在下一节,我将用两种布局思路实现一个简单的登录界面。

使用UIStackView需要注意的地方

使用UIStackView实现简单的登录界面

这一节,我将使用两种思路实现一个简单的登录界面。思路一参照 Auto Layout Guide,将一个UILabel和一个UITextField放入到同一个UIStackView中,也就是有几行就会有几个UIStackView我称之为以行为主。思路二,将所有的UILabel放入到一个UIStackView中,将所有的UITextField放入到一个UIStackView中,也就是有几列数据就会有几个UIStackView,我称之为以列为主。

思路一:以行为主

这种思路参照了Auto Layout Guide,比较容易想到。每当需要添加一行时,添加一个UIStackView就好了,如下图所示:

以行为主

图中,

需要的约束有:

  1. 对于最外层的UIStackView,为垂直方向布局:
  1. 对于所有的UILabel
  1. 对于所有的UITextField

思路二:以列为主

这种思路以列为先,有几列数据就设置几个UIStackView

以列为主

需要的约束有:

  1. 对于最外层的UIStackView,为垂直方向布局:
  1. 对于所有的UILabel
  1. 对于所有的UITextField
  1. 对于所有的子UIStackView

另外,需要注意的是,为了使UILabelUITextField更好地对齐,需要设置UILabel所在的UIStackViewDistribution为 * Fill Equally*。

对比

上述两种思路均可以达到目的,复杂性也比较类似。但是就灵活性而言,思路二更好一些。每当需要添加或删除一行时,思路一可能需要重新设置宽度约束,而思路二不需要调整约束。但是,Content Hugging的优先级二者都需要考虑。

讨论

苹果引入UIStackView的初衷是为了降低布局的复杂度,并建议优先采用它解决布局问题。从本文可以看出,UIStackView的使用比较简单,可以手动额外添加所需的约束,比较灵活。此外,本文中还有其他一些UIStackView特性没涉及到,比如说动态添加元素等,你可以参考下官方的文档。项目示例代码见GitHub

参考文献

  1. Auto Layout Guide
  2. UIStackView
上一篇 下一篇

猜你喜欢

热点阅读