UIStackView教程

这是一篇挺老的文章,主要就是介绍在iOS9时推出的控件UIStackView。我发现网上的资料并不算多,而AppCoda的这一篇就浅显易懂,所以决定翻译一下,再写个Demo

Demo 地址如下 : https://github.com/liberalisman/StackView-Demo

UIStackView 简介

开始这个教程的话,我们会讲一些iOS9的新特性,iOS最近推出的新版本带来了很多新的特性,而新推出的UIStackView应该引起开发者第一时间的关注。据我所知,一些开发者认为使用AutoLayout去设计一些复杂的用户界面是十分困难的。UIStackView就是帮助开发者将这些复杂页面的设计工作变得更简单。

UIStackView为布局一组控件提供了线性的布局页面,这组控件可以垂直显示,也可以水平显示。当View被加入到UIStackView,你不再需要为它设置约束。UIStackView会自动管理子控件的布局并为他们添加约束。这也就意味着,子控件可以去适应不同的屏幕尺寸。

再进一步讲,你可以将一个UIStackView放进另一个UIStackView中以实现更为复杂的用户界面的设计工作。当然千万不要被我误导,UIStackView并不意味着你再也不必和约束打交道,你至少是要为UIStackView设置约束的。UIStackView只是节省了你为每一个界面元素添加约束的时间,同时你在UIStackView中添加和删除约束将变得超级简单。

Xcode 7提供了两种方式去使用UIStackView。你可以在对象库拖一个UIStackView然后放进StoryBoard中,UIStackView水平垂直两种,然后你可以拖拽一些视图控件,例如Label,Button,image等直接放入UIStackView。或者,你也可以利用在自动布局工具栏中Stack选项。利用这种方法,你可以选择两个或者多个视图控件,直接点击StackInterface Builder会将这些试图对象加入到UIStackView并且重新指定他们的大小。说到此处如果你还没有明白UIStackView,那也不要担心。在这个教程中,我们会展示这两种方法。只需要继续阅读,然后在一瞬间,你会 的一下就懂了。

The Demo App

首先我们要预览一下我们即将构建的App,在这个教程中,我们会展示在Interface中利用UIStackView如何构建这个App

当然你不用UIStackView也可以构建一个这样的页面,但是正如你所见,UIStackView完全改变了你进行页面布局的方式。这个教程无需任何代码,我们将专注于利用Interface Builder来构建这个用户界面。

添加 UIStackView

打开 Xcode 7 ,然后打开main.storyBoard。从右侧的对象库面板中,往storyBoard中拖一个垂直方向的UIStackViewUIStackView可以分别管理水平方向垂直方向的子控件。因为我们想要布局的ImageViews是垂直方向的,所以我们选择一个垂直方向的UIStackView

接下来从控件库往外拖一个Imageview,当你把Imageview拖拽到StackView里,Imageview会自动调整尺寸,重复上面的步骤,我们再往StackView里面添加两个imageView,这时候神奇的一幕发生了,当你把另外两个imageView添加到StackView里面时,StackView会自动给这两个imageView进行垂直布局,并为他们添加上了约束条件。是不是很酷?

为 UIStackView 添加约束

StackView为开发者节省了为每一个界面元素添加约束的时间,但是你必须要为你的StackView添加约束条件,接下来我们将为刚才添加到是图中的StackView添加约束

  • 设置StackView与父控件顶部、左侧、右侧的距离
  • 设置StackView的高度占父控件高度的70%

现在,我们选中StackView并点击Pin按钮。设置距离顶部、左侧、右侧的距离各自分别为10,0,0。并且把这三个约束加上。

现在StackView的位置,并不满足我们的约束条件,你需要点击警告去修复这个问题。

想设置高度的约束,到文档大纲视图。按住Control键,从StackView拖线到View上面,松开后,选择Equal Height.

这样设置以后,StackView的高度就与使徒的View相等。然而我们只需要让StackView的高度是视图的View的70%。所以选择StackViewHeight属性,然后到属性面板,把Mutiplier的值从1.0变成0.7

设置StackView属性值

StackView看起来并没有像预期一样,一旦你使用了StackView,你可以通过修改StackView的属性值来改变它的外观。

Axis是坐标轴,负责水平还是垂直。
alignment是对齐方式。

Distribution决定了StackView中子控件的尺寸和位置。它默认被设置为Fill。在这个例子里,StackView要尽可能的利用有限的空间去适配它的子控件。接下来我们将选项改为Fill EquallyStackView会自动将里面的子控件重新布局为大小相等的控件。

Space选项允许你通过修改该选项,调解两个控件之间的距离,此处将值改为10。

设置图片

接下来为三个ImageView设置图片

现在可以把程序跑起来看看效果,在不同的模拟器,UI都可以很好的适配各种设备。StackView已经自动帮你添加好了布局。实际上你可以通过页面调试选项,来查看为ImageView添加的布局。

用嵌套的方式布局控件

还有一些LableButton需要添加到页面上,如图所示,拖两个LableStackView的正下方,上面的标签字号为30.

然后选中两个Lable,点击stack选项,将这两个控件合并为一个StackView

接下来添加两个按钮,一个Like,一个Share。把这两个控件合并为一个StackView,设置间距为 5,方向水平。

把按钮的StackView拖进LabelStackView中,选中顶部的Nature标签和Buttonde StackView,点击stack选项,将他们两个合并为一个StackView,设置方向为水平

选中这个StackView,将对齐方式调整为First BaseLine,沿第一个对象的基线对齐,然后给LableButton加一个20的间距。

这样,我们只需要利用 StackView 的嵌套,就可以实现我们想得到的布局。

最后,我们实现了用StackView包裹ImageView,同时也实现了StackView包裹LabelButton。将顶部、左侧、右侧各自设置值为 8,0,0。

为了确保Label的描述文字可以正好适配,将Label的行数改为0,文字的Line break设置为文字包裹。这样你就完成了界面的设计。

现在可以把程序跑起来看一下效果

如果横屏,效果是这样的:

看起来还可以,但是如果横屏时图片是水平排列那就更好了:

利用*Size Class 构建自适应的 StackView

为了实现 iPhone 在横屏时显示不同的布局,我们需要让StackView是自适应。在 iOS8,介绍过 Size Class 的概念,下面的表格介绍了不同的 iOS 设备以及他们相对应的 Size Class

你可以利用 Size Class 提供一个指定的布局去覆写之前的布局设计。在这个例子中,我们需要将StackView的方向在以下两种情况下,由垂直变为水平。

  • 宽度紧凑 - 高度紧凑
  • 宽度宽松 - 高度紧凑

接下来选择我们的StackView,然后打开属性面板,点击Axis边上的+号。

选择 任意宽度 , 高度紧凑,并把StackView的方向设置为水平方向

然后。。。。。。就妥了!

总结

在这个教程中,对StackView进行了简单介绍,为大家做了一个Demo,以及如何使用这个全新的组件。StackView这种流线型的布局方式,让你在布局时只需要使用很少的约束。

Apple的工程师也是推荐优先使用StackView,实在不行在用原生的约束。

我自己做了一个简单的Demo,地址如下 : https://github.com/liberalisman/StackView-Demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,471评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,551评论 4 58
  • 目录 0、前言 一、Auto Layout前世今生 二、Auto Layout基础知识 1.Auto Layout...
    浮游lb阅读 23,593评论 3 89
  • 前言 首先,我们通过下面这张图片引出今天的主角 大家看到了什么,是爱吗?不,这不是爱,不是爱,是满满的‘愁绪’?😂...
    一念之见阅读 2,104评论 0 2
  • 作为一个从设计转到前端的菜鸟,很想知道一个登录注册流程到底是怎样的,但是又不懂那么多的东西,从网上看到一些文章,自...
    dctxf阅读 4,182评论 1 3