新手引导页之全自动布局-阿里云开发者社区

开发者社区> 云计算> 正文

新手引导页之全自动布局

简介: storyboard创建新手引导页 原理: 1.添加Scroll View,用约束设置Scroll View的frame。 2.添加View,作用是相当于设置Scroll View的contentSize,也是用约束。

storyboard创建新手引导页

原理:

1.添加Scroll View,用约束设置Scroll View的frame。

2.添加View,作用是相当于设置Scroll View的contentSize,也是用约束。

3.添加imageView,设置位置和图片,也是用约束,作用相当于设置新手引导页的图片。

详解:

 

1.添加Scroll View,用约束设置Scroll View的frame。

创建一个Scroll View,添加约束据self.view上下左右都为0,这一步可以相当于设置Scroll View的frame的大小。

2.添加View,作用是相当于设置Scroll View的contentSize,也是用约束。
在Scroll View上再添加一个View(为了不和系统自带的View一样,所以最好重命名一下),设置一下约束,高和系统自带的View(就是self.view)的高一样,宽是系统自带的宽View(就是self.view)宽的4倍(假设新手引导页有四张图片,如果有五张图片的话这个地方就要设置为宽的5倍),然后就是据父视图(就是Scroll View)设置约束上下左右都为0(就是说Scroll View内容的大小就会和这个View的大小一样,添加的这个View就相当于设置了Scroll View的contentSize,view的大小也就是contentSize的大小,前提是你得设置约束,view据父视图(Scroll View)的上下左右都为0才可以)。
3.添加imageView,设置位置和图片,也是用约束,作用相当于设置新手引导页的图片。
首先新手指导页是用图片组成的,有几个图片就添加几个imageView,然后就是利用约束设置imageView的起始位置和大小。
假设这里有四个imageView,首先设置第一个imageView的起始位置和大小。
添加约束,和View同高,宽为View的四分之一,就是0.25,水平中心为View中心的四分之一,垂直中心和View的中心一样。
第二个的imageView的设置方法也差不多,都是以父视图View加约束高都一样,款也都是一样,水平中心的改为0.75,垂直中心都一样。
同样的,第三个和第四个只要更改水平中心的改为1.25和1.75就可以了,高度和View都一样,宽度和View.四分之一都一样,垂直中心都一样。

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章