iOS9 Programming - UIStackView

UIStackView 这个控件,或许你没有接触过,但它的确很好用,特别是当你需要将一些lable、image、button 等很多控件排列成一行或一列,并且每个空间还要保持一定的间距时,stackview 将会为你提供便利。那今天我们就一起来聊聊 UIStackView。在阅读过程中发现什么问题请及时指正,共同进步😄

UIStackView 是 iOS9 中的新特性,它的主要工作就是约束他的局部或全部的 subviews ,也就是按一定顺序排列它的 subviews。stack view 解决的最重要的问题是是当 subviews 要在竖直方向上平铺一列或者在水平方向平铺一行时候。当然你也可以用很复杂的 autolayout 来达到这个效果但是 stack view 绝对是简捷的途径。假如要实现下图的排列顺序你会怎么做呢?

UIStackView 01.png

UIStackView 的用法是非常简单的并且很强大。通常你只需要提供subviews 然后调用初始化方法 init(arrangedSubviews:), 其中 arrangedSubviews 是只读属性。你可以采用下面方法来管理并排列subviews:

  • addArrangedSubview: //添加subview
  • insertArrangedSubview:atIndex: //插入subview
  • removeArrangedSubview: //移除Subview

arrangedSubviews 和 stack view 的 subviews 属性是不同的,但是它属于 subviews 的一个子集。换句话说,stack view 可以有没被整理的 subview(这些 subview 需要你自己去添加约束),但是任何被整理了的 subview 必须在 stack view 的 subviews 中,如果你将一个view 设置为 arranged subview 并且它还不是 stack view 的subview,那这个 view 将会被自动添加到为一个 subview 。arrangedSubviews 的顺序和 subviews 的顺序是相互独立的;你知道 subviews 的顺序决定了他们的绘制的顺序,但是 arrangedSubviews 的顺序决定了 stack view 将怎样放置这些 subview 。

Stack 视图管理着所有在它的 arrangedSubviews 属性中的视图的布局。这些视图根据它们在 arrangedSubviews 数组中的顺序沿着 Stack 视图的轴向排列。精确的布局变量根据 Stack 视图的 axis, distribution, alignment, spacing, 和其它属性共同决定。

StackView属性示意图.png

axis

你可以选择以下两种轴向:

  • .Horizontal
  • .Vertical

distribute

在已选好的轴向基础上,你要怎样布局 subviews呢?你可以选择:

  • .Fill
  • .FillEqual
  • .FillProportionally
  • .EqualSpacing
  • .EqualCentering

除了 UIStackViewDistributionFillEqually 分布以外的分布方式 stack 视图使用被管理视图的 intrinsicContentSize 属性来计算沿着 stack 轴向的视图尺寸。UIStackViewDistributionFillEqually 分布将调节所有被管理视图的在 stack 轴向上拥有相同尺寸,以填充 stack 视图。如果可能,stack 视图将拉伸所有被管理视图,来匹配其在 stack 轴向上最长的原有尺寸(保证长宽比的情况下根据 stack 轴向长度拉伸视图)。stack view 的 space 属性决定了两个 view 之间的间距。

alignment

管理的视图在垂直于轴向上的布局

  • Fill
  • Leading
  • Center
  • Trailing
  • FirstBaseline / LastBaseLine

除了 UIStackViewAlignmentFill 对齐方式以外的对齐方式,stack 视图使用其管理的视图的 intrinsicContentSize 属性来计算视图垂直于 stack 轴向的尺寸。 UIStackViewAlignmentFill 重新调节了所有其管理的视图,使这些视图填充 stack 视图垂直于其轴向空间。如果可能,stack 视图将拉伸其所有管理的视图来匹配其垂直于 stack 轴向的最大固有尺寸。

layoutMarginsRelativeArrangement

如果设置该属性的值为 true,stack view 的内部 layoutmargins 参与其 subviews 的约束设置,stack view 将使用相关边距与其内容对齐。如果 false(默认),则使用 stack view 的边界。

说了那么多,云里雾里的,还是上代码好了,下面我们用stackview来实现上一小节的内容

 let sv = UIStackView(arrangedSubviews:views)
        sv.axis = .Vertical
        sv.alignment = .Fill
        sv.distribution = .EqualSpacing
        sv.translatesAutoresizingMaskIntoConstraints = false
        
        self.view.addSubview(sv)
        
        NSLayoutConstraint.activateConstraints([
            sv.topAnchor.constraintEqualToAnchor(self.topLayoutGuide.bottomAnchor),
            sv.leadingAnchor.constraintEqualToAnchor(self.view.leadingAnchor),
            sv.trailingAnchor.constraintEqualToAnchor(self.view.trailingAnchor),
            sv.bottomAnchor.constraintEqualToAnchor(self.view.bottomAnchor),
            ])

运行的到:

v2移除之前.png

最后,附赠一条链接,作者将官方文档翻译成中文,讲得很清楚,建议大家可以去看一下 http://www.cnblogs.com/tieria/p/4572882.html

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

推荐阅读更多精彩内容