Why have a start page?

Note:

Launch screen and splash screen are not the same concepts.

Most apps now have a launch page, so why a launch page? It’s worth thinking about what would happen if there was no launch page. Most apps screen white (or black, depending on the theme) for a very short time before the main content of the App is displayed.

What is the difference between launch Screen and splash screen?

A lot of people say that the splash screen is the same concept as the launch page, and some people say to avoid the splash screen, so do we use the splash screen at all? Now I will briefly say the difference between splash screen and launch page.

  • IOS

    According to iOS Human Interface Guidelines (2014-03-10) (iOS 7 Fin), the following sentence describes As much As possible, Displaying a splash screen or other startup experience is avoided. IOS Human Interface Guidelines Launch Screen Every app must supply a Launch Screen Contradictory? Let’s do our best to solve this problem. Splash screens and launch pages are not the same thing.

    A splash screen refers to a first screen that violates the design specifications of an App and looks completely different from the design of the App! For example, it might include static text, such as copyright notices or version information, a logo that continues to show after the app has been launched (I’ve seen code like this, write a timer and jump to the home page after 2 seconds), advertisements, etc., instead of displaying a user-actionable UI.

    A launch screen is a first screen that conforms to the design specification, looks essentially the same as the design of the application, and briefly jumps to the user’s available UI.

  • Android

    Android also has its own DESIGN specification in MATERIAL Design-launch Screen, mainly in two ways, one is to display the brand and UI placeholders.

So the answer is: don’t use a splash screen in your development, but do have a launch page.

Special thanks to Gao Yang for asking the question, which made me rethink the above question.

Android Startup Process

Why talk about the Android startup process? Because Flutter startup relies on the Android operating environment, the essence of Flutter is to add a FlutterView to the Activity. The FlutterView inherits from the SurfaceView, so it is easy to understand. All the pages of Flutter are rendered in FlutterView. If you are not familiar with the startup process of Flutter, please refer to my article on the startup process of Flutter. The following is a brief description of Flutter startup.

Before FlutterView displays the first frame, we can divide into two stages: Android startup stage and Flutter startup stage. It is very easy to add startup pages during the Startup process of Flutter. Add the Android :windowBackground property to the theme XML. How does Flutter add a startup page? In fact, the framework has helped us to achieve good, I will give you the principle.

Detailed implementation and principles of Flutter startup page

  1. Create a SplashActivity, this Activity inheritance FlutterActivity, rewrite the onCreate () method, in the onCreate () method call GeneratedPluginRegistrant. RegisterWith (), Here is the code to start the page.

    public class SplashActivity extends FlutterActivity {

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

  2. Add SplashActivity to the Manifest as the App’s launch Activity and set the Theme of the SplashActivity to be LaunchTheme. Here is the Manifest configuration file.

     <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>
Copy the code

  3. Meta – data name = “IO. Flutter. App. Android. SplashScreenUntilFirstFrame” must be set to true, the value must be set to true, must be set to true on important things three times, If this property is set to false, it looks like this.

    From the observation of the phenomenon, there is a period of black screen in the middle of the launch page, why? As mentioned earlier, the startup process of Flutter is divided into two parts, one is the Android startup stage, and the other is the startup stage of Flutter. The black screen is caused by the lack of the startup page of Flutter. Let’s start with the source code and analyze it in detail. Here is part of the source code for 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(a) {
          if(! showSplashScreenUntilFirstFrame()) {/ / 3
              return null;
          }
          final Drawable launchScreenDrawable = getLaunchScreenDrawableFromActivityTheme();
          final View view = new View(activity);
          view.setBackground(launchScreenDrawable);
          return view;
      }
                     
    private Drawable getLaunchScreenDrawableFromActivityTheme(a) {
        // Some code is omitted
        try {
            return activity.getResources().getDrawable(typedValue.resourceId);
        } catch (NotFoundException e) {
            return null; }}private Boolean showSplashScreenUntilFirstFrame(a) {
        try {
            ActivityInfo activityInfo = activity.getPackageManager().getActivityInfo(
                activity.getComponentName(),
                PackageManager.GET_META_DATA|PackageManager.GET_ACTIVITIES);
            Bundle metadata = activityInfo.metaData;
            returnmetadata ! =null && metadata.getBoolean(SPLASH_SCREEN_META_DATA_KEY);
        } catch (NameNotFoundException e) {
            return false; }}private void addLaunchView(a) {
        activity.addContentView(launchView, matchParent);/ / 4
        flutterView.addFirstFrameListener(new FlutterView.FirstFrameListener() {/ / 5
            @Override
            public void onFirstFrame(a) {
                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); }}Copy the code

  • Note 1

    Create a LaunchView. Create a Drawable according to the r.attre.windowbackground property in the theme. And set the background of the View to Drawable.

  • Note 3

    ShowSplashScreenUntilFirstFrame () is the IO get Manifet. Flutter. App. Android. SplashScreenUntilFirstFrame attribute’s value, if it is false, An empty LaunchView is returned so long that the code in comment 2 will not be executed. This is why we said above that the screen is black if set to false.

  • Note 2

    AddLaunchView () to the current Activity. Then add a listener. In comment 5, this listener is called back after the first frame of the FlutterView has loaded. Simply remove the LaunchView and display the first frame of FlutterView.

The LaunchView is created by generating a Drawable on the Android startup page, setting the Drawable to the LaunchView background, and adding the LaunchView to the current Activity. If the first frame of the FlutterView is displayed, Delete LaunchView.

  1. To set up the theme, here is the code for the 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>
Copy the code

    Here is the launch_background code.

    <?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>
Copy the code

The end result is like this, no black screen, very smooth.

Other recommendations

  • Flutter must understand the relationships between Widgets, Elements and RenderObjects
  • Flutter must understand the relationships between Widgets, Elements and RenderObjects
  • Flutter startup process and principle analysis

reference

  • Why does an App have a launch page
  • Launch-screen specification in Material Design
  • Flutter start process
  • iOS Human Interface Guidelines (iOS 7 Fin)
  • SPLASH SCREENS — USEFUL OR NOT NEEDED? – PART 1