实例 8
添加自适应视图
教学视频:视频 \ 第 2 章 \ 添加自适应视图 .mp4 源文件:源文件 \ 第 2 章 \ 添加自适应视图 .rp
实例分析:
自适应视图可以将绘制的原型应用到各种尺寸的界面中,本实例设置了 5 种尺寸,将绘制的内容自适应到 5 种尺寸的界面中,显示不同的效果。
制作步骤:
01、执行"文件 > 新建"命令,新建一个项目文件,如图 2-135 所示。分别从元件面板中将矩形元件、占位符元件和按钮元件拖入到页面中,效果如图 2-136 所示。
02、单击"管理自适应视图"按钮,如图 2-137 所示。弹出"自适应视图"对话框,如图 2-138所示。
03、单击"添加"按钮,修改"名称"为"手机纵 <=320",其他参数如图 2-139 所示。继续设定视图,完成效果如图 2-140 所示。
提示:通常情况下,会考虑网页、手机纵、手机横、平板纵和平板横 5 种情况,以保证原型在大多数终端可以正常显示。
04、单击"确定"按钮,在页面编辑区顶部显示不同视图的标签,如图 2-141 所示。分别选择不同的视图标签,调整页面显示效果,如图 2-142 所示。使得内容适应不同尺寸的页面显示。
提示:在修改不同视图尺寸中的对象显示效果时,如果勾选了"影响所有视图"选项,则修改对象时会影响全部的视图效果。
单击工具栏上的"预览"按钮,拖动浏览器边框改变浏览器视图大小,预览页面在不同页面尺寸下的效果,如图 2-143 所示。
版权声明:51Testing软件测试网获清华大学出版社和作者授权连载本书部分章节。任何个人或单位未获得明确的书面许可,不得对本文内容复制、转载或进行镜像,否则将追究法律责任。