iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0

嗨大家今天過得好嗎?昨天講了啟動時間 startup time 的分類、流程以及如何優化,經過優化後 App 的 startup time 應該已經 hen 快,這時再加上 launch screen 移除打開 App 出現的那道白牆,替換成主題色或顯示 logo 等更適合的畫面,就發揮錦上添花的功效讓 App 的質感更上一層!但如果沒有經過前面優化的步驟只想加上 launch screen 的話只是在掩耳盜鈴而已,App 的 startup time 還是要讓使用者等很久,BAD!

移除白牆

沒有做 launch screen 的 App 會在使用者一開啟 App 顯示一道白牆沒有畫面,直到 MainActivity 進到 onStart 的階段才會將主畫面顯示在螢幕上,但繪製 View 都需要時間,那道白牆之所以可以很快顯示到螢幕上就是因為他連 View 都不是而只是個 Window,那 Window 是怎麼放入主題色和 icon 的呢?其實就是設定 background,新增一個 drawable 的方式去定義 window 的組成,參考官方範例說明如下:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
  <!-- 第一層先定義背景色,通常會是 App 的主題色 -->
  <item android:drawable="@android:color/white"/>
  <!-- 第二層放入 App 的 logo,可以設定要置中、置頂還是置底 -->
  <item>
    <bitmap
      android:src="@drawable/product_logo_144dp"
      android:gravity="center"/>
  </item>
</layer-list> 

新增 drawable 後要怎麼設定成背景呢?在 style.xml 新增一個 ThemeLaunchScreen 主題,並把 android:windowBackground 的屬性設為剛剛新增好的 drawable,要套用 ThemeLaunchScreen 的主題分別有動態設定或是靜態設定的方式,動態設定是在啟動 App 的第一個 Activity 在 onCreate 的階段動態新增:

class MyMainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // 在呼叫 super.onCreate 前就要設定!
        setTheme(R.style.ThemeLaunchScreen)
        super.onCreate(savedInstanceState)
        // ...
    }
}

靜態的方式則是在 AndroidManifest.xml 第一個啟動的 Activity 區塊設定:

<activity
            android:name=".view.MyMainActivity"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:theme="@style/ThemeLaunchScreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

App 是怎麼辨認哪一個 Activity 要最先開啟呢?就是在 AndroidManifest 的 新增代表最先開啟的 android.intent.action.MAIN 和點選桌面上的 icon 會開啟的 android.intent.category.LAUNCHER ,兩個 filter 要同時使用才會設定為第一個開啟的 Activity。

除了設定 android:windowBackground 的屬性把背景換成主題色搭配 logo 外,還可以調整上方 StatusBar 和下方 NavigationBar 的顏色也對齊主題色嗎?當然可以!分別使用對應的 android:statusBarColorandroid:navigationBarColor 就可以辦到,如果背景是暗色的話還可以透過 android:colorForeground 的屬性把 statusBar 的文字和 icon 顏色調亮。

Dark theme 的 launch screen?

也許 App 有開發 Dark theme 的功能,但 launch screen 就是不管你的 Dark theme 怎麼設定都無法反應成深色背景嗎?因為 launch screen 是在 App 一開啟就出現,App 根本來不及進到設定深色或是淺色模式的判斷,Window 就失控地 pop 跑出來了!因此只能套用預設的淺色模式, 但在 Android 10 之後系統支援 Dark theme 就可以讓系統設定為 Dark theme 的使用者在 launch 時顯示深色主題,在 Android 9 以前會搭配日落模式選擇 App 使用深色或是淺色主題。

說了這些到底什麼是 Dark theme?還有要怎麼設定?有興趣的邦友請繼續關注「打造一個厲害的普通 Android App - 使用者體驗優化」的主題,我們明天見。


上一篇
啟動時間 Startup time
下一篇
眼前的黑不是黑是 Dark theme
系列文
打造一個厲害的普通 Android App - 使用者體驗優化16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言