UIStackView 结合UIScrollView滑动显示

  大家好，今天分享一下IOS9中新出的UIStackView，网络上相关的文章还是有一些，但大部分内容都差不多，所以我的讲解方式可能给他们不一样，那我尽量以最简单明了的方式让大家快速理解，这个我从描述UIStackView的定义的时候，相信你就能看的出来OK，我们开始吧。

1，UIStackView到底是个什么东西？

   UIStackView看字面意思，就是在UIView中插入了一个Stack， Stack是什么意思了，查下字典，“堆叠，排列”， 没错，UIStackView就是用来排列其它子View的容器，而且这个排列是线性的，什么意思？也就是说要么横向排列，要么纵向排列，你不能横纵交替，像下图，



那也许你脑海里就在想“我好像在那儿看到UIStackView做出来的就是纵横交替的了，像下面这样子了”

  那我告诉你，他就是用的两个UIStackView 容器做出来的，横向一个，纵向一个，那这样的话就可以做出很复杂的布局了。

2， 如何应用UIStackView到项目中？

  我现在想纵向排列100个BUTTON，可以用UIStackView吧？当然可以，那就先NEW一个UIStackView对象吧，这个很容易想到，NEW之后了，要指明排列方向吧，这样它才知道是横着排了，还是竖着排。这两个设置就绪后，一个基本的容器就算建成了，接下来就就是将100个BUTTON放到容器里了，放进去就完了吗？对，放进去就完了。稍后我会把代码帖出来，再对着看一下就更明了了。

3，UIStackView如何结合UIScrollView使用？

   100个BUTTON，在一屏上肯定是显示不全的，那怎么办了 UIStackView没有自带scrollView的，那就只能用自已结合ScrollView来实现了。好吧，其实实现也很简单，首先创建一个scrollView，然后把stackView放到scrollView中去就可以了，当然要使其滑动，需要正确设置scrollView的contentSize，描述就是这样的。作为程序员，我相信最拿手的活就是看代码了，好吧， 废话不多说，上代码（注意：在layout时，使用了masonry，此文不作讲解）：

4，重要代码即注解

@available(iOS 9.0, *)  //因为UIStackView是IOS9.0中才有的，所以这儿要申明一下class TestStackViewController: BaseViewController {    var scrollView: UIScrollView!    var stackView: UIStackView!    override func viewDidLoad(){       super.viewDidLoad()       //创建scrollView, 置于self.view之上       scrollView = UIScrollView()       view.addSubview(scrollView)       self.scrollView.snp_makeConstraints { (make) -> Void in           make.edges.equalTo(self.view)       }       //创建容器，并设为竖直排列，置于scrollView上       stackView = UIStackView()       stackView.axis = .Vertical       scrollView.addSubview(stackView)       self.stackView.snp_makeConstraints { (make) -> Void in           make.top.equalTo(self.scrollView)           make.left.equalTo(self.scrollView)           make.right.equalTo(self.scrollView)           make.width.equalTo(self.scrollView)       }       //创建100个BUTTON       for index in 1 ..< 100 {           let button = UIButton(type: UIButtonType.System)           button.setTitle("Button" + String(index), forState: .Normal)           stackView.addArrangedSubview(button) //将BUTTON放于stackView容器中，此后不需要设置BUTTON的任何约束，就能实现从上到下排列显示，宽高都是自适应大小，注意这儿必须要用addArrangedSubview而不能用addSubView           button.frame = CGRectMake(0, 60, 300, 90) //不用设FRAME了，设了也不会起作用的，因为stackView会自动去添加一些约束。           button.backgroundColor = UIColor.randomColor()           button.snp_makeConstraints(closure: { (make) -> Void in               make.height.equalTo(60)//不能设FRAME，但设置约束就有效果了，所以在这儿可以更新BUTTON的显示           })       }    }    override func viewDidLayoutSubviews(){       super.viewDidLayoutSubviews()       //我们知道contentSize必须大于SIZE，在某个方向才能滑动。所以这儿需要设置contentSize，为什么要在这儿设了，因为这个地方刚好布局完成，所有的VIEW都有了明确的frame值，而你在viewDidLoad中去设置的话，frame值都还为0，结果会不违你所愿的。       scrollView.contentSize = CGSize(width: stackView.frame.width, height: stackView.frame.height)    }}</span>

运行效果如下（可滑动）：

 

5，UIStackView使用属性和方法说明：

    //构造方法，views为需要排列到StackView中的子Views    public init(arrangedSubviewsviews: [UIView])    //返回StackView中装入的Views    public var arrangedSubviews:[UIView] { get }     //往StackView中装入一个View    public func addArrangedSubview(view: UIView)    //从StackView中移除一个View    public func removeArrangedSubview(view: UIView)    //插入一个View到指定的Index    public func insertArrangedSubview(view: UIView, atIndexstackIndex: Int)    //设置排列方向，横向还是纵向，默认是横向    public var axis: UILayoutConstraintAxis    //属性决定了其管理的视图在沿着其轴向上的布局    public var distribution: UIStackViewDistribution    //(对齐)属性决定了其管理的视图在垂直于其轴向上的布局；比如Center居中对齐， Fill,填满， Leading,起点对齐等。    public var alignment: UIStackViewAlignment     //设置每个View间的间距，如果是横向排列的话，就是横向间距，纵向的话，就是纵向间距。    public var spacing: CGFloat    public var baselineRelativeArrangement: Bool    public var layoutMarginsRelativeArrangement: Bool