2.1　歡迎界面

在應(yīng)用程序啟動時，會首先進(jìn)入歡迎界面。歡迎界面包括手機(jī)外框、系統(tǒng)狀態(tài)欄、歡迎界面背景圖片、版本號信息和虛擬按鍵。

在制作原型圖時首先需要確定演示的設(shè)備，本項目以Nexus 6P作為演示設(shè)備，因此先在原型圖中放入Nexus 6P的手機(jī)外框。在網(wǎng)上有許多開源的移動設(shè)備元件庫，初學(xué)者可自行下載并導(dǎo)入元件庫。接下來對歡迎界面的制作進(jìn)行詳細(xì)講解。

步驟1　創(chuàng)建頁面，命名為“Splash”，在元件庫中將Nexus 6P手機(jī)外框圖拖入到工作區(qū)域，如圖2-1所示。

步驟2　從元件庫中將系統(tǒng)狀態(tài)欄拖入到工作區(qū)域中，如圖2-2所示。

由于項目中應(yīng)用手機(jī)外框與系統(tǒng)狀態(tài)欄的地方很多，因此可以將手機(jī)外框與系統(tǒng)狀態(tài)欄制作成母版，方便后期修改維護(hù)，本書不做詳細(xì)講解。

步驟3　拖入圖片元件用于設(shè)置歡迎界面背景圖片，設(shè)置圖片元件的寬和高。圖片元件的寬應(yīng)與手機(jī)屏幕寬度一致，而高應(yīng)為“手機(jī)屏幕高度-系統(tǒng)狀態(tài)欄高度-虛擬按鍵高度”，其中系統(tǒng)狀態(tài)欄的高度為，虛擬按鍵的高度為，因此圖片元件的高度為640-24-48=568（640為手機(jī)屏幕的高度），即圖片元件的寬高為360×568（360為手機(jī)屏幕的寬度），如圖2-3所示。

步驟4　雙擊圖片元件，將歡迎界面背景圖片導(dǎo)入到圖片元件，然后將圖片元件移入設(shè)備邊框中，如圖2-4所示。

步驟5　在歡迎界面中需要展示版本號信息，版本號信息可以通過文本標(biāo)簽實現(xiàn)，將文本標(biāo)簽拖入工作區(qū)域，雙擊文本標(biāo)簽編輯文本，并將文本顏色設(shè)置為白色，如圖2-5所示。

至此，歡迎界面制作完成。需要注意的是，歡迎界面只會在程序開啟時展示3秒，便會自動進(jìn)入課程界面，因此需要為歡迎界面添加交互事件，但是由于課程界面還沒創(chuàng)建，因此將該步驟放在制作課程界面中講解。