今天博主有一个UIStackView的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步.
Stack View提供了横向和纵向的线性布局功能。当多个view被嵌入到StackView,你不再需要去为这写个view去定义布局约束,StackView会自动对这些子视图进行布局处理,也就是说,你无需任何约束就可以让一部分view自动适应所有设备(前提是这些视图必须被放在stackview内),当然,这并不是说你不需要去使用autolayout,这只是在stackview内部而已。
![](https://i-blog.csdnimg.cn/blog_migrate/d0af39be45ebbd802e31230a0fda8ae9.png)
Xcode7 提供了横向和纵向的statckview供我们使用,直接可以在InterfaceBuilder目标列表里面找到,你可以拖动它们到storyboard的视图里面去,通过这节课你讲很快理解我所说的这些。
实例APP
我们首先来看看我们的demo,这节课将教会你通过Xcode7在几分钟内甚至几十秒内完成这样一个适用于所有设备的页面。
![](https://i-blog.csdnimg.cn/blog_migrate/01c2a99f014c44b85b706d1c9cd94dd8.png)
虽然你可以通过其他方式制作出来同样的效果,但是使用StackView制作这样的效果一行代码都不需要哦!
开始之前,请下载初始化项目,你可能需要Xcode7 bate4(或更高)。
注,原文中初始项目在dropbox上,这里的项目是译者放在百度网盘上的。
项目中的图片来自于[magdeleine.co](magdeleine.co "magdeleine.co").
添加Stack View
打开项目之后,添加一个StackView(纵向)到storyboard以用于包含图片。
![](https://i-blog.csdnimg.cn/blog_migrate/37ed59941af4f9ded1b77c87d7d29b4c.png)
接下来,放置一个ImageView到StackView里,这个时候你会发现imageview自动填充了这个stackview,接下继续拖入两个imageview,神奇的事情发生了,stackview内的图片都做到了很好的自适应。
为StackView定义布局约束
- 设置stackview顶部,左边和右边的约束
- 设置stackView的告诉和view的高度相同,然后将此布局高度修改为0.7也就是view的70%
![](https://i-blog.csdnimg.cn/blog_migrate/5099ad925b232be2c20b204b61b235bb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b1c504fa7027002c31300fca7031b0f5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/092d4059723e67bba2d27bfa08518d58.png)
设置StackView的属性
在属性栏里设置Distribution属性为fill Equally,可以让stackView内的三个imageview尺寸保持相同。
![](https://i-blog.csdnimg.cn/blog_migrate/8c66fcdea1176e63afcbdd7d3fa8a607.png)
设置图片
指定图片到imageview,他们在项目文件里分别为 nature-1 nature-2 nature-3,设置图片的mode为 Aspect Fill 并且 勾选clicpSubview。
![](https://i-blog.csdnimg.cn/blog_migrate/680988cb4cbad6defea8814108fe0b76.png)
现在你可以运行这个程序,并且可以尝试在不同的设备上运行,在不同的设备上StackView会根据不同的屏幕自动做适配。
使用StackView来设置Label和button的布局
现在,有一些label用来描述图片信息,有两个button用来点赞和分享。那么首先添加两个Label,设置字体和行数并且排列他们。
然后按住command键选择这两个label,点击布局菜单下面的stackview小图标,他们就会被放置在一个stackView里,你可以设置这个stackview的布局和排列的方式(横向或是纵向)以及间距,然后添加两个按钮 分别为Like和Share,同样的操作,把他们放置在stackView里进行布局。最后你还可以把放置按钮的stackview(按钮组)放置到label的stackview里。和标题的Label组成一个Stackview。总之非常灵活。
![](https://i-blog.csdnimg.cn/blog_migrate/3a1cfb135a87123ff8602d2f39988437.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7e9bf71520a4a8b0d3c382ce72d56e92.png)
![](https://i-blog.csdnimg.cn/blog_migrate/488e043dc1ef4b61419fe1c93263cd2a.png)
这样Label和button就可以在stackview内部自适应排列了。
最后,我们再给按钮和label组成的这个stackview设置一下布局约束。
![](https://i-blog.csdnimg.cn/blog_migrate/0306fa69d98d58ebc051ad710a6c3d1e.png)
要保证Label能够永远自适应,最好修改Label的Line为0,LineBreaks设置为Word Wrap。到此为止,已经完成了所有的UI设计工作。现在运行一下APP。
![](https://i-blog.csdnimg.cn/blog_migrate/01c2a99f014c44b85b706d1c9cd94dd8.png)
如果你在iphone上旋转屏幕,布局会变成这样:
![](https://i-blog.csdnimg.cn/blog_migrate/b735b6d1faef6463ce6068042e55eebe.png)
这本本身没什么错,但是我们可以让他更好,比如这样:
![](https://i-blog.csdnimg.cn/blog_migrate/f7758479bb62723d4ab32ff7ab0cfc2a.png)
使用Size Class适配Stack Views
为了实现不同的布局,并让stackview在不同的设备下自适应,我们需要使用size class, 在IOS8文档中详细介绍了size class的概念,下面是IOS设备及size class对应的大小:
![](https://i-blog.csdnimg.cn/blog_migrate/5238c2a82031c5e9725ad402163809c8.png)
我们想让viewstack(图片组)的显示可以根据屏幕的旋转分别呈现为纵向和横向,那么使用下面两个sizeclass:
- Compact width-Compact height
- Regular width-Compact height
现在,选择我们的stackview(图片组)并且在属性框添加属性:
![](https://i-blog.csdnimg.cn/blog_migrate/2191978f6714acdd4ebacd1330d8d7d3.png)
做完这些,重新运行app,我们就实现了上面的效果。
总结
在本教程中,我们演示了如何使用StackView来布局用户界面,它简化了许多工作,仅仅需要做少量的约束便可实现自适应布局。你可能有一个问题,你是否应该使用StackView?那么,Apple官方建议开发人员应优先采用StackView来设计用户界面,然后再根据实际需求来添加约束,因此,开始使用StackView来设计你的用户界面吧,我想你会喜欢上它。
http://www.tuicool.com/articles/ZNFzemM?plg_nld=1&plg_uin=1&plg_auth=1&plg_nld=1&plg_usr=1&plg_vkey=1&plg_dev=1