UIStackView

作者: Girl_iOS | 来源:发表于2015-10-27 22:33 被阅读1156次

    iOS9在布局方面最大的变化就是引入了UIStackView.那么它是什么呢?简单讲就是一个容器里可以包含多个控件,分为水平和竖直排列.我们只需约束这个容器即可,而不用一个个地去约束容器内的控件.而且这个容器是可以嵌套的.如果你接触过Watch开发,UIStackView有点像其中的Group控件.那就随我去瞅瞅它是什么吧!
    首先选中三个UIButton:

    Screen Shot 2015-10-27 at 9.15.48 PM.png Screen Shot 2015-10-27 at 9.16.54 PM.png

    然后点一下约束左边的那个有箭头的东西:

    Screen Shot 2015-10-27 at 9.17.49 PM.png

    ok,已经很轻松的完成了一个UIStackView!

    Screen Shot 2015-10-27 at 9.18.57 PM.png

    然后只要约束一下这个UIStackView就可以了.

    Screen Shot 2015-10-27 at 9.21.16 PM.png

    我们可以看到这个UIStackView有几个属性:三个按钮水平并排,可以看到Axis的属性为Horizontal,即轴线属性为水平.Distribution属性为Equal Spacing即相隔相同距离.All Done.很容易就完成了这三个按钮的布局.而如果按照以往,你可能需要做很多约束:(

    Screen Shot 2015-10-27 at 9.27.24 PM.png

    关于Alignment的属性,水平和竖直时有区别:

    Screen Shot 2015-10-27 at 9.59.19 PM.png

    水平时各个属性的效果:

    Screen Shot 2015-10-27 at 10.00.56 PM.png Screen Shot 2015-10-27 at 10.01.15 PM.png

    竖直时各个属性的效果:

    Screen Shot 2015-10-27 at 10.01.51 PM.png
    AutoLayout还有两个新物件layout anchorslayout guides
    • Layout anchors
      当我们有两个UILabel,bottomLabel和topLabel,你想把bottomLabel放在topLabel右边间隔8 points的位置,以前你需要添加如下约束:
    let constraint = NSLayoutConstraint( 
       item: topLabel, 
       attribute: .Bottom, 
       relatedBy: .Equal,
       toItem: bottomLabel, 
       attribute: .Top,
       multiplier: 1, 
       constant: 8
    )
    

    现在可以简化为:

        let constraint = topLabel.bottomAnchor.constraintEqualToAnchor(
              bottomLabel.topAnchor, constant: 8)
    

    相关文章

      网友评论

      • MoussyL:亲,文中你对stackView添加了怎样的约束呢?高度是不是固定的?我想实现的是竖直方向N个Label,根据请求数据的不同然后动态去添加Label,但是间隙都是一样的,这种效果能用stackView实现吗?是不是需要拉出一个stackView的高度约束 ,然后去动态的改变?
      • 青青河边草2041:楼主的“水平时各个属性的效果:”和“竖直时各个属性的效果:”写反了。。。笔误了吧?
        Girl_iOS:@青青河边草2041 我在看的时候确实也发现这个问题了、不过书中也是这样的顺序、好奇怪😅
      • 遗忘的黑鹰:你好,这些新特新你一般在哪些网站get?
        青青河边草2041:@Smiacter_Yin 这一篇在raywenderlich的网站上有...

      本文标题:UIStackView

      本文链接:https://www.haomeiwen.com/subject/qbjxhttx.html