天天看点

UIStackView 结合UIScrollView滑动显示

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

1,UIStackView到底是个什么东西?

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



UIStackView 结合UIScrollView滑动显示

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

UIStackView 结合UIScrollView滑动显示

  那我告诉你,他就是用的两个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>
           

运行效果如下(可滑动):

UIStackView 结合UIScrollView滑动显示

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