论坛首页 Web前端技术论坛

一个App完成入门篇(四)- 完成反馈页面

浏览 1531 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2016-04-01  

上一节中我们学会了如何通过点击不同按钮切换页面,这节专注于完成反馈页面的功能以及细节动画。

  • 导入项目
  • 添加新组件
  • 同步新组件
  • 完成页面布局
  • 输入时加动画效果
  • 弹出日期选择
  • 直接引用UI页面

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

1. 导入完整项目

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

2. 添加新组件
本节中将要用到两个新组件,do_DateTimePicker和do_Picker组件,这两个组件是在创建应用时没有的,需要从组件商店中添加。在第一节Hello World教程中,我们通过设计器新建的项目,会在开发者中心-应用开发创建一个相应的应用,如图所示
我们点击应用配置按钮,进入应用配置页,选择“组件配置”,如下图所示
蓝框中的内容是当前应用可使用的组件列表,每个组件都有不同版本,每个版本对应着更新了不同内容,用户在使用时选择自己想用的版本即可;点击绿框中的“添加组件”按钮,然后选择“商店组件”,找到do_Picker和do_DataTimePicker组件,点击后面的“+”号进行添加组件操作,此时再返回“组件列表”中就可以看到刚刚我们新添加的两个组件了。

3. 同步新组件
想要在设计器中使用刚刚添加的两个组件,只需要在WorkSpace中选中该应用,再点击一下同步按钮即可。这样我们从商店选择的新组件就可以在设计器中使用了。

3. 完成页面布局
分析一下页面布局,这里我们使用一个线性布局LinearLayout(红框)去包裹四个绝对布局ALayout(蓝框)这四个ALayout的ID从上到下分别设置为do_ALayout_3、do_ALayout_createTime、do_ALayout_type和do_ALayout_7,因为线性布局所有内部子控件都从上向下罗列,保证组件直接紧密排列,每个ALayout中又去分别包裹Label标签组件、TextBox、TextField等用于显示和输入的组件,最底下都有一个height为1,bgColor为灰色的ALayout作为一条分割线。

4. 输入时加动画效果
在ID为do_ALayout_3的ALayout中,添加一个Label组件(修改ID为do_Label_title)和一个单行文本TextField(修改ID为do_TextField_title),通过给Label设置text属性为“标题”来展示我们想要显示的文字;修改TextField的hint属性为“标题”能让该组件在text属性为空时显示提示信息。

我们想让输入文字时有显示“标题”的Label组件有一个向上的动画效果,直接订阅TextField的textChanged事件,这个事件会在text改变时触发,在事件的回调中调用所有UI都有的基类方法show,通过给show方法设置动画类型和动画时间参数,来达到Label的动画效果,需要说明的是,在使用show方法前要保证UI组件的visible是为false的才会有动画效果。同样的效果我们也给放“内容”的Label加上。

5. 弹出日期选择
我们想要在点击“反馈时间”的do_ALayout(ID为)时弹出do_DateTimePicker选择日期,只需要订阅do_ALayout_createTime的touch点击事件,在触发事件的回调中调用do_DateTimePicker的show方法来显示一个日期选择器。

因为do_DateTimePicker是SM类型的,这里直接通过类型来对组件进行实例化。

6. 直接引用UI页面
要实现文章顶部的效果图第三张所示效果,我们首先要单独添加一个UI页面,只放一个Picker组件,并将页面的其他地方设置为灰色透明效果,

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics