iOS线性流式布局-UIStackView

UIStackView是在iOS9推出的，最近项目中刚好用到，对UIStackView的使用和一些属性做一个记录。

简介

A streamlined interface for laying out a collection of views in either a column or a row.

这是苹果官方对这个UI控件的定义，翻译过来就是一个用于在列或行中布置视图集合的流线型界面。我们可以用UIStackView创建自动适配屏幕方向、屏幕大小等变化布局视图。

关键属性

主要介绍几个使用时会大概率用到的属性。

axix属性

这个很好理解，就是确定视图的布局方向，有两个取值：

public enum Axis : Int {
    case horizontal = 0
    case vertical = 1
}

看字面就知道其意思，horizontal表示水平布局，vertical表示垂直布局。

spacing

每个arranged view之间的空隙。

distribution属性

决定了axix设置值方向的布局，有五种取值：

public enum Distribution : Int {
      case fill = 0
      case fillEqually = 1
      case fillProportionally = 2
      case equalSpacing = 3
      case equalCentering = 4
 }

• fill:arranged views会改变size以用来填满stack view的axis方向的空间,如果arranged views在stack view空间内不能显示完整，arranged views会等比例缩小，如果arranged views不能填充满stack view,views将会拉伸以填充满。

  

• fillEqually: arranged views会自动适配大小，以填充满axis方向的空间，所有arranged views在axis设置的方向上长度相等。

  

• fillProportionally：arranged views会自动适配大小，以填充满axis方向的空间，arranged views在axis设置的方向上长度会根据它们实际的大小比例缩放或拉伸。

  

• equalSpacing:arranged views会自动适配大小，以填充满axis方向的空间，这里和fill不同的是，如果arranged views不能填充满stack view，每个view之间会添加相同长度的space,同样如果arranged views在stack view`空间内不能显示完整，arranged views会等比例缩小。

  

• equalCentering：每个arranged views在axis方向上中心点的距离相等。

  

alignment 属性

这个决定了view在axis设置方向的垂直方向的布局，有六个枚举值：

public enum Alignment : Int {
     /* Align the leading and trailing edges of vertically stacked items
      or the top and bottom edges of horizontally stacked items tightly to the container.
      */
     case fill = 0
     /* Align the leading edges of vertically stacked items
      or the top edges of horizontally stacked items tightly to the relevant edge
      of the container
      */
     case leading = 1
     public static var top: UIStackView.Alignment { get }
     case firstBaseline = 2 // Valid for horizontal axis only

     /* Center the items in a vertical stack horizontally
      or the items in a horizontal stack vertically
      */
     case center = 3
     /* Align the trailing edges of vertically stacked items
      or the bottom edges of horizontally stacked items tightly to the relevant
      edge of the container
      */
     case trailing = 4
     public static var bottom: UIStackView.Alignment { get }
     case lastBaseline = 5 // Valid for horizontal axis only
    }

• fill:arranged views会改变size以用来填满stack view的axis垂直方向的空间。

  

• leading/top:

  • leading：axis设置为vertical时生效，垂直axis方向上居前对齐。

    

  • top：axis设置为horizontal时生效，垂直axis方向上居上对齐。

    

• firstBaseline：axis垂直方向首行以baseline对齐，仅axis设置为vertical时生效。

  

• center：中间对齐。

  

• trailing/bottom:

  • trailing：axis设置为vertical时生效，垂直axis方向上居后对齐。

    

  • bottom：axis设置为horizontal时生效，垂直axis方向上居底对齐。

    

• lastBaseline：末尾baseline对齐仅axis设置为horizontal时生效。

  

用法

UIStackView特别适合那种视图个数不定的场景，例如一行显示的元素个数受数据源状态字段的影响。

• 实例化UIStackView的一个实例：

  let stackView = UIStackView(frame: CGRect.init(x: 15, y: 40, width: 350, height: 30))
  stackView.axis = .horizontal///水平方向
  stackView.spacing = 10.0///每个view间距
  stackView.distribution = .fillEqually///等宽

• 向UIStackView中添加子arranged view：

  stackView.addArrangedSubview(label1)
  stackView.addArrangedSubview(label2)
  stackView.addArrangedSubview(label3)

• 改变外界数据条件，以隐藏一个arranged view:

  isHideLabel2 = !isHideLabel2///外部数据条件
  label2.isHidden = isHideLabel2///修改隐藏

  注意这里有一个细节，就是当arranged view的isHidden属性设置为false的时候，stackView会自动调整布局。

• 如果我们需要动画效果，也可以通过UIView的方法添加：

  isHideLabel2 = !isHideLabel2
  UIView.animate(withDuration: 0.25) {
      self.label2.isHidden = self.isHideLabel2
  }

显示的效果：

隐藏的效果：

总结

这里主要介绍了UIStackView的一些常用属性，和一个简单的用法，如果有更好的用法或者写的不准确的地方欢迎批评指正。