Android App 啟動頁(Splash)黑/白閃屏現象產生原因與解決辦法
驚鴻一瞥
微信的啟動頁,相信大家都不陌生。
不知道大家有沒有發現一個現象,微信每次啟動的時候,是直接進入這個啟動頁面。
我的意思是,很多應用,往往會先白屏停頓一下後再進入啟動頁面(Splash)。為了印證這一點,我把手機上所有的App都點了一遍。選幾個例子
如下圖:
微信:
鬥魚:
鬥魚和微信是直接進入了,他們的Splash頁面。
知乎:
B站:
知乎和B站要先進入一個白屏,特別是B站,白屏後再進入的Splash頁面。
動手實現
想一想,如果讓我們自己來寫一個Splash
頁面怎麼實現?
- 建立SplashActivity樣式,我們需要他是啟動介面,固定垂直方向,全屏顯示
<activity android:name=".MainActivity" />
<activity
android:name=".SplashActivity"
android:screenOrientation="portrait"
android:theme="@style/ThemeSplash">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
- 設定主題為
ThemeSplash
<style name="ThemeSplash" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@android:color/white</item >
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="windowActionBar">false</item>
//一定要,否則有狀態列顯示,不能全屏
<item name="windowNoTitle">true</item>
</style>
- 設定
SplashActivity
的佈局檔案activity_splash.xml
為背景圖片的全屏顯示
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/bg_splash"
tools:context="com.example.makeapp.SplashActivity">
</RelativeLayout>
4.設定SplashActivity
程式碼,延遲2秒跳轉到MainActivity
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
//延遲2S跳轉
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Intent intent = new Intent(SplashActivity.this, MainActivity.class);
startActivity(intent);
finish();
}
}, 2000);
}
}
糟糕,出現了白屏。
而且不止這個應用,把以前寫的幾個應用都開啟看了下,都有出現黑白屏的現象,鬥魚不閃屏
看看鬥魚怎麼做的
使用apktool
開啟鬥魚
>E:
>cd E:\Android\反編譯\apktool
E:\Android\反編譯\apktool>apktool d E:\Android\Blog\douyu.apk
先看他的配置清單檔案
<activity android:name="tv.douyu.view.activity.SplashActivity"
android:screenOrientation="portrait" android:theme="@style/Theme.AppLauncher">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
因為是程式入口,很快找到,使用了android:theme="@style/Theme.AppLauncher"
,那麼看看他的樣式Theme.AppLauncher
怎麼實現的
<style name="Theme.AppLauncher" parent="@android:style/Theme.NoTitleBar.Fullscreen">
<item name="android:windowBackground">@drawable/bg_splash</item>
</style>
**看到這裡,我們發現他居然把@drawable/bg_splash
設定成了視窗背景,而這張叫bg_splash
的圖片就是他們的啟動圖片(我們的App已經拿過來用了),繼續往下看 。
找到他的SplashActivity
佈局檔案,在他的res目錄,根據命名規則他多半使用splash
做關鍵字,搜尋
開啟
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout android:id="@id/ad_layout" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:visibility="gone">
<ImageView android:id="@id/ad_img" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:scaleType="centerCrop" />
<RelativeLayout android:id="@id/btn_skip" android:layout_width="fill_parent"
android:layout_height="64.0dip" android:layout_alignParentBottom="true"
android:background="#4f333333" android:paddingLeft="24.0dip"
android:paddingRight="18.0dip">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_centerVertical="true"
android:src="@drawable/splash_ad_logo" />
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerVertical="true" android:layout_toLeftOf="@id/start_arrow_iv"
android:text="進入 " android:textColor="@color/text_color_white"
android:textSize="15.0sp" />
<ImageView android:id="@id/start_arrow_iv" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentRight="true"
android:layout_centerVertical="true" android:src="@drawable/start_icon_anim" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
幾個關鍵詞 進入
、@drawable/start_icon_anim
、@drawable/splash_ad_logo
這不就是最開始,進入的廣告頁面麼:
只不過,他的這張圖的大圖背景,沒有配置,很可能是網路獲取的。
到這裡,我們大致已經清楚了,鬥魚啟動是怎麼個邏輯
- 把啟動圖
bg_splash
設定為窗體背景,避免剛剛啟動App的時候出現,黑/白屏 - 設定為背景
bg_splash
顯示的時候,後臺負責載入資源,同時去下載廣告圖,廣告圖下載成功或者超時的時候顯示SplashActivity
的真實樣子 - 隨後進入
MainAcitivity
據我觀察,淘寶啟動的時候和鬥魚邏輯是一樣的,有興趣可以探究下。
到這裡,偷師成功,我們可以回來改自己的程式了。
<style name="ThemeSplash" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:background">@mipmap/bg_splash</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
好的已經不閃屏了。
為什麼會這樣
最後,思考一下這個問題,為什麼會出現這種情況,在啟動Acitivty的onCreate()
方法裡面,執行setContentView(R.layout.activity_splash);
出現白屏。
設想,onCreate---setContentView
這個並不是發生在,窗體繪製的第一步,系統會在執行這個步驟之前,先繪製窗體,這時候佈局資源還沒載入,於是就使用預設背景色。
<style name="ThemeSplash" parent="Theme.AppCompat.Light">
這種亮色系,造成白色閃屏
<style name="ThemeSplash" parent="ThemeOverlay.AppCompat.Dark">
這種暗色系主題,造成了黑色閃屏