UIStackView

UIStackView to resize/layout

自适应、适配、布局这几个关键词一直伴随着iOS开发,从以前的单一尺寸屏幕,到现在的多尺寸屏幕,Apple一直致力于让开发人员尽可能少在这些事上耗费过多的精力,所以Apple在2012年推出了Auto Layout特性,2014年又推出了Adaptive Layout、Size Classes,2015年iOS 9中又增加了新的控件:UIStackView。这些无一不是我们开发者做适配的利器。

UIStackView简介

UIStackView Class Reference 1

The UIStackView class provides a streamlined interface for laying out a collection of views in either a column or a row. Stack views let you leverage the power of Auto Layout, creating user interfaces that can dynamically adapt to the device’s orientation, screen size, and any changes in the available space. The stack view manages the layout of all the views in its arrangedSubviews property. These views are arranged along the stack view’s axis, based on their order in the arrangedSubviews array. The exact layout varies depending on the stack view’s axis, distribution, alignment, spacing, and other properties.


simple display
simple display

UIStackView提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到StackView的视图,你不用再添加自动布局的约束了。Stack View管理这些子视图的布局,并帮你自动布局约束。

StackView其实一个视图容器,不过它会对它的子视图根据一定规则自动布局,将子视图按栈的排列方式进行布局。

UIStackView主要的属性

一般情况下,我们不需要对stackView.subviews做任何约束,只需要通过对stackView的axis, distribution, alignment, spacing属性进行修改 2

  • Axis 方向
    StackView有水平和垂直两个方向的布局模式

    axis

  • Spacing 间隔
    StackView可以设置子视图之间的间隔

  • Alignment 对齐方式
    StackView可以设置子视图的对齐方式(水平方向和垂直方向的该属性值有所区别):

    alignment

    • Fill:子视图填充StackView。
    • Leading:靠左对齐。
    • Trailing:靠右对齐。
    • Center:子视图以中线为基准对齐。
    • Top:靠顶部对齐。
    • Bottom:靠底部对齐。
    • First Baseline:按照第一个子视图中文字的第一行对齐,同时保证高度最大的子视图底部对齐(只在axis为水平方向有效)。
    • Last Baseline:按照最后一个子视图中文字的最后一行对齐,同时保证高度最大的子视图顶部对齐(只在axis为水平方向有效)。
  • Distribution 分布方式
    StackView可以设置子视图的分布方式:

    • Fill:默认分布方式。
    • Fill Equally:子视图的高度或宽度保持一致。
    • Fill:Proportionally:按比例分布。
    • Equal Spacing:子视图保持同等间隔。
    • Equal Centering:每个子视图中心线之间保持一致。
  • baselineRelativeArrangement
    determines whether the vertical spacing between views is measured from the baselines.
    决定了其视图间的垂直间隙是否根据基线测量得到,选中 Baseline Relative 将根据subview的基线调整垂直间距。3

  • layoutMarginsRelativeArrangement
    determines whether the stack view lays out its arranged views relative to its layout margins.
    决定了 stack 视图平铺其管理的视图时是否要参照它的布局边距,选中 Layout Margins Relative 将相对于标准边界空白来调整subview位置。

UIStackView的嵌套

Typically, you use a single stack view to lay out a small number of items. You can build more complex view hierarchies by nesting stack views inside other stack views.

既然UIStackView继承了UIView,那么UIStackView也可以看做是一个UIView而被包含在UIStackView内,亦及嵌套使用。

UIStackView的嵌套

UIStackView 与 UICollectionView 的选取

UIStackView 实现有对齐要求的视图布局非常非常得简单,而使用 UICollectionView 和 UITableView 来实现,相对而言就比较麻烦。
相比于collectionView而言,stackView更加小巧灵活,然而想要完成更精致的效果,最终还是得使用UICollectionView。

注意!

Be careful to avoid introducing conflicts when adding constraints to views inside a stack view. As a general rule of thumb, if a view’s size defaults back to its intrinsic content size for a given dimension, you can safely add a constraint for that dimension.

1. Distribution 分布方式的方向垂直于Axis。
2. 有时可能排版较乱,除了设置属性来布局之外,我们还可以手动添加属性,且"手动添加的享有更高的优先级"。
(Apple官方建议开发人员应优先采用StackView来设计用户界面,然后再根据实际需求来添加约束)

后记

The UIStackView is a nonrendering subclass of UIView; that is, it does not provide any user interface of its own. Instead, it just manages the position and size of its arranged views. As a result, some properties (like backgroundColor) have no effect on the stack view. Similarly, you cannot override layerClass, drawRect:, or drawLayer:inContext:.

UIStackView不是万能的,但它可以在布局和自适应方面给开发者带来便利,在恰当的情形下使用StackView可以事半功倍。而且因为UIStackView是UIView的子类,所以也可以将动画效果作用于UIStackView上,在方便布局之余还能提高用户体验。

隔桌安卓小伙伴不满了,这不就是LinearLayout吗?
额 -_-!


ThanksTo:

[1] UIStackView Class Reference --
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIStackView_Class_Reference/index.html#//apple_ref/occ/instp/UIStackView/distribution
[2] UIStackView小窥 --
http://www.devtalking.com/articles/uistackview/?utm_source=tuicool&utm_medium=referral
[3] 简便的自动布局,对UIStackView的个人理解! --
http://www.cnblogs.com/bokeyuanlibin/p/5693575.html


// 纯代码的下次再总结

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

推荐阅读更多精彩内容

  • 这是一篇挺老的文章,主要就是介绍在iOS9时推出的控件UIStackView。我发现网上的资料并不算多,而AppC...
    Liberalism阅读 11,084评论 2 26
  • 距离iOS9发布已经接近一年了,我们即将引来新的iOS 10,为何在这个时候来介绍iOS9中新引入的一个布局组件呢...
    CZ_iOS阅读 7,480评论 9 59
  • UIStackView 类提供了一个高效的接口用于平铺一行或一列的视图组合。Stack视图使你依靠自动布局的能力,...
    Chivalrous阅读 778评论 1 2
  • 前言 首先,我们通过下面这张图片引出今天的主角 大家看到了什么,是爱吗?不,这不是爱,不是爱,是满满的‘愁绪’?😂...
    一念之见阅读 2,191评论 0 2
  • 升级iOS9.0后,增加了一些新特性.让们来一点点的了解一下吧.今天我们先学习一下UIstackView,因为它是...
    图长伴阅读 508评论 0 1