UIStackView使用的简单介绍

一、引言

前几天在公司做了一个关于UIStackView的技术分享，下面给大家简单介绍一下UIStackView。UIStackView是iOS9推出的新特性，使我们对页面的布局更加的方便快捷，之前我们一直使用autolayout配合storyBoard进行页面布局，并且手动添加约束，但是对于一些线性布局来说，手动添加很多约束会使我们感到很繁琐，都是在做一些重复的操作，而UIStackView的出现给我们的线性布局带来了极大的方便，UIStackView的最大的优点是，它会自动的为其上的子视图添加约束，不需要我们手动的添加，但是UIStackView的约束是需要我们自己添加的。

二、初识UIStackView

可以看到UIStackView分为两种类型，一个是水平排布，一个是竖直排布，这两个排布的方向是对子视图而言的。
而这几个属性至关重要，它们都是用来约束子视图的，对UIStackView不起作用。下面简单介绍一下这几个属性，
Axis是设置布局的方式，可以设置成水平布局，也可以设置成垂直布局
Alignment设置其管理视图的对其模式
Distribution设置其管理视图的排列方式
Spacing设置其管理视图之间的间距

三、在storyBoard中体验UIStackView

首先在storyBoard中拖入两个UIStackView，如图：

上面是竖直排列的，下面是水平排列的。
接下来向上面的StackVie中添加几个控件，一个label，一个imageView，还有一个button，添加后的效果：

我们要在Attributes Inspector里修改一下刚才添加的subview的属性。把label的文字设置成“技术分享”， Text Alignment选择Center 。 Content Mode选Aspect Fit。最后把button的Text 设置成“Add”。此时storyBoard会报错，提示我们设置imageView的高度，但是这时千万不要设置，当我们给imageView添加完图片之后，它会自动计算高度，如果在这设置了imageView的高度，可能会导致图片的变形。
将按钮的点击事件和界面联系起来，创建一个名为add的点击事件，同时将下面的StackView拖出来，命名为myStackView。
点击事件如下：

@IBAction func add(sender: AnyObject) {    let starImgVw:UIImageView = UIImageView(image: UIImage(named: "star"))    self.myStackView.addArrangedSubview(starImgVw)    UIView.animateWithDuration(0.25, animations: {        self.horizontalStackView.layoutIfNeeded()    })}

但是此时运行会出现问题，因为我们没有设置下面StackView的几个属性，导致图片被拉伸，填充了整个StackView。
修改Alignment 的值为Center ，修改Distribution 的值为Fill Equally。最后在add(_:)方法中设置image view的内容

@IBAction func add(sender: AnyObject) {    let starImgVw:UIImageView = UIImageView(image: UIImage(named: "star"))    starImgVw.contentMode = .ScaleAspectFit    self.myStackView.addArrangedSubview(starImgVw)    UIView.animateWithDuration(0.25, animations: {        self.horizontalStackView.layoutIfNeeded()    })}

此时我们应该注意到，用代码的方式将控件添加到StackView上时，一定要使用addArrangedSubview这个方法，而不是使用addSubview，说一下这两者的区别：addArrangedSubview和addSubview有很大的区别，使用前者是将试图添加进StackView的布局管理，后者只是简单的加在试图的层级上，并不接受StackView的布局管理。
然后再向上面的StackView中添加一个button，命名为remove，当我们将控件拖入的时候，它会自动的排布在最下面，这是因为上面的StackView是竖直排布的，但是我们此时想让add和remove两个button水平排布，这怎么实现呢，这就会用到StackView的嵌套，有一个快捷生产StackView的方法，选中两个button，点击右下角的图标，就会帮我们生成一个StackView，这是不是很方便呢!

将删除按钮的事件拖出来，删除方法如下：

@IBAction func remove(sender: AnyObject) {    let star:UIView? = self.myStackView.arrangedSubviews.last    if let aStar = star    {        self.myStackView.removeArrangedSubview(aStar)        aStar.removeFromSuperview()        UIView.animateWithDuration(0.25, animations: {            self.horizontalStackView.layoutIfNeeded()        })    }}

此时注意一定要加上removeFromSuperview()，要不然它不会从视图上移除，removeArrangeSubView只是告诉StackView不再需要管理subview等等约束，而remove方法中调用的removeFromSuperview()是把subview从视图上移除。
UIStackView给我们带来了很多便利，大大简化了界面的开发难度。如果有兴趣的朋友可以从github下载。

原文请点击这里