你的位置:首页 > Java教程

[Java教程]一个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秒等等..

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

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