一个App完成入门篇（四）

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

• 导入项目
• 添加新组件
• 同步新组件
• 完成页面布局
• 输入时加动画效果
• 弹出日期选择
• 直接引用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组件，并将页面的其他地方设置为灰色透明效果，

原标题：一个App完成入门篇（四）

关键词：