UIStackView基础用法介绍

介绍

UIStackView 是 iOS9新增的一个布局技术。熟练掌握相当节省布局时间。
UIStackView 是 UIView 的子类,是用来约束子控件的一个控件。但他的作用仅限于此,他不能用来呈现自身的内容,类似于 backgroundColor。当然了,这个控件相当易学,属性只有4个。

alt text
alt text

Axls: 子控件的布局方向,水平或者垂直
Alignment: 类似于 UILabel 的 Alignment 属性
Distributlon: 子控件的大小
Spacing: 子控件间的间距

可以看到在属性左边有个加号,点开来是这样的:

alt text
alt text

这其实是 UIStackView 也集成了 Size Class,Size Class 是用来布局不同尺寸屏幕的。在这里可以通过选择不同的尺寸来更新子控件约束。

使用

接下来我们在 IB 中使用 UIStackView 来完成以下布局:


alt text
alt text

首先上面的 ImageView 是直接做约束完成的。
然后我们可以选择左下角的三个 Label,然后点击右下角第一个图标合成 UIStackView:

因为三个 Label 间是有间距的,所以接下来我们修改 Spacing 属性:


alt text
alt text

这样就很方便的做好了 UIStackView 内部子视图的布局,然后只需要给 UIStackView 设置离左边和下边的约束即可,因为这个 UIStackView 内部的子视图都是 UILabel, UILabel 都是有他自身的固有大小的,所以不需要设置4个布局。


alt text
alt text

这样我们就完成了左边三个 Lable 的布局。接下来我们来布局右边的2个控件。

还是和刚才一样,选择 Image 和 label,并且组成一个 UIStackView 并设置好 UIStackView 的布局约束:


alt text
alt text

接下来布局内部子控件约束:


alt text
alt text

做好这两步你会发现 IB 还是报错,这是因为 UIStackView 并不知道他内部的 image 的宽高,这时候我们可以让 image 有他的固有大小:
alt text
alt text

将 intrinsic Size 的属性改为 Placeholder,这时候就解决了报错,至此,整个 View 的约束已经做完,是不是发现比之前全部用 Auto Layout 快多了。

当然了 UIStackView 也是可以用代码创建的。

<pre><code>
class UIStackView : UIView {
init(arrangedSubviews views: [UIView])
var arrangedSubviews: [UIView] { get }
func addArrangedSubview(view: UIView)
func removeArrangedSubview(view: UIView)
func insertArrangedSubview(view: UIView, atIndex stackIndex: Int) ...
}
</code></pre>

第一个方法是用来创建一个 UIStackView 的,传入 views 里的数组的顺序代表了 UIStackView 里子视图的顺序。
第二个方法是用来获得 UIStackView 里有哪些子视图的。

后面3个方法和 UIView 里的方法是类似的。
看到 addArrangedSubview 和 removeArrangedSubview 你是不是想到了addSubView 和removfromSuperView。

下面有张表,可以区别这四个方法:


alt text
alt text

从表中可以看出,添加 UIStackView 的子视图应该用 addArrangedSubview,移除 UIStackView 某个子视图应该用 removeArrangedSubview。

UIStackView 用来约束子视图的属性有以下几个
<pre><code>
var axis: UILayoutConstraintAxis
var distribution: UIStackViewDistribution
var alignment: UIStackViewAlignment
var spacing: CGFloat
var baselineRelativeArrangement: Bool
var layoutMarginsRelativeArrangement: Bool
</code></pre>

这些就是使用代码来创建 UIStackView 了。

UIStackView 还是蛮简单的,但是功能却十分强大。这篇文章应该能让大家了解 UIStackView 的基本使用了。

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

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生x阅读 15,967评论 3 119
  • 目录 0、前言 一、Auto Layout前世今生 二、Auto Layout基础知识 1.Auto Layout...
    浮游lb阅读 24,292评论 3 89
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 最近一直在出差,忙忙碌碌,日子总是急躁。行李箱中摆着一本画册,动车行车途中随手翻开看看,又让我想起了我之前那种向往...
    用耳朵看绿阅读 779评论 0 0
  • 知足常乐 活在当下 不斤斤计较 为自己而活着 善待自己 少气多闲身忙心闲 别跟自己过不去 懂得的是艺乐 学会享受生...
    石头缝里的小嫩芽变大树阅读 288评论 0 1