转载

一个App完成入门篇（四）- 完成反馈页面

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

导入项目

添加新组件

同步新组件

完成页面布局

输入时加动画效果

弹出日期选择

直接引用UI页面

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

导入完整项目

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

添加新组件

本节中将要用到两个新组件，do_DateTimePicker和do_Picker组件，这两个组件是在创建应用时没有的，需要从组件商店中添加。在第一节Hello World教程中，我们通过设计器新建的项目，会在开发者中心 - 应用开发创建一个相应的应用，如图所示

一个App完成入门篇（四）- 完成反馈页面

我们点击应用配置按钮，进入应用配置页，选择“组件配置”，如下图所示

一个App完成入门篇（四）- 完成反馈页面

蓝框中的内容是当前应用可使用的组件列表，每个组件都有不同版本，每个版本对应着更新了不同内容，用户在使用时选择自己想用的版本即可；点击绿框中的“添加组件”按钮，然后选择“商店组件”，找到do_Picker和do_DataTimePicker组件，点击后面的“+”号进行添加组件操作，此时再返回“组件列表”中就可以看到刚刚我们新添加的两个组件了。

一个App完成入门篇（四）- 完成反馈页面

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

一个App完成入门篇（四）- 完成反馈页面

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

一个App完成入门篇（四）- 完成反馈页面

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

一个App完成入门篇（四）- 完成反馈页面

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

一个App完成入门篇（四）- 完成反馈页面