轉(zhuǎn)自riameeting
原文地址 http://www.riameeting.com/node/407
說(shuō)起啟動(dòng)界面，相信讀者都很熟悉，當(dāng)一個(gè)軟件體積很大，導(dǎo)致加載比較緩慢的時(shí)候，通常的做法是顯示一個(gè)啟動(dòng)界面，告訴用戶這個(gè)軟件正在啟動(dòng)，這在很大程度上改善了用戶體驗(yàn)，因?yàn)橛脩敉ǔＧ闆r下忍受不了軟件的加載速度不是因?yàn)槟愕能浖虞d慢，而是你沒(méi)有顯示一個(gè)界面出來(lái)通知用戶，這會(huì)讓用戶心理上感覺(jué)時(shí)間很漫長(zhǎng)，可能幾秒鐘用戶都無(wú)法等待，而如果有實(shí)時(shí)的界面顯示，幾十秒都不是很大的問(wèn)題，舉個(gè)例子，Adobe的Photoshop大家可能用過(guò)或接觸過(guò)，它的體積是很大的，如果沒(méi)有啟動(dòng)界面，你就會(huì)感覺(jué)啟動(dòng)無(wú)法忍受，甚至?xí)岩勺约狐c(diǎn)擊錯(cuò)誤沒(méi)有成功啟動(dòng)Photoshop而去多點(diǎn)擊幾下。所以說(shuō)啟動(dòng)界面在大體積的軟件加載過(guò)程中的作用是非常大的，也是我們?cè)谲浖O(shè)計(jì)的階段需要考慮到的一個(gè)重要的問(wèn)題。
同理我們?cè)陂_(kāi)發(fā)AIR應(yīng)用（注意AIR也是桌面應(yīng)用）的時(shí)候，也可以引入啟動(dòng)界面的機(jī)制。下面我們來(lái)看看如何在AIR開(kāi)發(fā)中去實(shí)現(xiàn)這個(gè)功能。
首先需要先準(zhǔn)備一張位圖，這個(gè)圖片用于你的程序加載完畢并顯示之前，先顯示給用戶一個(gè)界面，可以是你的應(yīng)用的Logo之類(lèi)的，你可以用Photoshop或其它的位圖處理工具來(lái)制作這個(gè)圖片，在這個(gè)例子中，要使用的位圖如下圖所示：
下面讓我們來(lái)看看實(shí)現(xiàn)的過(guò)程。首先我已經(jīng)在Flex Builder中創(chuàng)建了一個(gè)AIR項(xiàng)目，并且我的主程序文件是基于“WindowedApplication”組件的，并且其它的彈出窗口是基于Window或其它的可彈出的繪圖組件。window組件使用是非常方便的，所以這里我也將使用window作為我的啟動(dòng)界面的容器，并且需要設(shè)置的地方是去除這個(gè)Window的邊框和系統(tǒng)樣式，只保留要顯示的那張位圖。要?jiǎng)h除系統(tǒng)邊框和樣式，你需要修改應(yīng)用程序的配置XML并且更改以下的部分：
-
<
systemChrome
>
none
</
systemChrome
>
-
<
transparent
>
true
</
transparent
>
-
<
visible
>
false
</
visible
>
注意通過(guò)這樣設(shè)置之后，系統(tǒng)默認(rèn)將顯示Flex的默認(rèn)皮膚。在主程序文件的窗體中，這個(gè)樣式非常酷，但是在啟動(dòng)界面的窗體中，我們還是需要把它的邊框刪除掉。你可以通過(guò)下面的設(shè)置來(lái)隱藏邊框和皮膚：
-
type
=
"lightweight"
-
showFlexChrome=
"false"
-
transparent
=
"true"
-
visible
=
"false"
然后我們希望啟動(dòng)界面的位置要處于屏幕的中央，可以通過(guò)更改這個(gè)窗體的坐標(biāo)來(lái)實(shí)現(xiàn)，注意窗體跟Flash里其它的顯示對(duì)象類(lèi)似，也有自己的坐標(biāo)定位（x,y），而計(jì)算它的位置我們又需要知道屏幕的尺寸，屏幕的尺寸我們可以通過(guò)Screen類(lèi)來(lái)獲取，代碼示例如下：
-
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
;
-
}
在顯示啟動(dòng)界面的同時(shí)，我們希望主界面是隱藏的，只是設(shè)置visible是false是不夠的，我們同時(shí)給它設(shè)置坐標(biāo)值是一個(gè)很大的負(fù)值，比如-2000，然后我們?cè)偬砑訂?dòng)界面到顯示列表。
-
<
x
>-
2000
</
x
>
-
<
y
>-
2000
</
y
>
-
mainWindow =
this
.
stage
.nativeWindow;
-
mainWindow.
visible
=
false
;
-
splashScreen =
new
Splash_Window
(
)
;
-
splashScreen.
open
(
)
;
在這個(gè)應(yīng)用里，我只是簡(jiǎn)單的添加了一個(gè)Timer（計(jì)時(shí)器）來(lái)控制啟動(dòng)界面和主界面的顯示/隱藏，實(shí)際上你在開(kāi)發(fā)的時(shí)候可以根據(jù)具體的真實(shí)情況（比如數(shù)據(jù)的加載情況），來(lái)實(shí)時(shí)的控制這個(gè)過(guò)程。
源碼下載地址：
http://ultravisual.co.uk/blog/sourceFiles/splash_screen_src.zip
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
