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帮助类, ...
随机推荐
- ES5-ES8 数组拥有的方法
1.判断是否是数组 Array.isArray( arg ) 有兼容性 2.toString 数组转字符串 arr.toString(); 3.join 数组每一项间的拼接 arr.join(); S ...
- spring cloud深入学习(十一)-----服务网关zuul
前面的文章我们介绍了,Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散,Spring Cloud Config服务集群配置中心,似乎一个 ...
- Java 容易疑惑的一些杂记录
1 final.finally和finalize final 是一个关键字 ,final 修饰 对象不能被修改,final 修饰的方法不能被重写,final 修饰的 类 不能被继承. finally ...
- Android中Activity和AppcompatActivity的区别(详细解析)
转载 https://blog.csdn.net/today_work/article/details/79300181 继承AppCompatActivity的界面. 如下图所示: copy界面代码 ...
- Spring MVC(二)--Spring MVC登陆实例
本文通过一个简单的登陆实例实现Spring MVC的流程,同时整合 MyBatis使用,流程是这样的: 1.访问一个URL进入登陆界面 2.输入正确的用户名和密码,成功则进入index页面,否则留在登 ...
- 左神算法书籍《程序员代码面试指南》——2_02在单链表和双链表中删除倒数第k个字节
[题目]分别实现两个函数,一个可以删除单链表中倒数第K个节点,另一个可以删除双链表中倒数第K个节点.[要求]如果链表长度为N,时间复杂度达到O(N),额外空间复杂度达到O(1).[题解]从头遍历链表, ...
- nodejs package.json说明
{ "name": "test", //项目名称(必须),由小写英文字母.数字和下划线,不能含空格 "version": "1.0 ...
- create_pascal_tf_record.py 生成的record一直为0字节
后面发现这个错误原来是自己Main目录下的train.txt中间没东西
- light7结合jquery实现开关按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- JavaScript多继承(转载)
js里是否有多继承,如何实现多继承.在这里可以看看java是如何处理多继承的问题,java里是没有多继承的,即一个子类不能同时继承多个父类,但可以实现多个接口,这也间接的实现了多继承.主要是因为多继承 ...