一个App完成入门篇（三）-完善主框架

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

本节教程将继续带领大家完善教学demo

导入项目
完善主框架
完成viewShower子视图
打开新页
启动动画

将要学习的demo效果图如下所示

1. 如何导入完整项目

本节示例demo请参考下载地址，可以导入到设计器中学习。

2. 完善主框架
在上一节教程搭建主框架中大家已经学会了如何主框架，本节教程使用上一节未完成的demo。

我们分析一下demo机构，通过点击Bottom Bar上的不同按钮来切换内容，这种情况下最适合用ViewShower这个组件，ViewShower是一个包含多个子VIew的UI容器组件。我们从组件列表里拖一个ViewShower到UI设计页面中，并通过调整x/y/width/height为0,0,750,1109将其固定在body的位置，把组件ID改为do_ViewShower_main。

双击index.ui.js打开代码编辑页面，先通过ID实例化ViewShower组件，再给ViewShower绑定数据，在DeviceOne的组件库中，ViewShower、ListView等这种容器类都是采用MVVM形式来绑定数据的，使得开发人员可以将View和业务逻辑分离出来。

这里先给ViewShower定义需要绑定的数据viewShower_data，其中id需要保持唯一，否则后id已经存在，会覆盖之前的View；path为需要展示的子View所在的UI页面的绝对路径，此时path所指的三个页面还不存在，一会来创建。定义好数据后，通过ViewShower的addViews方法将数据绑定进去，在调showView方法使其先默认显示第一个页面，即id为”news”的子页面。

想要完成每点击一个按钮就切换显示的子View，还需要在每个按钮的点击事件里加上切换子View的方法showView，并通过show不同id的子View来切换页面。

3. 完成viewShower子视图
接下来我们来完成需要展示的子View视图。

在view目录上点击右键，选择New-Folder，填写要创建的目录名称为”news”，新建后再在news目录上点击右键，选择New-UI File新建名称为main的UI界面，在创建页面的同时IDE会同时创建一个跟main.ui关联的代码文件main.ui.js，双击打开main.ui文件，向页面的最外层ALayout中再拖进一个ALayout组件作为viewShower子View的最外层容器，修改它的id为do_ALayout_main，调整高度为1109，因为在主页面index.ui中viewShower的高度也为1109，如果子View的宽高超过它父容器viewShower的宽高会导致内容显示不全的问题，

再向该页面的do_ALayout_main中拖拽一个Label，修改Label的text为“新闻”。这样viewShower的一个子View就完成了，其他两个子View也是相同内容，所以只需负责该页面即可，在news目录上点击右键，选择Copy,再点击View目录选择Paste，填写目录名为“find”，打开main.ui修改Label的text为“搜索”即可，同样的再复制、粘贴一次，修改目录名为“contact”、Label的text为“通讯录”，这样viewShower的三个子View就完成了。（再多复制一份，目录名改成“feedback”，Label的text为“反馈”，为后续做准备）

4. 打开新页
在Bottom Bar中，我们想通过点击第四个按钮“反馈”来另外打开一个新页面，让用户填写反馈信息。先双击打开feedback目录中的main.ui文件，在do_ALayout_main中继续添加一个ALayout作为该页面的top，ID改为do_ALayout_1，调整宽高分别为750/128；再向do_ALayout_1中添加一个ALayout用于点击，ID改为do_ALayout_back，调整位置、宽高分别为x=4，y=6，width=147，height=110；再向do_ALayout_back中添加一个Label用于展示文字，ID改为do_Label_3，将Label的text改为“返回”。

打开main.ui.js，订阅do_ALayout_back的点击事件用于关闭该页面。同时处理在点击android设备的虚拟返回按钮时也关闭该页面。

回到index.ui.js，在do_ALayout_b3的touch事件中调用app的openPage方法，将目标地址指向刚刚调整过的/feedback/main.ui页面，将顶部状态栏显示状态改为透明（控制statusBarState参数为“transparent”）以全屏形式打开新页，同时将打开页面的动画类型（animationType）改成从右往左推出（push_r2l）。

5. 启动动画
为了让app有更生动的效果，我们让demo一进入的时候有一个动画效果作为欢迎页面，在source://view下创建一个跟index.ui平级的start.ui页面，在根ALayout里添加一个与根ALayout一样大小的ImageView，将ID改为do_ImageView_content,给这个ImageView一个source显示图片；再添加一个Label组件，修改ID为do_Label_welcome，修改do_Label_welcome的fontColor/fontSize属性调整显示字体的颜色和大小，页面就完成了。再双击打开start.ui.js页面，

先实例化当前页面的UI组件，并定义需要使用到的相关组件，在定义一个MM组件animation用于调用UI组件的动画，这个动画是控制ImageView组件的，所以ID定义为img_anima，通过修改img_anima的属性，我们可以操控这个动画的走向，这里想让ImageView的动画是缩放，所以选择scale方法，通过给scale方法的不同参数以不同的参数值来制作这个动画，比如delay设置成0既是让动画立即开始，duration设置成2000是让整个动画时间为2秒等等..