源码

首页 » 归档 » 源码 » UIStackView 看我就够了-ios学习从入门到精通尽在姬长信

UIStackView 看我就够了-ios学习从入门到精通尽在姬长信

分享最热门的ios资讯

1469704388900828.png

授权转载,作者:没阳光的午后

介绍

UIStackView 是 iOS9面目目样增的一个结构技术。熟练掌握相当节约结构时间。

UIStackView 是 UIView 的子类,是用来约束子控件的一个控件。但他的作用仅限于此,他不能用来出现自身的内容,类似于 backgroundColor。当然了,这个控件相当易学,属性只有4个。

2016-07-20-屏幕快照 2016-07-20 16.52.41.png

  • Axls: 子控件的结构偏向,水平或者垂直

  • Alignment: 类似于 UILabel 的 Alignment 属性

  • Distributlon: 子控件的大小

  • Spacing: 子控件间的间距

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

2016-07-20-屏幕快照 2016-07-20 16.57.50.png

这其实是 UIStackView 也集成了 Size Class,Size Class 是用来结构差别尺寸屏幕的。在这里可以通过选择差别的尺寸来更面目目样子控件约束。

使用

接下来我们在 IB 中使用 UIStackView 来完成以下结构:

2016-07-20-屏幕快照 2016-07-20 17.23.53.png

首先上面的 ImageView 是直接做约束完成的。

然后我们可以选择左下角的三个 Label,然后点击右下角第一个图标合成 UIStackView:

2016-07-20-屏幕快照 2016-07-20 17.26.30.png

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

2016-07-20-屏幕快照 2016-07-20 17.29.29.png

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

2016-07-20-屏幕快照 2016-07-20 17.31.28.png

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

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

2016-07-20-屏幕快照 2016-07-20 17.33.03.png

接下来结构内部子控件约束:

2016-07-20-屏幕快照 2016-07-20 17.33.34.png

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

2016-07-20-屏幕快照 2016-07-20 17.35.10.png

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

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

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) ...
}

第一个要领是用来创建一个 UIStackView 的,传入 views 里的数组的顺序代表了 UIStackView 里子视图的顺序。

第二个要领是用来获得 UIStackView 里有哪些子视图的。

后面3个要领和 UIView 里的要领是类似的。

看到 addArrangedSubview 和 removeArrangedSubview 你是不是想到了addSubView 和removfromSuperView。

下面有张表,可以区别这四个要领:

1469704321336287.png

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

UIStackView 用来约束子视图的属性有以下几个

var axis: UILayoutConstraintAxis
var distribution: UIStackViewDistribution
var alignment: UIStackViewAlignment
var spacing: CGFloat
var baselineRelativeArrangement: Bool
var layoutMarginsRelativeArrangement: Bool

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

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

用意志战胜身体的惰性!

(0)

本文由 姬長信 创作,文章地址:https://blog.isoyu.com/archives/895.html
采用知识共享署名4.0 国际许可协议进行许可。除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。最后编辑时间为:7月 29, 2016 at 07:59 上午

关键词:

热评文章

发表回复

[必填]

我是人?

提交后请等待三秒以免造成未提交成功和重复