使用 UIStackView 来简化 AutoLayout 布局

可以维护的 AutoLayout

在使用 AutoLayout 做界面布局的时候,你会发现,做好一个复杂界面的约束并不是一件容易的事,经常需要很多的调试,这在用代码写布局的时候尤为明显,因为没有 IB 给你实时的反馈当前的 Layout 错误。而且不管是在 IB 还是纯代码的 AutoLayout,其可读性都不太好,例如我们创建了下面这样一个 App Store 的界面:

1.png

Label 和 星标图片之间有很多约束,如果我们遇到了需求改动,想要在星标上方多加一行,就得先搞清楚各个约束是干什么的,再打破几个约束,最后增加一个 Label 并且加上约束,费时费力。

iOS 9 发布的时候苹果提供了一个新的AutoLayout 工具 UIStackView,可以自动完成很多类型的布局,并且不用添加任何约束,由 UIStackView 自行管理其 ArrangedSubviews 的约束并且可以让增删变的更简单,大大增加了项目的可维护性,本文就来介绍一下 UIStackView 的使用。

UIStackView 本身是建立在 AutoLayout 的约束之上的,我们不用主动给其子视图添加约束就可以完成自动布局,UIStackView 相当于一个可以为你自动管理内部 View 的一个容器。想要完成布局大多数情况你需要做这三步:

1.调用 -addArrangedSubview: 添加需要布局的 View 到一个 UIStackView 上;
2.配置 UIStackView 的 axix、alignment、distribution、spaciing 这四个属性;
3.如果有必要,再嵌套多个 UIStackView 到一个 UIStackView 中。

UIStackView 的主要方法和属性

2.png
@property(nonatomic) UILayoutConstraintAxis axis;

用于控制 UIStackView 子视图横向或纵向布局,有两种:

  • UILayoutConstraintAxisHorizontal 横向布局
  • UILayoutConstraintAxisVertical 纵向布局
3.png
@property(nonatomic) UIStackViewAlignment alignment;

这个属性稍微复杂一点,当 axisHorizontal 时其表示 UIStackView 的子视图相对于其上下边界的对其方式。当 axis 为 Vertical 时,表示 UIStackView 的子视图相对于其左右边界的对其方式,一共有八中,看下面的图示就很好理解了:

4.png
5.png
@property(nonatomic) UIStackViewDistribution distribution;

这个属性用来控制 UIStackView 在其 axis 方向上的分布,分别有如下几种:

6.png

Fill
UIStackView 的子视图会沿着其 axis 填充满 UIStackView,如果子视图在 axis 方向上不能放入 StackViewStackView太小),则会按照子视图的抗压缩优先级属性( Content Compression Resistance Priority)从低到高压缩视图,直到正好填满 StackView 为止。

反之,如果子视图在 axis 方向不能填满 StackViewStackView太大),则会按照子视图的抗拉伸优先级属性(Content Hugging Priority)从低到高拉伸视图,知道正好填满 StackView 为止。

这里说一点,StackView 在没有宽高约束的时候大部分情况是没问题的,因为它会根据子视图的intrinsic content size 、宽高约束、甚至是 frame.size.width frame.size.height 来计算自己的宽高,最终会有一个intrinsic content size,这样我们把 StackView 添加到父视图中的时候,可以不约束其宽高,只定位好 origin 就可以了。

FillEqually
这个属性简单一些,StackView 的子视图会沿着axisStackView 内均匀分布。

FillProportionally
按字面意思解释,和 FillEqually 类似,也是每个子视图都会被等比例拉伸或者压缩,来填满 StackView,但是这个是等比例填满,每个子视图会被 StackView 按照其 intrinsic content size 或者其本身 frame 来进行等比例缩放,如果要拉伸或者压缩,每个子视图都会同时被等比例拉伸或压缩。

EqualSpacing
StackView 会在每个子视图中间留下等相等的空间距,此时 Spacing 属性定义的是这个间距的最小值。如果 StackView 足够大,可以保持子视图的原始尺寸,不拉伸,但是如果 StackView 太小,子视图会被压缩,也是按照子视图的抗压缩优先级属性( Content Compression Resistance Priority)从低到高压缩,此时如果有两个子视图有相等的抗压缩优先级,StackView 就不知道压缩哪个了,需要调整子视图的优先级,不要出现相等的情况。

EqualCentering
StackView 会把每个子视图按照中心点等距离排列,此时 Spacing 属性定义的是这个间距的最小值。如果 StackView 足够大,可以保持子视图的原始尺寸,不拉伸,但是如果 StackView 太小,子视图会被压缩,也是按照子视图的抗压缩优先级属性( Content Compression Resistance Priority)从低到高压缩,此时如果有两个子视图有相等的抗压缩优先级,StackView 就不知道压缩哪个了,需要调整子视图的优先级,不要出现相等的情况。

@property(nonatomic) UIStackViewAlignment alignment;

按照 distribution 属性中的布局方式控制子视图之间的间距。

总结

在本文结束之前,我们看一下上面的 AppStore Demo 在使用 UIStackView 布局后的情况,是不是简介清爽了许多。

7.png

最后,引用一下 WWDC 苹果工程师的话,如果你使用 AutoLayout,那么请 Start With Stack View, use constraints as needed!

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

推荐阅读更多精彩内容

  • 目录 0、前言 一、Auto Layout前世今生 二、Auto Layout基础知识 1.Auto Layout...
    浮游lb阅读 24,497评论 3 89
  • 翻译自“Auto Layout Guide”。 1 入门 1.1 理解自动布局 自动布局根据视图层级结构中视图上的...
    lakerszhy阅读 3,584评论 3 26
  • 前言 首先,我们通过下面这张图片引出今天的主角 大家看到了什么,是爱吗?不,这不是爱,不是爱,是满满的‘愁绪’?😂...
    一念之见阅读 2,201评论 0 2
  • 我的博客, 各位看官有时间赏光 UIStackView UIStackView介绍 随着autolayout的推广...
    VIC_LI阅读 9,063评论 0 17
  • 初入社会,进入一家初创型互联网公司,开始漫长的上班族生活。 开始的一个月,每天很闲,自己也相当享受悠闲的上班时光,...
    Masdu阅读 241评论 0 0