上一節中我們學會瞭如何通過點擊不同按鈕切換頁面，這節專註於完成反饋頁面的功能以及細節動畫。 導入項目 添加新組件 同步新組件 完成頁面佈局 輸入時加動畫效果 彈出日期選擇 直接引用UI頁面 將要學習的demo效果圖如下所示 1. 導入完整項目 本節示例demo請參考下載地址，可以導入到設計器中學習。 ...
上一節中我們學會瞭如何通過點擊不同按鈕切換頁面，這節專註於完成反饋頁面的功能以及細節動畫。
- 導入項目
- 添加新組件
- 同步新組件
- 完成頁面佈局
- 輸入時加動畫效果
- 彈出日期選擇
- 直接引用UI頁面
將要學習的demo效果圖如下所示
本節示例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組件，並將頁面的其他地方設置為灰色透明效果，
