iOS开发之StackView

本文介绍的还是跟适配有关的内容,今天讲的是iOS8新出的特性StackView。该特性的推出是专门解决适配问题的。下面简单介绍使用它的两种方法。

下面看看demo的运行效果:(图有点丑,将就的看吧,主要是学习使用)


下面来介绍StackView的使用:

1.在控件库中拖一个垂直的StackView(由效果可以看出需要垂直排列图片),垂直StackView如下:

2.向StackView中拖入3个UIImageView控件,直接拖进去就行,什么也别管。效果如下:

3.尽管StackView是帮助我们自动给UI设置约束的,但是,StackView本身的约束还是需要我们自己完成的,下面设置StackView的约束,如下:

StackView距离上、左、右边距分别为0、10、0,利用下方约束按钮进行设置。选中StackView

再约束StackView的高度。使其高度为self.view高度的70%

找到该约束,进入进行详细设置,如下:

4.约束完StackView后,效果如下:


5.根据效果图设置UIimageView控件之间的属性,在右侧属性栏中按照如下设置

6.效果如下:


7.设置图片,运行查看效果,如下:

8.接下来,我们在图片的下面,添加两个label和两个button吧。这次我不会先拖StackView了,而是使用如下按钮。


9.向storyboard中拖入两个label,垂直放置。设置下面label的Lines为0,line breaks为Word Wrap,同时选中两个label,再点击上述的stack view按钮。这样就将这两个label放在一个stackview中,如下:

10.再拖两个button到storyboard中,如下:


11.选中两个按钮,再点击stack view按钮,这样也就将两个button放在一个stackview中,效果如下:

12.将button所在的stackview拖到label所在的stackview中,放在两个label之间,效果如下:

13.要想让label----1与按钮水平放置,选中label----1和button所在的stackview,再点击下面的stackview按钮,这样就把label----1与button所在的stackview放在了一个stackview中。


14.对这个新的stackview的属性栏进行如下设置:

15.现在只有一个stackvew没有设置约束就了,就是包含两个label、两个button的大stackview,下面设置约束。

该stackview距离上面的stackview间距为20,距离self.view的左右间距为0。

到现在为止,项目已经完成。运行看一下吧,和前面讲到的效果是一样的。如下横屏的时候显示如下样式是不是更爽呢。

这里就用到了size class的知识。这里就简单的使用以下。

1.选中图片所在的stackview,在右侧属性栏中点击Axis右侧“+”按钮。如下:

选择Any Width ->Compact Height,就会多出一个属性,将该属性设置为水平样式即可,如下:

运行项目之后,横竖屏如下所示:



stackview就介绍到这里了。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值