Marc StevenCoder
Jul 30, 2017 · 4 min read

stackView十分强大,因此采用嵌套的方式可以做很多复杂的布局,这的确听起来不可思议,但是确实是真的。

Distribution

屏幕快照 2017-07-30 下午3.22.51

fill

描述了沿着一个stackView的Axis去安排元素
默认值为fill

屏幕快照 2017-07-30 下午3.08.31

这将使用视图本身content的size,但是它们grow或者缩减则依赖于content hugging 优先级或者compression resistance 优先级,如果在优先级中,有一个同样的等级,这个stack View
重新指定第一边的大小(在排好的子视图数组内)

fill equality

屏幕快照 2017-07-30 下午3.13.29

== Fill equality

它是仅有的一个不适用子视图本身content size,它仅仅使得它们沿着这个stack view的axis同样的size

fill proportionally

屏幕快照 2017-07-30 下午3.18.51

fill proportionally 以本身content size开始,但是然后以比例的方式去增长或者压缩子视图到它们的本身size。

equal spacing

屏幕快照 2017-07-30 下午3.29.45


equal space 以本身content size开始,如果在stack view内哪里有一个额外的空间,它在视图之间均等地进行切割
如果stackView比需要的小,它在视图之间使用spacing属性去保持最小的间隔。但是然后缩小视图中的一个-使用comression resistance。再者,使用排好的子视图去打破平局

equal centering

屏幕快照 2017-07-30 下午3.35.33
equal center 和equal space是相似的,但是替代了在视图之间的space是相等的。它使得从中心到中心的距离是相等的。

对齐

屏幕快照 2017-07-30 下午3.41.05


使用alignment属性,你配置然如何直立地放置视图到axis。因此,对于垂直的,你可以对齐到视图的leading,center。trailing边缘。
在这些场景中的每个,如果可能,它将使用本身的宽度去决定size。
对于一个水平的stackView,你能对齐top,bottom,center的边缘,它将使用本身的高度去决定size。
默认值是fill。
在垂直线的方向上,将会重新指定每个视图的大小到axis,为了填充这个stack view全尺寸。然后仅仅对于水平对齐,你能通过它们的first baseLine或者last baseline去对齐视图。当然这仅仅有用-对于包含文本的视图,例如label或者textView。

stack view嵌套

什么使得stack view如此有用?
这是因为许多设计有整列的视图组。

屏幕快照 2017-07-30 下午3.55.45


当然,并不是屏幕上的每个视图都将有同样的对齐。这就是它的另外的一个特写- nesting
在彼此之间嵌套stack view的方式,你可以创建整列的组,然后用彼此来排列出这些groups。这种类型的布局是十分容易去创建(相比较手动创建约束而言),这是一个尝试去创建这种类型的布局,但是如果没有stackViews,它将十分复杂。

Written by

Write the codes,change the world.Struggle for codes. Living and working in China. Do myself and then do my best . Time is the best evidence to prove anything.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade