用 XE5 撰寫的 App,啟動時間大約都需要 3~4 秒才能看到畫面,按照研討會 Gordon 大師的說法,其實不只是 XE5 寫的 app,用 Java 寫的也是一樣,主要是 VM 載入跟啟動都需要時間,因此有所謂的「黑屏」,也就是使用者啟動 app 到看到第一個畫面中間,螢幕都是黑壓壓的一片,有人會感覺這樣的 app 很不優,所以要用 Splash Screen 來做一個畫面上的喬接或轉場…

在研討會中,Gordon 大師除了說明 app 啟動方式與運作流程的原理,也有說明如何撰寫 Splash Screen 結合 app,並當場展示使用 Splash Screen 的效果,的確很不錯,大概不需要 1 秒就可以看到畫面(Splash Screen),然後才進入 app 主畫面,問題是...研討會聽完之後,QCom 網站也有放上了 source code,但不禁想問問大夥,有多少人可以依樣畫葫蘆弄出來?

至少筆者我就是在研討會中有聽..且好像有聽懂,但是要筆者自己做,卻不知道該如何下手的那位…就算下載了 QCom 上的 source code,也就是 source code,該怎麼弄進自己的 app 呢?完全沒個頭緒,你呢?

不是說師傅領進門,修行在個人嗎?大師都指點迷津過了,也不能太漏氣吧,最近花粉多時研究 GCM 已經沒有個著落非常鬱悶了,只好先來玩玩 Splash Screen,看看能不能獲得一點點小確幸

首先我們先查看一下在 Java 的世界 Splash Screen 該如何做呢?在 Google 搜尋了很多文章後,覺得以下這篇條理較為清晰,比較有參考價值

http://www.androidaspect.com/2012/12/android-splash-screen-tutorial.html

上述文章中,有 step by step 教您如何完成在 app 中加入 Splash Screen,什麼?有看沒懂!不會 Java!哈,跟我一樣,那來個用 delphi 說話的人好了,Gordon 大師不是說研討會內容部分取自 CodeRage 8 嗎?猜測應該是出自此人(Brian Long)之手,看看他的 blog 吧...

http://blog.blong.com/2013/10/my-coderage-session-files.html

在上述文章中,除了提到 Splash Screen,也有 Gordon 大師提到的 Barcode reader 做法,甚至把 CodeRage 8 分享在 youtube 上的影片都提供給你了,這樣應該會了吧?對了對了,還有最重要的 source code 也有一併提供,再不會就...

真的還是不會?那就讓小弟在此現醜一下吧,在這邊就不講原理了,只說明怎麼做,讓你不用花腦筋,就可以將 Splash Screen 整合進你的 app 中!

首先,要下載 Brian Long 提供的 source code,下載完成後檔案名稱為 AccessingTheAndroidAPI.7z,就解壓縮吧,我們需要的是其中 SplashScreen 這個目錄內的檔案

接下來新增一個 XE5 的 FMX Mobile 專案,取名為 MySplashScreen 好了,如下

接下來,我們把解壓縮目錄中,「res」這個目錄複製到 MySplashScreen 專案目錄下,再把「image」這個目錄,複製到 MySplashScreen\res 目錄中,如下

接下來把複製過來的「image」這個目錄名稱,變更為「drawable」

再把解壓縮目錄中,AccessingTheAndroidAPI\SplashScreen\java\output\dex 目錄裡的 classes.dex 檔案複製到 MySplashScreen\res 這個目錄中

回到 XE5,先編譯一下專案,然後點選 Project->Deployment

取消下述紅框部分原本 XE5 自帶的 classes.dex,加入藍框中的四個檔案,並且設定好 Remote Path 欄位

用 XE5 或文字編輯器開啟 MySplashScreen 專案目錄中的 AndroidManifest.template.xml,移除下述紅框部分並加入藍框部分的內容

編譯 & Deploy MySplashScreen 這個專案,執行之後如果你可以先看到以下這個畫面

然後才會看到

恭喜您,你的 Splash Screen 已經整合成功了!之後找出 splash.png 這個檔案,換成一張你自己喜歡的圖片吧...

 

to be continued...

    縹緲 發表在 痞客邦 留言(4) 人氣()