iOS 9 学习系列:UIStack View
在 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演示如何操作的。
相关文章
- 这年头,机器翻译都会通过文字脑补画面了
- 新造车,程序员的糖,工程师的泪
- 「土行孙」机器人登上Science子刊封面,用气流在地下穿梭自如
- 美商务部撤销对TikTok和WeChat禁令:两者下载都已恢复
- 字节1/3员工反对取消大小周:每年少赚10万块!
- 美国要卡28纳米?停止设备出口中国,台积电、联电大陆扩产受阻
- 65岁老码农:找工作很难,但我还在坚持
- 程序员面试时,不小心说了真话…...
- 获取金牌认证CISSP,助您走上职业发展快车道!
- ResNet也能用在3D模型上了,清华「计图」团队新研究已开源
- Google最新薪资曝光:研究岗年薪最高达200多万 但远逊于人事主管
- Google Research:哥德尔奖、高德纳奖得主解析「大脑中文字表征」
- “两个一百年”,一个中国梦|庆祝建党百年系列评论·百年说百
- 这个登上Nature封面的群体学习,无需中央协调员比联邦学习更优秀
- 如何尽可能脱离内卷?工作六年进入华为后我的工作感悟
- “改变世界”的万维网源代码将以NFT形式拍卖:起拍价1000美元
- 加拿大将启动3500MHz5G频谱拍卖
- 腾讯强制6点下班,周末双休,慕了慕了!
- 科学家调查了72名图灵奖得主背景,却发现计算机专业很难得奖
- Transformer模型有多少种变体?复旦邱锡鹏教授团队做了全面综述