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

本节教程将继续带领你们完善教学demo

导入项目
完善主框架
完成viewShower子视图
打开新页
启动动画
将要学习的demo效果图以下所示

1. 如何导入完整项目

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

1. 完善主框架
   在上一节教程搭建主框架中你们已经学会了如何主框架，本节教程使用上一节未完成的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来切换页面。

1. 完成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为“反馈”，为后续作准备）

1. 打开新页
   在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）。

1. 启动动画
   为了让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秒等等..

接下来也是一样的方法给Label定义一个旋转的动画，最后经过调用全部UI组件都通用的animate方法咱们将定义的这些动画加在UI组件上并在动画完成后打开新页main.ui。

到此，本节教程就结束了，赶快拿起手机打开调试来查看效果吧！