一個App完成入門篇（四）- 完成反饋頁面

import. 發(fā)布于2019-08-01 15:12 / 810人閱讀

摘要：上一節(jié)中我們學(xué)會了如何通過點(diǎn)擊不同按鈕切換頁面，這節(jié)專注于完成反饋頁面的功能以及細(xì)節(jié)動畫。直接引用頁面要實(shí)現(xiàn)文章頂部的效果圖第三張所示效果，我們首先要多帶帶添加一個頁面，只放一個組件，并將頁面的其他地方設(shè)置為灰色透明效果，

上一節(jié)中我們學(xué)會了如何通過點(diǎn)擊不同按鈕切換頁面，這節(jié)專注于完成反饋頁面的功能以及細(xì)節(jié)動畫。

導(dǎo)入項(xiàng)目
添加新組件
同步新組件
完成頁面布局
輸入時加動畫效果
彈出日期選擇
直接引用UI頁面
將要學(xué)習(xí)的demo效果圖如下所示

導(dǎo)入完整項(xiàng)目

本節(jié)示例demo請參考下載地址，可以導(dǎo)入到設(shè)計器中學(xué)習(xí)。

添加新組件
本節(jié)中將要用到兩個新組件，do_DateTimePicker和do_Picker組件，這兩個組件是在創(chuàng)建應(yīng)用時沒有的，需要從組件商店中添加。在第一節(jié)Hello World教程中，我們通過設(shè)計器新建的項(xiàng)目，會在開發(fā)者中心-應(yīng)用開發(fā)創(chuàng)建一個相應(yīng)的應(yīng)用，如圖所示

我們點(diǎn)擊應(yīng)用配置按鈕，進(jìn)入應(yīng)用配置頁，選擇“組件配置”，如下圖所示

藍(lán)框中的內(nèi)容是當(dāng)前應(yīng)用可使用的組件列表，每個組件都有不同版本，每個版本對應(yīng)著更新了不同內(nèi)容，用戶在使用時選擇自己想用的版本即可；點(diǎn)擊綠框中的“添加組件”按鈕，然后選擇“商店組件”，找到do_Picker和do_DataTimePicker組件，點(diǎn)擊后面的“+”號進(jìn)行添加組件操作，此時再返回“組件列表”中就可以看到剛剛我們新添加的兩個組件了。

同步新組件
想要在設(shè)計器中使用剛剛添加的兩個組件，只需要在WorkSpace中選中該應(yīng)用，再點(diǎn)擊一下同步按鈕即可。這樣我們從商店選擇的新組件就可以在設(shè)計器中使用了。

完成頁面布局
分析一下頁面布局，這里我們使用一個線性布局LinearLayout(紅框)去包裹四個絕對布局ALayout（藍(lán)框）這四個ALayout的ID從上到下分別設(shè)置為do_ALayout_3、do_ALayout_createTime、do_ALayout_type和do_ALayout_7，因?yàn)榫€性布局所有內(nèi)部子控件都從上向下羅列，保證組件直接緊密排列，每個ALayout中又去分別包裹Label標(biāo)簽組件、TextBox、TextField等用于顯示和輸入的組件，最底下都有一個height為1，bgColor為灰色的ALayout作為一條分割線。

輸入時加動畫效果
在ID為do_ALayout_3的ALayout中，添加一個Label組件（修改ID為do_Label_title）和一個單行文本TextField（修改ID為do_TextField_title），通過給Label設(shè)置text屬性為“標(biāo)題”來展示我們想要顯示的文字；修改TextField的hint屬性為“標(biāo)題”能讓該組件在text屬性為空時顯示提示信息。

我們想讓輸入文字時有顯示“標(biāo)題”的Label組件有一個向上的動畫效果，直接訂閱TextField的textChanged事件，這個事件會在text改變時觸發(fā)，在事件的回調(diào)中調(diào)用所有UI都有的基類方法show，通過給show方法設(shè)置動畫類型和動畫時間參數(shù)，來達(dá)到Label的動畫效果，需要說明的是，在使用show方法前要保證UI組件的visible是為false的才會有動畫效果。同樣的效果我們也給放“內(nèi)容”的Label加上。

彈出日期選擇
我們想要在點(diǎn)擊“反饋時間”的do_ALayout（ID為）時彈出do_DateTimePicker選擇日期，只需要訂閱do_ALayout_createTime的touch點(diǎn)擊事件，在觸發(fā)事件的回調(diào)中調(diào)用do_DateTimePicker的show方法來顯示一個日期選擇器。

因?yàn)閐o_DateTimePicker是SM類型的，這里直接通過類型來對組件進(jìn)行實(shí)例化。

直接引用UI頁面
要實(shí)現(xiàn)文章頂部的效果圖第三張所示效果，我們首先要多帶帶添加一個UI頁面，只放一個Picker組件，并將頁面的其他地方設(shè)置為灰色透明效果，