第二部请看: 上篇我决定把它写成“手把手教你如何做”的文章,写完回去一看,发现篇幅确实有点太长了,光配图就有四十多张。这次我不会像上篇那样手把手的教你怎么做,因为具体的操作的方法在上篇文章里面也讲的很详细了。下面就进入正题。 在上一篇文章中,为了让最后的三个第三方登录按钮的间距能够根据屏幕的宽度自动调整,我先添加了一个组,再在组里面添加约束,弄的很复杂,而且这种方法也有一定的局限性。 我在上篇文章就讲过,这个问题有更简单的解决方案。这个东西叫做StackView,在我之前讲过的添加约束的方式中,第一个按钮就是。 它可以让你不用添加约束就能使用Autolayout里的很多功能,以后维护起来也会更方便。和上篇文章讲的一样,先拖出三个按钮放好,这次不用给他们先放到一个组里,只要三个一起选中后,点击上面说过的Stack按钮,就将他们放进了一个StackView里了,你可以理解为对它们进行了编组。 编组后发现三个按钮变成垂直排列的同学先不要急,后面我会讲到如何把它们变成水平分布的。这样我们就将它们都放到了一个组里了,接下来先给这个组添加约束,和之前用的方法一样。组的宽度还是设置为屏幕宽度的0.6倍。添加完成后变成这样了。 但是里面的按钮并没有和我们想象的一样平均分布,在上篇文章中,我们添加了很多约束,将这些按钮固定在了组里的某些特定的位置。你也可以在StackView里面添加约束,但是这里我们完全没必要这么做。我们只要选中整个StackView,就能在右边栏看到它的属性了。只要修改一个选项就能达到我们要求的效果。 下面我就解释一下这些选项代表的是什么意思。 第一个: Aixs 定义的是这个组的分布方向,我们三个按钮是水平分布的,所以这里不需要修改,如果你编组后他们是垂直分布的,只需要在这里将它们改成Horizontal就行了。 第二个 :Alignment定义的是组内元素的对齐方式,你可以在这里设置上对齐,下对齐之类的,因为这三个按钮大小是一样的,所以对齐方式也无所谓了,使用默认的就行。 第三个:Distribution定义的是他们的分布方式,我们只要在这里选择equal spaceing 就能让他们平均分布了。 第四个 :Spacing是用来定义相邻元素之间的距离的,你可以在后面的输入框中输入你想要的数值。 修改好了Distribution后,我们的工作就完成了。 StackView的威力不限于此,假设现在产品经理屁颠屁颠地跑来和你说,我们又多了一个第三方登录的渠道,需要加上去。如果你使用的是我在上篇文章中的做法,那么现在你必须从头来过,而且那种将三个按钮放在最左,中间,最右的做法也完全失效了,必须得想出新的办法来。 而如果你使用的是StackView,那这个问题完全不叫什么问题,你只要从控件库里面拖出一个新的按钮,直接扔到这个StackView里面就行了,其他的东西都是自动帮你搞定的。 再讲一个StackView的实际应用,假设我们设计了这样一个页面,想象一下,如果你一个个的去添加约束的话,会是一件多么麻烦的事情,而当需要在中间在插进一行新的内容的时候,那会让你更加痛苦。 而如果你使用的是StackView的话,这一切都变的非常简单。首先你将左边的一整列都放进一个StackView里面,这时候的Aixs应该是Vertical,在Alignment里将对齐方式改为Trailing(尾对齐),然后Spacing里面调整一下行间距就可以了。 用同样的方式将右边的文字也都放进一个StackView里面,Alignment里设置Leading(首对齐),将Spaceing里的数字调整到和左边的一样。 (责任编辑:本港台直播) |