一個(gè)App完成入門篇（三）-完善主框架

DobbyKim 發(fā)布于2019-08-19 18:11 / 2478人閱讀

摘要：本節(jié)教程將繼續(xù)帶領(lǐng)大家完善教學(xué)導(dǎo)入項(xiàng)目完善主框架完成子視圖打開(kāi)新頁(yè)啟動(dòng)動(dòng)畫(huà)將要學(xué)習(xí)的效果圖如下所示如何導(dǎo)入完整項(xiàng)目本節(jié)示例請(qǐng)參考下載地址，可以導(dǎo)入到設(shè)計(jì)器中學(xué)習(xí)。完成子視圖接下來(lái)我們來(lái)完成需要展示的子視圖。

本節(jié)教程將繼續(xù)帶領(lǐng)大家完善教學(xué)demo

導(dǎo)入項(xiàng)目
完善主框架
完成viewShower子視圖
打開(kāi)新頁(yè)
啟動(dòng)動(dòng)畫(huà)
將要學(xué)習(xí)的demo效果圖如下所示

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

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

完善主框架
在上一節(jié)教程搭建主框架中大家已經(jīng)學(xué)會(huì)了如何主框架，本節(jié)教程使用上一節(jié)未完成的demo。

我們分析一下demo機(jī)構(gòu)，通過(guò)點(diǎn)擊Bottom Bar上的不同按鈕來(lái)切換內(nèi)容，這種情況下最適合用ViewShower這個(gè)組件，ViewShower是一個(gè)包含多個(gè)子VIew的UI容器組件。我們從組件列表里拖一個(gè)ViewShower到UI設(shè)計(jì)頁(yè)面中，并通過(guò)調(diào)整x/y/width/height為0,0,750,1109將其固定在body的位置，把組件ID改為do_ViewShower_main。

雙擊index.ui.js打開(kāi)代碼編輯頁(yè)面，先通過(guò)ID實(shí)例化ViewShower組件，再給ViewShower綁定數(shù)據(jù)，在DeviceOne的組件庫(kù)中，ViewShower、ListView等這種容器類都是采用MVVM形式來(lái)綁定數(shù)據(jù)的，使得開(kāi)發(fā)人員可以將View和業(yè)務(wù)邏輯分離出來(lái)。

這里先給ViewShower定義需要綁定的數(shù)據(jù)viewShower_data，其中id需要保持唯一，否則后id已經(jīng)存在，會(huì)覆蓋之前的View；path為需要展示的子View所在的UI頁(yè)面的絕對(duì)路徑，此時(shí)path所指的三個(gè)頁(yè)面還不存在，一會(huì)來(lái)創(chuàng)建。定義好數(shù)據(jù)后，通過(guò)ViewShower的addViews方法將數(shù)據(jù)綁定進(jìn)去，在調(diào)showView方法使其先默認(rèn)顯示第一個(gè)頁(yè)面，即id為”news”的子頁(yè)面。

想要完成每點(diǎn)擊一個(gè)按鈕就切換顯示的子View，還需要在每個(gè)按鈕的點(diǎn)擊事件里加上切換子View的方法showView，并通過(guò)show不同id的子View來(lái)切換頁(yè)面。

完成viewShower子視圖
接下來(lái)我們來(lái)完成需要展示的子View視圖。

在view目錄上點(diǎn)擊右鍵，選擇New-Folder，填寫要?jiǎng)?chuàng)建的目錄名稱為”news”，新建后再在news目錄上點(diǎn)擊右鍵，選擇New-UI File新建名稱為main的UI界面，在創(chuàng)建頁(yè)面的同時(shí)IDE會(huì)同時(shí)創(chuàng)建一個(gè)跟main.ui關(guān)聯(lián)的代碼文件main.ui.js，雙擊打開(kāi)main.ui文件，向頁(yè)面的最外層ALayout中再拖進(jìn)一個(gè)ALayout組件作為viewShower子View的最外層容器，修改它的id為do_ALayout_main，調(diào)整高度為1109，因?yàn)樵谥黜?yè)面index.ui中viewShower的高度也為1109，如果子View的寬高超過(guò)它父容器viewShower的寬高會(huì)導(dǎo)致內(nèi)容顯示不全的問(wèn)題，

再向該頁(yè)面的do_ALayout_main中拖拽一個(gè)Label，修改Label的text為“新聞”。這樣viewShower的一個(gè)子View就完成了，其他兩個(gè)子View也是相同內(nèi)容，所以只需負(fù)責(zé)該頁(yè)面即可，在news目錄上點(diǎn)擊右鍵，選擇Copy,再點(diǎn)擊View目錄選擇Paste，填寫目錄名為“find”，打開(kāi)main.ui修改Label的text為“搜索”即可，同樣的再?gòu)?fù)制、粘貼一次，修改目錄名為“contact”、Label的text為“通訊錄”，這樣viewShower的三個(gè)子View就完成了。（再多復(fù)制一份，目錄名改成“feedback”，Label的text為“反饋”，為后續(xù)做準(zhǔn)備）

打開(kāi)新頁(yè)
在Bottom Bar中，我們想通過(guò)點(diǎn)擊第四個(gè)按鈕“反饋”來(lái)另外打開(kāi)一個(gè)新頁(yè)面，讓用戶填寫反饋信息。先雙擊打開(kāi)feedback目錄中的main.ui文件，在do_ALayout_main中繼續(xù)添加一個(gè)ALayout作為該頁(yè)面的top，ID改為do_ALayout_1，調(diào)整寬高分別為750/128；再向do_ALayout_1中添加一個(gè)ALayout用于點(diǎn)擊，ID改為do_ALayout_back，調(diào)整位置、寬高分別為x=4，y=6，width=147，height=110；再向do_ALayout_back中添加一個(gè)Label用于展示文字，ID改為do_Label_3，將Label的text改為“返回”。

打開(kāi)main.ui.js，訂閱do_ALayout_back的點(diǎn)擊事件用于關(guān)閉該頁(yè)面。同時(shí)處理在點(diǎn)擊android設(shè)備的虛擬返回按鈕時(shí)也關(guān)閉該頁(yè)面。

回到index.ui.js，在do_ALayout_b3的touch事件中調(diào)用app的openPage方法，將目標(biāo)地址指向剛剛調(diào)整過(guò)的/feedback/main.ui頁(yè)面，將頂部狀態(tài)欄顯示狀態(tài)改為透明（控制statusBarState參數(shù)為“transparent”）以全屏形式打開(kāi)新頁(yè)，同時(shí)將打開(kāi)頁(yè)面的動(dòng)畫(huà)類型（animationType）改成從右往左推出（push_r2l）。

啟動(dòng)動(dòng)畫(huà)
為了讓app有更生動(dòng)的效果，我們讓demo一進(jìn)入的時(shí)候有一個(gè)動(dòng)畫(huà)效果作為歡迎頁(yè)面，在source://view下創(chuàng)建一個(gè)跟index.ui平級(jí)的start.ui頁(yè)面，在根ALayout里添加一個(gè)與根ALayout一樣大小的ImageView，將ID改為do_ImageView_content,給這個(gè)ImageView一個(gè)source顯示圖片；再添加一個(gè)Label組件，修改ID為do_Label_welcome，修改do_Label_welcome的fontColor/fontSize屬性調(diào)整顯示字體的顏色和大小，頁(yè)面就完成了。再雙擊打開(kāi)start.ui.js頁(yè)面，

先實(shí)例化當(dāng)前頁(yè)面的UI組件，并定義需要使用到的相關(guān)組件，在定義一個(gè)MM組件animation用于調(diào)用UI組件的動(dòng)畫(huà)，這個(gè)動(dòng)畫(huà)是控制ImageView組件的，所以ID定義為img_anima，通過(guò)修改img_anima的屬性，我們可以操控這個(gè)動(dòng)畫(huà)的走向，這里想讓ImageView的動(dòng)畫(huà)是縮放，所以選擇scale方法，通過(guò)給scale方法的不同參數(shù)以不同的參數(shù)值來(lái)制作這個(gè)動(dòng)畫(huà)，比如delay設(shè)置成0既是讓動(dòng)畫(huà)立即開(kāi)始，duration設(shè)置成2000是讓整個(gè)動(dòng)畫(huà)時(shí)間為2秒等等..

接下來(lái)也是同樣的方法給Label定義一個(gè)旋轉(zhuǎn)的動(dòng)畫(huà)，最后通過(guò)調(diào)用所有UI組件都通用的animate方法我們將定義的這些動(dòng)畫(huà)加在UI組件上并在動(dòng)畫(huà)完成后打開(kāi)新頁(yè)main.ui。

到此，本節(jié)教程就結(jié)束了，趕快拿起手機(jī)打開(kāi)調(diào)試來(lái)查看效果吧！