快捷導(dǎo)航

Flutter啟動頁(閃屏頁)的具體實現(xiàn)及原理詳析

更新時間：2019年04月15日 11:06:40 作者：Android高級架構(gòu)師

這篇文章主要給大家介紹了關(guān)于Flutter啟動頁(閃屏頁)的具體實現(xiàn)及原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

為什么要有啟動頁？

在以下文章中，啟動頁就是閃屏頁。

現(xiàn)在大部分App都有啟動頁，那么為什么要有啟動頁？這是個值得思考的問題，如果沒有啟動頁會怎樣，大部分的App會白屏（也有可能是黑屏，主題設(shè)置有關(guān)系）非常短的時間，然后才能展示App的內(nèi)容。

那么問題來了，一定要有啟動頁嗎？答案：不是，而且是盡可能不要有啟動頁，因為啟動頁會讓用戶體驗不夠連貫，甚至IOS在開發(fā)手冊上就不推薦使用啟動頁。

我們深入思考一下，既然不推薦為什么這樣流行，答案非常簡單，啟動頁的成本非常低，如果你想把的App啟動優(yōu)化到一個非常短的時間，還是有一定成本的。

Android啟動流程

為什么要談Android的啟動流程呢？因為Flutter啟動的時候，依賴的是Android的運行環(huán)境，其本質(zhì)是Activity上添加了一個FlutterView，F(xiàn)lutterView繼承SurfaceView，那么就容易理解了，F(xiàn)lutter的全部頁面都是渲染到了FlutterView上，如果不熟悉Flutter的啟動流程可以參考Flutter啟動流程這篇文章，下面是對Flutter啟動的一個簡單描述。

在Flutter中，啟動頁的作用是在FlutterView顯示第一幀之前，不要出現(xiàn)白屏，在FlutterView顯示第一幀之前，我們分成兩個階段，Android啟動階段和Flutter啟動階段，Android啟過程添加啟動頁非常容易，在主題xml中添加android:windowBackground屬性，F(xiàn)lutter怎么添加啟動頁呢？其實框架已經(jīng)幫助咱們實現(xiàn)好了，我下面就給大家說一下原理。

Flutter啟動頁具體實現(xiàn)和原理

創(chuàng)建一個SplashActivity，這Activity繼承FlutterActivity，重寫onCreate()方法，在onCreate()方法中調(diào)用GeneratedPluginRegistrant.registerWith() ，下面是啟動頁的代碼。

public class SplashActivity extends FlutterActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 GeneratedPluginRegistrant.registerWith(this);
 }
}

在Manifest中添加SplashActivity作為App的啟動Activity，設(shè)置SplashActivity的主題是LaunchTheme。下面是Manifest的配置文件。

 <activity
 android:name=".SplashActivity"
 android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
 android:hardwareAccelerated="true"
 android:launchMode="singleTop"
 android:theme="@style/LaunchTheme"
 android:windowSoftInputMode="adjustResize">
 <meta-data
 android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
 android:value="true" />
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>

meta-data的name = "io.flutter.app.android.SplashScreenUntilFirstFrame"的value一定要設(shè)置成true，一定要設(shè)置成true，一定要設(shè)置成true重要的事情說三遍，如果這個屬性設(shè)置成false，效果是這樣的。

從現(xiàn)象觀察，啟動頁中間有一段時間黑屏，這個為什么呢？前面我們說過，F(xiàn)lutter的啟動流程分成兩部分，一部分是Android啟動階段，一個是Flutter的啟動階段，這個黑屏就是Flutter的啟動階段沒有啟動頁所造成的。我們從源碼入手，詳細(xì)分析一下，下面是FlutterActivityDelegate的部分源碼。

public final class FlutterActivityDelegate
 implements FlutterActivityEvents,
  FlutterView.Provider,
  PluginRegistry {
 private static final String SPLASH_SCREEN_META_DATA_KEY = "io.flutter.app.android.SplashScreenUntilFirstFrame";

 private View launchView;

 @Override
 public void onCreate(Bundle savedInstanceState) {
 String[] args = getArgsFromIntent(activity.getIntent());
 FlutterMain.ensureInitializationComplete(activity.getApplicationContext(), args);
 flutterView = viewFactory.createFlutterView(activity);
 if (flutterView == null) {
 FlutterNativeView nativeView = viewFactory.createFlutterNativeView();
 flutterView = new FlutterView(activity, null, nativeView);
 flutterView.setLayoutParams(matchParent);
 activity.setContentView(flutterView);
 launchView = createLaunchView();//1
 if (launchView != null) {
 addLaunchView();//2
 }
 }
 }

 private View createLaunchView() {
 if (!showSplashScreenUntilFirstFrame()) {//3
 return null;
 }
 final Drawable launchScreenDrawable = getLaunchScreenDrawableFromActivityTheme();
 final View view = new View(activity);
 view.setBackground(launchScreenDrawable);
 return view;
 }

 private Drawable getLaunchScreenDrawableFromActivityTheme() {
 //省略了部分代碼
 try {
 return activity.getResources().getDrawable(typedValue.resourceId);
 } catch (NotFoundException e) {
 return null;
 }
 }

 private Boolean showSplashScreenUntilFirstFrame() {
 try {
 ActivityInfo activityInfo = activity.getPackageManager().getActivityInfo(
 activity.getComponentName(),
 PackageManager.GET_META_DATA|PackageManager.GET_ACTIVITIES);
 Bundle metadata = activityInfo.metaData;
 return metadata != null && metadata.getBoolean(SPLASH_SCREEN_META_DATA_KEY);
 } catch (NameNotFoundException e) {
 return false;
 }
 }

 private void addLaunchView() {
 activity.addContentView(launchView, matchParent);//4
 flutterView.addFirstFrameListener(new FlutterView.FirstFrameListener() {//5
 @Override
 public void onFirstFrame() {
 FlutterActivityDelegate.this.launchView.animate()
  .alpha(0f)
  .setListener(new AnimatorListenerAdapter() {
  @Override
  public void onAnimationEnd(Animator animation) {
  ((ViewGroup) FlutterActivityDelegate.this.launchView.getParent())
  .removeView(FlutterActivityDelegate.this.launchView);//5
  }
  });
 }
 });
 activity.setTheme(android.R.style.Theme_Black_NoTitleBar);
 }
}

注釋1

這個段代碼很容易理解，創(chuàng)建一個LaunchView，主要邏輯在createLaunchView()中，原理也很簡單，根據(jù)主題中的R.attr.windowBackground屬性，生成一個Drawable，然后創(chuàng)建了一個View，并且把這個View的背景設(shè)置成Drawable。

注釋3

showSplashScreenUntilFirstFrame()是得到Manifet中io.flutter.app.android.SplashScreenUntilFirstFrame的屬性的值，如果是false，那么久返回一個空的的LaunchView，也就不會執(zhí)行注釋2的代碼。這就是我們上面說的如果設(shè)置成false就顯示黑屏的原因。

注釋2

調(diào)用addLaunchView()，這方法也很簡單，首先看注釋4，把LaunchView添加到當(dāng)前的Activity中，然后添加了一個監(jiān)聽，在注釋5處，這個監(jiān)聽是當(dāng)FlutterView第一幀加載完成后回調(diào)，回調(diào)做了什么事情呢？很簡單，把LaunchView刪除了，顯示FlutterView的第一幀。

總結(jié)一下，就是把Android的啟動頁生成一個Drawable，創(chuàng)建了一個LaunchView，把Drawable設(shè)置成LaunchView的背景，當(dāng)前的Activity添加這LaunchView，如果FlutterView的第一幀顯示了，把LaunchView刪除。

設(shè)置主題，下面是LaunchTheme的代碼。

<resources>
 <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
 <!-- Show a splash screen on the activity. Automatically removed when
 Flutter draws its first frame -->
 <item name="android:windowBackground">@drawable/launch_background</item>
 </style>
</resources>

下面是launch_background的代碼。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
 android:opacity="opaque">
 <item>
 <bitmap android:src="@mipmap/ic_launch_bg" />
 </item>
 <item
 android:width="90dp"
 android:height="90dp"
 android:gravity="center">
 <bitmap android:src="@mipmap/ic_launch_logo" />
 </item>
</layer-list>

最終效果如下，沒有黑屏，非常順滑。