小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
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方向上居后对齐。
- trailing: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
的一些常用属性,和一个简单的用法,如果有更好的用法或者写的不准确的地方欢迎批评指正。