新手引导页之全自动布局

简介: 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.四分之一都一样,垂直中心都一样。

相关文章
|
8月前
素颜个人引导页源码
素颜个人引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
76 11
素颜个人引导页源码
|
4月前
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
140 2
|
7月前
2024简约唯美的个人引导页源码
2024简约唯美的个人引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
189 4
|
8月前
|
前端开发 程序员
程序员必知:一、导航菜单
程序员必知:一、导航菜单
47 2
|
9月前
宽屏好看的个人引导页源码
宽屏好看的个人引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果
93 5
宽屏好看的个人引导页源码
|
9月前
超级好看动态视频引导页源码
超级好看动态视频引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
67 0
超级好看动态视频引导页源码
|
9月前
|
前端开发
前端知识笔记(二十)———简易弹窗制作
前端知识笔记(二十)———简易弹窗制作
94 0
|
定位技术
【Axure教程】拖拉拽放大缩小和移动元件
【Axure教程】拖拉拽放大缩小和移动元件
|
前端开发 JavaScript
两步实现在网站左下角实现音乐播放器弹窗听歌
两步实现在网站左下角实现音乐播放器弹窗听歌
216 0
两步实现在网站左下角实现音乐播放器弹窗听歌