UIStackView 初探(译)

UIStackView

用于在列或行中布局视图集合的线性接口。

UIStackView 概览

UIStackView 允许您利用自动布局的强大功能,创建能够动态适应设备方向、屏幕大小和可用空间中的任何更改的用户界面。UIStackView 在其 arrangedSubviews 属性中管理所有视图的布局。这些视图根据在 arrangedSubviews 数组中的顺序沿着视图栈主轴排列。视图精确的布局依赖于 UIStackView 的 axis、distribution、alignment、spacing以及其他属性的共同作用。


WechatIMG390.jpeg

要使用 UIStackView,请打开您希望编辑的 Storyboard。从对象库中拖动 Horizontal Stack View(水平栈)或Vertical Stack View(垂直栈),并将堆栈视图定位到需要的位置。接下来,拖出栈的内容,将视图或控件拖放到栈中。您可以根据需要继续向栈添加视图和控件。Interface Builder 根据栈的内容调整栈的大小。您还可以通过在属性检查器中修改 UIStackView 图的属性来调整栈内容的外观。

note:开发者负责定义 UIStackView 的位置和大小(可选)。然后,UIStackView 管理其内容的布局和大小。

UIStackView 与自动布局

堆栈视图使用自动布局来定位和调整其排列的视图的大小。堆栈视图将第一个和最后一个被安排的视图与其沿堆栈轴的边缘对齐。在水平堆栈中,这意味着第一个排列的视图的前缘被固定在栈的左边缘,而最后一个排列的视图的后缘被固定在堆栈的右边缘。在垂直栈中,顶部和底部边缘分别固定在栈的顶部和底部边缘上。如果将 UIStackView 的 isLayoutMarginsRelativeArrangement 属性设置为 true,那么堆栈视图将其内容固定到相关的边距而不是边缘。

除了 UIStackView.Distribution.FillEquality分布,则堆栈视图在沿堆栈轴计算其大小时使用每个排列视图的intrinsicContentSize属性。UIStackView.Distribution.FillEquality调整所有排列视图的大小,使其大小相同,沿视图栈的轴填充栈视图。如果可以,UIStackView 会拉伸所有排列的视图,以匹配沿栈轴具有最长内部大小的视图。

对于除 UIStackView.Alignment.fill 对齐时,UIStackView 在计算垂直于栈轴的大小时使用每个排列视图的 intrinsicContentSize 属性。UIStackView.Alignment.fill 调整所有排列视图的大小,以便它们垂直于堆栈视图的轴填充堆栈视图。如果可以,堆栈视图将拉伸所有排列的视图,以与垂直于堆栈轴的最大内在尺寸的视图匹配。


WechatIMG391.jpeg

动态改变栈视图的位置和尺寸

尽管 UIStackView 允许您在不直接使用自动布局的情况下布局其内容,但仍然需要使用自动布局来定位 UIStackView 本身。一般来说,这意味着固定 UIStackView 的至少两个相邻边,以定义其位置。在没有附加约束的情况下,系统根据 UIStackView 的内容计算其大小。

  • 沿着 UIStackView 的轴,它的大小等于已排列的视图大小加上视图间的空间总和。
  • UIStackView 轴的垂直方向,它的大小等于最大的已布局视图的尺寸
  • 如果 UIStackView 的 isLayoutMarginsRelativeArrangement 属性设置为true,那么它的大小增加已包含边缘空白的空间。

可以提供其他约束来指定 UIStackView 的高度、宽度或两者。在这些情况下,堆栈视图将调整其排列视图的布局和大小,以填充指定区域。确切的布局因堆栈视图的属性而异。见 UIStackView.Distribution 以及 UIStackView.Alignment 枚举以获取有关 UIStackView 如何处理其内容具有额外空间或空间不足的完整描述。
也可以根据 UIStackView 的第一个或最后一个基线来定位 UIStackView,而不是使用顶部、底部或中心Y位置。与 UIStackView 的拟合大小一样,这些基线是根据 UIStackView 的内容计算的。

  • 水平 UIStackView 返回forFirstBaselineLayout和forLastBaselineLayout方法的最高视图。如果最高的视图也是 UIStackView,则返回对嵌套 UIStackView 调用forFirstBaselineLayout或forLastBaselineLayout的结果。

  • 垂直 UIStackView 返回forFirstBaselineLayout的第一个排列视图和forLastBaselineLayout的最后一个排列视图。如果这些视图中的任何一个也是UIStackView,那么它将返回对嵌套 UIStackView 调用forFirstBaselineLayout或forLastBaselineLayout的结果。

note:基线对齐仅适用于高度与其内部内容大小高度匹配的视图。如果视图被拉伸或压缩,基线显示在错误的位置。

管理 UIStackView 的外观

UIStackView 管理其排列视图的大小和位置。有许多属性定义 UIStackView 如何布局其内容

  • axis 属性决定栈的方向,无论是垂直方向还是水平方向
  • distribution 属性决定沿着栈的轴排列的视图的布局
  • alignment 属性确定垂直于堆栈轴的排列视图的布局。
  • spacing 属性决定排列视图间的最小空间。
  • isBaselineRelativeArrangement 属性确定是否从基线测量视图之间的垂直间距。
  • isLayoutMarginsRelativeRangement 属性确定UIStackView是否相对于其布局页边距布局其排列视图。

通常,您使用单个 UIStackView 来布局少量的项。通过将 UIStackView 嵌套在其他 UIStackView 中,可以构建更复杂的视图层次结构。如下图显示了一个包含两个水平堆栈视图的垂直堆栈视图。每个水平堆栈视图都包含一个标签和一个文本字段。


WechatIMG392.jpeg

也可以通过向排列视图添加其他约束来微调排列视图的外观。例如,可以使用约束设置视图的最小或最大高度或宽度。也可以为视图定义纵横比。布局其内容时使用这些约束。例如,在图像视图中有一个宽高比约束,该约束在调整图像大小时强制执行恒定的纵横比。

在向堆栈视图中的视图添加约束时,请小心避免引入冲突。一般来说,如果视图的大小默认为给定维度的内部内容大小,则可以安全地为该维度添加约束。

动态改变 UIStackView 的内容

当对arrangedSubviews 数组内容进行增加、删除、插入,或者改变 排列视图的子视图的 isHidden 属性时,UIStackView 将自动跟新它的布局

// Appears to remove the first arranged view from the stack.
// The view is still inside the stack, it's just no longer visible, and no longer contributes to the layout.
let firstView = stackView.arrangedSubviews[0]
firstView.isHidden = true

UIStackView 还自动响应对其任何属性的更改。例如,可以通过更新堆栈视图的axis属性来动态更改堆栈的方向。

// Toggle between a vertical and horizontal stack
if stackView.axis == .Horizontal {
    stackView.axis = .Vertical
}
else {
    stackView.axis = .Horizontal
}

通过将这些更改放置在动画块中,可以设置对已排列子视图的isHidden属性的更改和对 UIStackView 属性的更改的动画。

// Animates removing the first item in the stack.
UIView.animateWithDuration(0.25) { () -> Void in
    let firstView = stackView.arrangedSubviews[0]
    firstView.isHidden = true
}

最后,您可以直接在I nterface Builder中为 UIStackView 的许多属性定义特定于大小类的值。每当堆栈视图的大小类更改时,系统会自动设置这些更改的动画。

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

推荐阅读更多精彩内容