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

本節教程將繼續帶領你們完善教學demo

導入項目
完善主框架
完成viewShower子視圖
打開新頁
啓動動畫
將要學習的demo效果圖以下所示

1. 如何導入完整項目

本節示例demo請參考下載地址，能夠導入到設計器中學習。

1. 完善主框架
   在上一節教程搭建主框架中你們已經學會了如何主框架，本節教程使用上一節未完成的demo。

咱們分析一下demo機構，經過點擊Bottom Bar上的不一樣按鈕來切換內容，這種狀況下最適合用ViewShower這個組件，ViewShower是一個包含多個子VIew的UI容器組件。咱們從組件列表裏拖一個ViewShower到UI設計頁面中，並經過調整x/y/width/height爲0,0,750,1109將其固定在body的位置，把組件ID改成do_ViewShower_main。

雙擊index.ui.js打開代碼編輯頁面，先經過ID實例化ViewShower組件，再給ViewShower綁定數據，在DeviceOne的組件庫中，ViewShower、ListView等這種容器類都是採用MVVM形式來綁定數據的，使得開發人員能夠將View和業務邏輯分離出來。

這裏先給ViewShower定義須要綁定的數據viewShower_data，其中id須要保持惟一，不然後id已經存在，會覆蓋以前的View；path爲須要展現的子View所在的UI頁面的絕對路徑，此時path所指的三個頁面還不存在，一會來建立。定義好數據後，經過ViewShower的addViews方法將數據綁定進去，在調showView方法使其先默認顯示第一個頁面，即id爲」news」的子頁面。

想要完成每點擊一個按鈕就切換顯示的子View，還須要在每一個按鈕的點擊事件里加上切換子View的方法showView，並經過show不一樣id的子View來切換頁面。

1. 完成viewShower子視圖
   接下來咱們來完成須要展現的子View視圖。

在view目錄上點擊右鍵，選擇New-Folder，填寫要建立的目錄名稱爲」news」，新建後再在news目錄上點擊右鍵，選擇New-UI File新建名稱爲main的UI界面，在建立頁面的同時IDE會同時建立一個跟main.ui關聯的代碼文件main.ui.js，雙擊打開main.ui文件，向頁面的最外層ALayout中再拖進一個ALayout組件做爲viewShower子View的最外層容器，修改它的id爲do_ALayout_main，調整高度爲1109，由於在主頁面index.ui中viewShower的高度也爲1109，若是子View的寬高超過它父容器viewShower的寬高會致使內容顯示不全的問題，

再向該頁面的do_ALayout_main中拖拽一個Label，修改Label的text爲「新聞」。這樣viewShower的一個子View就完成了，其餘兩個子View也是相同內容，因此只需負責該頁面便可，在news目錄上點擊右鍵，選擇Copy,再點擊View目錄選擇Paste，填寫目錄名爲「find」，打開main.ui修改Label的text爲「搜索」便可，一樣的再複製、粘貼一次，修改目錄名爲「contact」、Label的text爲「通信錄」，這樣viewShower的三個子View就完成了。（再多複製一份，目錄名改爲「feedback」，Label的text爲「反饋」，爲後續作準備）

1. 打開新頁
   在Bottom Bar中，咱們想經過點擊第四個按鈕「反饋」來另外打開一個新頁面，讓用戶填寫反饋信息。先雙擊打開feedback目錄中的main.ui文件，在do_ALayout_main中繼續添加一個ALayout做爲該頁面的top，ID改成do_ALayout_1，調整寬高分別爲750/128；再向do_ALayout_1中添加一個ALayout用於點擊，ID改成do_ALayout_back，調整位置、寬高分別爲x=4，y=6，width=147，height=110；再向do_ALayout_back中添加一個Label用於展現文字，ID改成do_Label_3，將Label的text改成「返回」。

打開main.ui.js，訂閱do_ALayout_back的點擊事件用於關閉該頁面。同時處理在點擊android設備的虛擬返回按鈕時也關閉該頁面。

回到index.ui.js，在do_ALayout_b3的touch事件中調用app的openPage方法，將目標地址指向剛剛調整過的/feedback/main.ui頁面，將頂部狀態欄顯示狀態改成透明（控制statusBarState參數爲「transparent」）以全屏形式打開新頁，同時將打開頁面的動畫類型（animationType）改爲從右往左推出（push_r2l）。

1. 啓動動畫
   爲了讓app有更生動的效果，咱們讓demo一進入的時候有一個動畫效果做爲歡迎頁面，在source://view下建立一個跟index.ui平級的start.ui頁面，在根ALayout裏添加一個與根ALayout同樣大小的ImageView，將ID改成do_ImageView_content,給這個ImageView一個source顯示圖片；再添加一個Label組件，修改ID爲do_Label_welcome，修改do_Label_welcome的fontColor/fontSize屬性調整顯示字體的顏色和大小，頁面就完成了。再雙擊打開start.ui.js頁面，

先實例化當前頁面的UI組件，並定義須要使用到的相關組件，在定義一個MM組件animation用於調用UI組件的動畫，這個動畫是控制ImageView組件的，因此ID定義爲img_anima，經過修改img_anima的屬性，咱們能夠操控這個動畫的走向，這裏想讓ImageView的動畫是縮放，因此選擇scale方法，經過給scale方法的不一樣參數以不一樣的參數值來製做這個動畫，好比delay設置成0既是讓動畫當即開始，duration設置成2000是讓整個動畫時間爲2秒等等..

接下來也是一樣的方法給Label定義一個旋轉的動畫，最後經過調用全部UI組件都通用的animate方法咱們將定義的這些動畫加在UI組件上並在動畫完成後打開新頁main.ui。

到此，本節教程就結束了，趕快拿起手機打開調試來查看效果吧！