轉自riameeting
原文地址 http://www.riameeting.com/node/407
說起啟動界面,相信讀者都很熟悉,當一個軟件體積很大,導致加載比較緩慢的時候,通常的做法是顯示一個啟動界面,告訴用戶這個軟件正在啟動,這在很大程度上改善了用戶體驗,因為用戶通常情況下忍受不了軟件的加載速度不是因為你的軟件加載慢,而是你沒有顯示一個界面出來通知用戶,這會讓用戶心理上感覺時間很漫長,可能幾秒鐘用戶都無法等待,而如果有實時的界面顯示,幾十秒都不是很大的問題,舉個例子,Adobe的Photoshop大家可能用過或接觸過,它的體積是很大的,如果沒有啟動界面,你就會感覺啟動無法忍受,甚至會懷疑自己點擊錯誤沒有成功啟動Photoshop而去多點擊幾下。所以說啟動界面在大體積的軟件加載過程中的作用是非常大的,也是我們在軟件設計的階段需要考慮到的一個重要的問題。
同理我們在開發AIR應用(注意AIR也是桌面應用)的時候,也可以引入啟動界面的機制。下面我們來看看如何在AIR開發中去實現這個功能。
首先需要先準備一張位圖,這個圖片用于你的程序加載完畢并顯示之前,先顯示給用戶一個界面,可以是你的應用的Logo之類的,你可以用Photoshop或其它的位圖處理工具來制作這個圖片,在這個例子中,要使用的位圖如下圖所示:
下面讓我們來看看實現的過程。首先我已經在Flex Builder中創建了一個AIR項目,并且我的主程序文件是基于“WindowedApplication”組件的,并且其它的彈出窗口是基于Window或其它的可彈出的繪圖組件。window組件使用是非常方便的,所以這里我也將使用window作為我的啟動界面的容器,并且需要設置的地方是去除這個Window的邊框和系統樣式,只保留要顯示的那張位圖。要刪除系統邊框和樣式,你需要修改應用程序的配置XML并且更改以下的部分:
< systemChrome > none </ systemChrome > < transparent > true </ transparent > < visible > false </ visible >
注意通過這樣設置之后,系統默認將顯示Flex的默認皮膚。在主程序文件的窗體中,這個樣式非常酷,但是在啟動界面的窗體中,我們還是需要把它的邊框刪除掉。你可以通過下面的設置來隱藏邊框和皮膚:
type = "lightweight" showFlexChrome= "false" transparent = "true" visible = "false"
然后我們希望啟動界面的位置要處于屏幕的中央,可以通過更改這個窗體的坐標來實現,注意窗體跟Flash里其它的顯示對象類似,也有自己的坐標定位(x,y),而計算它的位置我們又需要知道屏幕的尺寸,屏幕的尺寸我們可以通過Screen類來獲取,代碼示例如下:
private function init ( ) : void { this .nativeWindow. x = Screen.mainScreen.visibleBounds. width / 2 - this . width / 2 ; this .nativeWindow. y = Screen.mainScreen.visibleBounds. height / 2 - this . height / 2 ; this .nativeWindow. visible = true ; }
在顯示啟動界面的同時,我們希望主界面是隱藏的,只是設置visible是false是不夠的,我們同時給它設置坐標值是一個很大的負值,比如-2000,然后我們再添加啟動界面到顯示列表。
< x >- 2000 </ x > < y >- 2000 </ y >
mainWindow = this . stage .nativeWindow; mainWindow. visible = false ; splashScreen = new Splash_Window ( ) ; splashScreen. open ( ) ;
在這個應用里,我只是簡單的添加了一個Timer(計時器)來控制啟動界面和主界面的顯示/隱藏,實際上你在開發的時候可以根據具體的真實情況(比如數據的加載情況),來實時的控制這個過程。
源碼下載地址:
http://ultravisual.co.uk/blog/sourceFiles/splash_screen_src.zip
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
