iOS9之UIStackView

iOS9之UIStackView

苹果在iOS9新增了一个简易的布局控件UIStackView,它是一个基于 Auto Layout 的抽象层从而使布局属性的创建简单化,它可以将一组 UIView 视图进行垂直或水平方向的排列。

  • UIStackView 既可以用代码编写也可以在 Interface Builder 中设计(简易xib更方便适用)。

  • 你可以在一个主 UIStackView 中嵌套 UIStackView 从而让视图精确放置到相应的位置

下面就具体介绍一下UIStackView的一些方法和属性

一.方法

1.初始化数组


//OC中

- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;

//Swift

let stackView1 = UIStackView(arrangedSubviews: subViews)

2.添加子视图


//OC

- (void)addArrangedSubview:(UIView *)view;

//Swift

stackView.addArrangedSubview(UIView)

3.移除子视图


//OC

- (void)removeArrangedSubview:(UIView *)view;

//Swift

stackView1.removeArrangedSubview(UIView)

4.根据下标插入子视图


//OC

- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;

//Swift

stackView1.insertArrangedSubview(UIView, atIndex: Int)

二.属性

1.布局方向


stackView.axis = .Horizontal

/**************/

Horizontal -> UILayoutConstraintAxisHorizontal

水平方向布局

Vertical  -> UILayoutConstraintAxisVertical

垂直方向布局

2.内容物填充样式


stackView.distribution = .FillEqually

/****************/

Fill -> UIStackViewDistributionFill

填充整个UIStackView,并且根据内部子视图尺寸对子视图尺寸进行动态调整。

Fill Equally -> UIStackViewDistributionFillEqually

根据视图大小平均分配UIStackView尺寸,等比例填充UIStackView,过程中会根据分配的大小改变子视图尺寸。

Fill Proportionally -> UIStackViewDistributionFillProportionally

根据之前的比例填充UIStackView。

Equal Spacing -> UIStackViewDistributionEqualSpacing

填充整个UIStackView,子视图没有占满UIStackView将会用空白平均填充子视图中间的间距,超出UIStackView将会根据arrangedSubviews数组下标压缩子视图。

Equal Centering -> UIStackViewDistributionEqualCentering

平均分配子视图得到每个视图的中心点,使用这个中心点来布局每个子视图,并且保持spacing距离,超出将会重新布局子视图,并压缩部分子视图。

3.视图填充样式


stackView.alignment = .Fill

/****************/

Fill -> UIStackViewAlignmentFill

视图纵向填充

Top -> UIStackViewAlignmentTop

视图向上对其(适用于Horizontal模式)

Center -> UIStackViewAlignmentCenter

视图居中对其

Bottom -> UIStackViewAlignmentBottom

视图向下对其(适用于Horizontal模式)

First Baseline -> UIStackViewAlignmentFirstBaseline

根据上方基线布局所有子视图的y值(适用于Horizontal模式)

Last Baseline -> UIStackViewAlignmentLastBaseline

根据下方基线布局所有子视图的y值(适用于Horizontal模式)

trailing -> UIStackViewAlignmentTrailing

视图向左对齐(适用于Vertical模式)

leading -> UIStackViewAlignmentLeading

视图向右对齐(适用于Vertical模式)

4.子控件之间最小距离


stackView.spacing = 0

/****************/

spacing -> CGFloat spacing

5.基线相对布局


public var baselineRelativeArrangement: Bool

如果YES,则从顶视图的最后基线到底视图的顶部测量两个视图之间的垂直间距。

6.边界相对布局


public var layoutMarginsRelativeArrangement: Bool

决定了 stack 视图平铺其管理的视图时是否要参照它的布局边距,选中 Layout Margins Relative 将相对于标准边界空白来调整subview位置

Xib创建

  • 择UIStackView控件直接拖到XIB中。可以选择Horizontal和Vertical两个方向的UIStackView,也可以在拖到XIB中之后手动修改。
  • 父视图可以将UIStackView作为子视图来进行多层UIStackView嵌套,这也是苹果推荐的做法。
示例图片1.png
  • 打开右侧设置面板来设置UIStackView的一些对应属性,达到更好的布局效果。
示例图片2.png
  • 除了上面的方法也可以在XIB中直接选择多个View,然后点击右下方的Stack按钮,系统会自动推断布局方式,平均分配空间布局,帮我们自动布局子视图,我们可以在系统布局之后在手动进行调整。
示例图片3.png

作为一枚小菜鸟,不足之处还望大家多多指正,互相学起,共同进步!

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

推荐阅读更多精彩内容