美文网首页
UIStackView基础用法介绍

UIStackView基础用法介绍

作者: 口子窖 | 来源:发表于2018-06-07 02:16 被阅读50次

介绍

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

alt textalt text

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

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

alt textalt text

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

使用

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


alt textalt text

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

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


alt textalt text

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


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

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


alt textalt text

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


alt textalt text
做好这两步你会发现 IB 还是报错,这是因为 UIStackView 并不知道他内部的 image 的宽高,这时候我们可以让 image 有他的固有大小:
alt textalt 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 textalt 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 的基本使用了。

相关文章

  • UIStackView基础用法介绍

    介绍 UIStackView 是 iOS9新增的一个布局技术。熟练掌握相当节省布局时间。UIStackView 是...

  • UIStackView介绍

    ios9之后增加了新的布局神器UIStackView,首先我们先介绍一下UIStackView的常用属性,然后我们...

  • StackView

    我的博客, 各位看官有时间赏光 UIStackView UIStackView介绍 随着autolayout的推广...

  • UIStackView的用法

    刚开始好多人用不习惯这个东西在这里说一下我个人的感受 把UIStackView看成是UIView的升级版本就行 U...

  • 2.1 布局之StackLayout(栈布局)

    1.介绍 1.1 基础 对于了解iOS9新特性的人来说,这个很好理解,相当于iOS里面的UIStackView,你...

  • iOS UIStackView

    简介 UIStackView是iOS 9 的新增控件,唯一的作用就是帮助布局 本文会详细介绍UIStackView...

  • UIStackView 看我就够了

    介绍 UIStackView 是 iOS9新增的一个布局技术。熟练掌握相当节省布局时间。UIStackView 是...

  • UIStackView使用介绍

    在iOS开发中,对于控件布局我们一般是使用AutoLayout加约束的机制实现,UIKit有一个布局组件UISta...

  • 正则表达式

    前言:re模块是爬虫的基础,文章主要从符号和用法来介绍它的基础用法 符号 各个符号及用法如下: 方法 各种方法代码...

  • [基础] angular 过滤器介绍

    [基础] angular 过滤器介绍 用法 HTML javascript 过滤器介绍:currency - 数值...

网友评论

      本文标题:UIStackView基础用法介绍

      本文链接:https://www.haomeiwen.com/subject/iazbsftx.html