iOS 9 学习系列:UIStack View
http://www.cocoachina.com/ios/20150921/13492.html
在 iOS9 中,Apple 引入了 UIStackView,他让你的应用可以通过简单的方式,纵向或横向的叠放你的 views。UIStackView 采用 auto layout 的方式来管理他的子视图的位置和尺寸。让你更简单的构建自适应的 UI。
如果在 iOS9 之前,你想要创建类似 UIStackView 为你提供的这种布局,你需要构建大量的 constraints。你需要编辑许多诸如边距、高度、x/y 轴的位置,还有它们的依赖关系等。
UIStackView 把这些全部帮你做了。甚至在你添加或者移除某些 view 时,还提供了平滑的动画。当 view 状态改变时,他会自动的改变 layout 的属性值。
使用 UIStackView
现在我们通过创建一个例子来说明怎么使用 UIStackView,最终的代码放在了 Github,你可以下载来研究.我们要创建一个简单的示范,演示 UIStackView 是怎么工作的?这个页面底部有2个segmented controls,用来控制 UIStackView 的对齐和分布的属性。
上面的图片就是我们要创建的示例。如你所见,我们显示了4个朋友的图片,还有2个 segmented controls 在下面。这些 UI 使用了auto layout 布局,可以适配多种尺寸。
一会儿的制作过程,会让你感到惊喜,我们仅仅手动的添加了4个 layout positioning constraints。所有在这个UIStackView中的view都由它自动控制位置。我们一共有4个 UIStackView, 只有第一个我们需要设置一下他的 constraints。这是我们页面中 stackview 所在的位置。
当你从 Interface Builder 中拖拽了一个 vertical stack view 到页面上后,你可以打开它的 constraint 面板,像上图一样编辑它的属性。这会把这个主 stack view 放在页面的中央,正确的位置上。
从 Interface Builder 中拖拽3个 horizontal stack view 到刚才创建好的 UIStackView 中。在最上面的 stack view,包含四个 UIImageView ,每个 imageView 中展示一个我们的朋友的照片。你拖拽四个 UIImageView 到 stack view 中就可以了。每个图片的大小尺寸都是不一样的。为了避免变形,我们给 imageView 的 contentMode 设置为 Aspect Fit。这意味着,不去管图片的尺寸,图片总会以正确的比例展示在 imageView 中。
你可能注意到了,在最终的 demo 中,每个 imageView 之间有个间隔,这是因为设置了 stackView的 spacing 属性为5的原因。在 interface builder 的 attributes inspector 面板可以设置 spacing 的值,同时还可以设置 alignment 和 distribution 的属性。这里我们缺省的设置为 Fill。因为一会儿我们会通过选择 segment 来改变它的值。
另外两个 stackView,同样是 horizontal stack view。非常简单,每个 stack view 中包含一个 label 和一个 segmented control。设置 segmented control为下面的内容。
Distribution
Fill
Fill Equally
Fill Proportionally
Equal Spacing
Equal Centering
Alignment
Fill
Top
Center
Bottom
我们一会儿就能看到,这些属性是如何影响布局的。很多时候,他们的排列方式依赖 contentSize的值。好在,我们这个例子非常简单,image 的大小就是照片的实际大小。
现在我们的 UI 都创建好了。我们需要给 segment 设置选中后的动作。首先把最上面的 stack view 拖拽 outlet 到 viewController 中,命名为 peopleStackView。然后分别拖拽一个 action 给segmented control。在 action 中对 peopleStackView 的 alignment 和 distribution 属性进行调节,对齐和排列方式由用户决定。
你可以看到,我给每个动作加了一个动画的效果,但这不是必须的。如果你移除动画效果,对齐和排列的方式依然会改变。好现在运行一下程序吧。
你可以看到视频中的结果,点击打开视频
尝试着使用不同的排列组合,看一下会是什么结果。它会让你知道UIStackView时多么强大,在不同尺寸的设备上开发用户界面有多方便。
为现有的view,添加UIStackView
如果你想为你现在已经做好的 view 添加 UIStackView,也很简单。先移除掉你的 view 上的constraint,然后选中他们,点击一下 interface builder 的底部右手边,第一个按钮。(就是原来你给 view 添加 constraint 的那些按钮,左边多了一个)。这会立刻把你选中的view,全部放入一个 UIStackView 中。
这会把你原来的布局方式转为stack view的布局方式,由stack view来控制布局。
延伸阅读
想要了解更多关于Xcode7中 UIStackView的内容,推荐阅读 WWDC 2015 的 session 218 Mysteries of Auto Layout, Part 1.在视频前15分钟里,Jason Yao 介绍了 UIStackView,并且现场制作了一个Demo演示如何操作的。
iOS 9 学习系列:UIStack View的更多相关文章
- iOS 9 学习系列:UIStack View (转载)
作者:Nathan_Bao 地址:http://www.jianshu.com/p/1991e6c2881a 在 iOS9 中,Apple 引入了 UIStackView,他让你的应用可以通过简单的方 ...
- iOS/iPhone学习系列、代码教程
part 1--入门: 1. xcode 版本下载 以及 iphone sdk 下载: 最新版本在此下载: http://developer.apple.com/devcenter/ios/index ...
- iOS 9 学习系列:Split Screen Multitasking
http://www.cocoachina.com/ios/20151010/13601.html iOS 9 的一个重大变化就是增加了多任务,这个多任务允许用户在屏幕上同时运行多个 app.有两种形 ...
- iOS 9 学习系列:Storyboard References
http://www.cocoachina.com/ios/20150922/13474.html 如果你曾经使用 interface builder 创建过一个复杂.界面非常多的应用,你就会明白最后 ...
- iOS 9学习系列:打通 iOS 9 的通用链接(Universal Links)
在WWDC 2015 上, Apple 为 iOS 9 宣布了一个所谓 通用链接 的深层链接特性, 视频地址为 [无缝链接到您的 App].虽然它不是一个必须实现的功能, 但还是需要引起一些注意. 在 ...
- iOS 9 学习系列: Xcode Code Coverage
Code coverage 是一个计算你的单元測试覆盖率的工具. 高水平的覆盖给你的单元測试带来信心.也表明你的应用被彻底的測试过了. 你可能写了几千个单元測试,但假设覆盖率不高.那么你写的这套測试可 ...
- iOS学习系列 - 扩展机制category与associative
iOS学习系列 - 扩展机制category与associative category与associative作为objective-c的扩展机制的两个特性,category即类型,可以通过它来扩展方 ...
- 开源中国iOS客户端学习
开源中国iOS客户端学习 续写前言 <开源中国iOS客户端学习>续写前系列博客 http://blog.csdn.net/column/details/xfzl-kykhd.html ...
- MVC学习系列4--@helper辅助方法和用户自定义HTML方法
在HTML Helper,帮助类的帮助下,我们可以动态的创建HTML控件.HTML帮助类是在视图中,用来呈现HTML内容的.HTML帮助类是一个方法,它返回的是string类型的值. HTML帮助类, ...
随机推荐
- fileinput使用心得
下咋以及一些具体使用过程就不叙述了,简单说一下使用时候需要注意的几点 1.在js中封装好的fileinput函数 /* * 初始化fileInput控件(第一次初始化) * type 不同类别 * i ...
- 原 ASP.net out 和ref之间的区别
ref和out都是C#中的关键字,所实现的功能也差不多,都是指定一个参数按照引用传递.对于编译后的程序而言,它们之间没有任何区别,也就是说它们只有语法区别.总结起来,他们有如下语法区别: 1.ref传 ...
- 解决 Error retrieving parent for item: No resource found that matches the given name 'Theme.AppCompat.Light.DarkActionBar'
If you are looking for the solution in Android Studio : Right click on your app Open Module Settings ...
- Python学习 备注
python 3.x中urllib库和urilib2库合并成了urllib库..其中urllib2.urlopen()变成了urllib.request.urlopen() urllib2.Reque ...
- HTML5:使用Canvas和Input range控件放大缩小图片,剪裁,并上传图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JasperReport填充报表6
任何报告工具的主要目的是为了生产出高品质的文档.举报填充过程有助于报告工具通过操纵数据集来实现这一目标.需要报表填充过程的主要输入是: 报表模板:这是实际的JasperReport文件 报告参数:这些 ...
- kafka理论
一.消息队列,简称MQ,message queue 生产者:生存数据写到kafka,持久化到硬盘.对同一个Topic来讲,生产者通常只有‘一个’(可以多并发)数据保存时常可以配置,默认保存七天. 消费 ...
- 对于ssm过程中的乱码问题的处理
首先是数据库乱码问题: 1.可以先检测一下是否是数据库的问题: 可以先输入查询语句SHOW VARIABLES LIKE 'character_set_%';,查看所有的编码是否是UTF-8. (一般 ...
- Leetcode89. Gray Code格雷编码
给定一个代表编码总位数的非负整数 n,打印其格雷编码序列.格雷编码序列必须以 0 开头. 示例 1: 输入: 2 输出: [0,1,3,2] 解释: 00 - 0 01 - 1 11 - 3 10 - ...
- NPOI 1.1
1 .NPOI 版本2.1 2. NPOI 读取execl 3.导入数据(SqlBulkCopy) 示例代码: public class ImportServerData { DataTable dt ...