天天看点

UIStackView使用的简单介绍

一、引言

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

二、初识UIStackView

UIStackView使用的简单介绍

可以看到UIStackView分为两种类型,一个是水平排布,一个是竖直排布,这两个排布的方向是对子视图而言的。

而这几个属性至关重要,它们都是用来约束子视图的,对UIStackView不起作用。下面简单介绍一下这几个属性,

Axis是设置布局的方式,可以设置成水平布局,也可以设置成垂直布局

Alignment设置其管理视图的对其模式

Distribution设置其管理视图的排列方式

Spacing设置其管理视图之间的间距

三、在storyBoard中体验UIStackView

首先在storyBoard中拖入两个UIStackView,如图:

UIStackView使用的简单介绍

上面是竖直排列的,下面是水平排列的。

接下来向上面的StackVie中添加几个控件,一个label,一个imageView,还有一个button,添加后的效果:

UIStackView使用的简单介绍

我们要在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(, 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(, animations: {
        self.horizontalStackView.layoutIfNeeded()
    })
}
           

此时我们应该注意到,用代码的方式将控件添加到StackView上时,一定要使用addArrangedSubview这个方法,而不是使用addSubview,说一下这两者的区别:addArrangedSubview和addSubview有很大的区别,使用前者是将试图添加进StackView的布局管理,后者只是简单的加在试图的层级上,并不接受StackView的布局管理。

然后再向上面的StackView中添加一个button,命名为remove,当我们将控件拖入的时候,它会自动的排布在最下面,这是因为上面的StackView是竖直排布的,但是我们此时想让add和remove两个button水平排布,这怎么实现呢,这就会用到StackView的嵌套,有一个快捷生产StackView的方法,选中两个button,点击右下角的图标,就会帮我们生成一个StackView,这是不是很方便呢!

UIStackView使用的简单介绍

将删除按钮的事件拖出来,删除方法如下:

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

此时注意一定要加上removeFromSuperview(),要不然它不会从视图上移除,removeArrangeSubView只是告诉StackView不再需要管理subview等等约束,而remove方法中调用的removeFromSuperview()是把subview从视图上移除。

UIStackView给我们带来了很多便利,大大简化了界面的开发难度。如果有兴趣的朋友可以从github下载。

原文请点击这里