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

標籤：

本節教程將繼續帶領大家完善教學demo

• 匯入項目
• 完善主架構
• 完成viewShower子視圖
• 開啟新頁
• 啟動動畫

將要學習的demo如下所示

1. 如何匯入完整項目

本節樣本demo請參考，可以匯入到設計器中學習。

2. 完善主架構
在上一節教程搭建主架構中大家已經學會了如何主架構，本節教程使用上一節未完成的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來切換頁面。

3. 完成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為“反饋”，為後續做準備）

4. 開啟新頁
在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）。

5. 啟動動畫
為了讓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。

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

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