Ekrany powitalne

Od Androida 12 interfejs API SplashScreen umożliwia uruchamianie aplikacji z użyciem animacji, w tym przejścia do aplikacji w momencie uruchamiania, ekranu powitalnego z ikoną aplikacji i przejścia do samej aplikacji. SplashScreen to właściwość Window, dlatego obejmuje Activity.

Rysunek 1. Ekran powitalny.

Ekran powitalny zawiera standardowe elementy interfejsu przy każdym uruchomieniu aplikacji, ale można go dostosować, aby zachować unikalną markę.

Oprócz interfejsu API platformy SplashScreen możesz też używać biblioteki compat SplashScreen, która opakowuje interfejs API SplashScreen.

Jak działa ekran powitalny

Gdy użytkownik uruchomi aplikację, gdy jej proces nie jest uruchomiony („na zimno”) lub gdy Activity nie zostanie utworzone (gorące uruchomienie), następuje takie zdarzenia:

  1. System wyświetla ekran powitalny za pomocą motywów i wszelkich zdefiniowanych przez Ciebie animacji.

  2. Gdy aplikacja będzie gotowa, ekran powitalny zostanie zamknięty, a aplikacja się wyświetli.

Ekran powitalny nigdy nie pojawia się podczas gorącego uruchomienia.

Elementy i mechanika ekranu powitalnego

Elementy ekranu powitalnego są zdefiniowane w plikach zasobów XML w pliku manifestu Androida. Każdy element ma swoją wersję w trybie jasnym i ciemnym.

Dostosowywane elementy ekranu powitalnego składają się z ikony aplikacji, tła ikony i tła okna:

Obraz pokazujący elementy na ekranie powitalnym
Rysunek 2. Elementy ekranu powitalnego, które można dostosować,

Weź pod uwagę te elementy widoczne na rysunku 2:

1 Ikona aplikacji musi być rysowalna w formacie wektorowym. Może on być statyczny lub animowany. Chociaż czas trwania animacji może być nieograniczony, zalecamy nieprzekraczanie 1000 milisekund. Domyślną ikoną programu jest ikona programu uruchamiającego.

2 Tło ikony jest opcjonalne i przydatne, jeśli potrzebujesz większego kontrastu między ikoną a tłem okna. Jeśli użyjesz ikony adaptacyjnej, jej tło będzie wyświetlane, gdy kontrast będzie wystarczająco kontrastowy z tłem okna.

3 Podobnie jak w przypadku ikon adaptacyjnych jedna trzecia pierwszego planu jest maskowana.

4 Tło okna jest w jednym nieprzezroczystym kolorze. Jeśli tło okna jest ustawione jako zwykły kolor, będzie ono używane domyślnie nawet wtedy, gdy atrybut nie zostanie ustawiony.

Wymiary ekranu powitalnego

Ikona ekranu powitalnego ma te same specyfikacje co ikony adaptacyjne:

  • Obraz związany z marką: musi mieć wymiary 200 × 80 dp.
  • Ikona aplikacji z tłem ikony: musi mieć wymiary 240 × 240 dp i mieści się w okręgu o średnicy 160 dp.
  • Ikona aplikacji bez tła ikony: musi mieć wymiary 288 × 288 dp i mieścić się w okręgu o średnicy 192 dp.

Jeśli na przykład obraz ma pełnowymiarowy rozmiar, czyli 300 × 300 dp, ikona musi pasować do okręgu o średnicy 200 dp. Wszystko poza okręgiem staje się niewidoczne (zamaskowane).

Obraz przedstawiający ikony o różnych wymiarach dla jednolitego i przezroczystego tła
Rysunek 3. Wymiary ikony ekranu powitalnego w przypadku odpowiednio stałego i przezroczystego tła.

Animacje ekranu powitalnego i sekwencja uruchamiania

Dodatkowe opóźnienia są często związane z uruchamianiem aplikacji „na zimno”. Dodanie animowanej ikony do ekranu powitalnego jest oczywistym elementem estetyki i zapewnia lepszą jakość obsługi. Badania opinii użytkowników pokazują, że widoczny czas uruchamiania podczas wyświetlania animacji krótszy.

Animacja ekranu powitalnego jest umieszczona w komponentach sekwencji uruchamiania, jak pokazano na rysunku 4.

Obraz przedstawiający sekwencję uruchamiania w 12 kolejnych klatkach, po czym klikanie ikony programu uruchamiającego i wypełnia ekran, gdy się powiększa.
Rysunek 4. Uruchom sekwencję.

  1. Wprowadź animację: obejmuje to widok systemu na ekran powitalny. Jest sterowany przez system i nie można go dostosowywać.

  2. Ekran powitalny (widoczny w trakcie części sekwencji oczekiwania): ekran powitalny można dostosować, dodając własną animację logo i elementy marki. Aby działać prawidłowo, musi spełniać wymagania opisane na tej stronie.

  3. Zakończ animację: składa się z animacji ukrywającej ekran powitalny. Jeśli chcesz dostosować ją, użyj przycisku SplashScreenView i jego ikony. Możesz na nich uruchamiać dowolną animację z ustawieniami przekształcenia, przezroczystości i koloru. W takim przypadku ręcznie usuń ekran powitalny po zakończeniu animacji.

Gdy uruchomisz animację ikony, uruchomienie aplikacji umożliwi pominięcie tej sekwencji w sytuacjach, gdy aplikacja jest gotowa do uruchomienia wcześniej. Aplikacja uruchamia onResume() lub ekran powitalny automatycznie wyłącza się, więc zadbaj o to, by można było łatwo pominąć ten ruch. Ekran powitalny można zamknąć za pomocą onResume() tylko wtedy, gdy aplikacja jest stabilna pod względem wizualnym. Nie trzeba w tym celu korzystać z dodatkowych elementów sterujących. Przedstawienie niepełnego interfejsu może być rażące dla użytkowników i sprawiać wrażenie nieprzewidywalności lub braku dopracowania.

Wymagania dotyczące animacji na ekranie powitalnym

Ekran powitalny musi spełniać te wymagania:

  • Ustaw kolor tła pojedynczego okna bez przezroczystości. Tryby dzienne i nocne są obsługiwane przez bibliotekę SplashScreen Comppat.

  • Upewnij się, że animowana ikona spełnia te wymagania:

    • Format: ikona musi być w formacie XML AnimatedVectorDrawable (AVD).
    • Wymiary: ikona AVD musi być 4 razy większa niż ikona adaptacyjna:
      • Obszar ikony musi mieć rozmiar 432 dp, czyli 4 razy większy obszar niż 108 dp niezamaskowanej ikony adaptacyjnej.
      • Wewnętrzna 2/3 obrazu jest widoczna na ikonie programu uruchamiającego i musi mieć 288 dp, czyli 4 razy więcej niż 72 dp, który tworzą zamaskowane wewnętrzny obszar ikony adaptacyjnej.
    • Czas trwania: w przypadku telefonów zalecamy nie więcej niż 1000 ms. Możesz użyć opóźnionego rozpoczęcia, ale nie może on być dłuższy niż 166 ms. Jeśli czas uruchamiania aplikacji przekracza 1000 ms, rozważ użycie animacji w pętli.

  • Wyznacz odpowiedni moment na zamknięcie ekranu powitalnego, który ma miejsce podczas wczytywania pierwszej klatki aplikacji. Możesz go jeszcze bardziej dostosować w sposób opisany w sekcji o utrzymywaniu ekranu powitalnego przez dłuższy czas.

Zasoby ekranu powitalnego

Rysunek 5. Przykład AVD.

Pobierz przykładowy zestaw startowy, który pokazuje, jak utworzyć, sformatować i wyeksportować animację do formatu AVD. Obejmują one:

  • Plik projektu animacji Adobe After Effects.
  • Końcowy wyeksportowany plik XML AVD.
  • Przykładowy GIF animacji.

Pobierając te pliki, wyrażasz zgodę na Warunki korzystania z usług Google.

Sposoby obchodzenia się z danymi w tej usłudze przedstawiamy w Polityce prywatności Google.

Dostosowywanie ekranu powitalnego w aplikacji

Domyślnie SplashScreen używa atrybutu windowBackground motywu, jeśli windowBackground jest jednym kolorem. Aby dostosować ekran powitalny, dodaj atrybuty do motywu aplikacji.

Ekran powitalny aplikacji możesz dostosować, wykonując jedną z tych czynności:

  • Ustaw atrybuty motywu, aby zmienić jego wygląd.

  • Wyświetlaj na ekranie przez dłuższy czas.

  • Dostosuj animację zamykającą ekran powitalny.

Rozpocznij

Podstawowa biblioteka SplashScreen umożliwia korzystanie z ekranu powitalnego Androida 12 na wszystkich urządzeniach z poziomu interfejsu API 23. Aby dodać go do projektu, dodaj do pliku build.gradle ten fragment kodu:

Odlotowy

dependencies {
    implementation "androidx.core:core-splashscreen:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.core:core-splashscreen:1.0.0")
}

Ustaw motyw ekranu powitalnego, aby zmienić jego wygląd

Aby dostosować ekran powitalny aplikacji, możesz podać te atrybuty w motywie Activity. Jeśli masz już starszą implementację ekranu powitalnego, która korzysta z takich atrybutów jak android:windowBackground, rozważ przesłanie pliku zasobów alternatywnych dla Androida 12 lub nowszego.

  1. Aby wypełnić tło pojedynczym kolorem, użyj parametru windowSplashScreenBackground:

    <item name="android:windowSplashScreenBackground">@color/...</item>

  2. Użyj windowSplashScreenAnimatedIcon, aby zastąpić ikonę na środku okna początkowego.

    W przypadku aplikacji kierowanych tylko na Androida 12 (poziom API 32) wykonaj te czynności:

    Jeśli obiekt można animować i rysować za pomocą metod AnimationDrawable i AnimatedVectorDrawable, ustaw parametr windowSplashScreenAnimationDuration, aby odtworzyć animację i wyświetlić okno początkowe. Nie jest to wymagane w przypadku Androida 13, ponieważ czas trwania jest ustalany bezpośrednio na podstawie parametru AnimatedVectorDrawable.

    <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>

  3. Używaj właściwości windowSplashScreenAnimationDuration, aby określić czas trwania animacji ikony na ekranie powitalnym. Nie ma to wpływu na rzeczywisty czas wyświetlania ekranu powitalnego, ale możesz go przywrócić podczas dostosowywania animacji wyjściowej ekranu powitalnego za pomocą polecenia SplashScreenView.getIconAnimationDuration. Więcej informacji znajdziesz w sekcji dotyczącej utrzymywania ekranu powitalnego przez dłuższy czas.

    <item name="android:windowSplashScreenAnimationDuration">1000</item>

  4. Aby ustawić tło za ikoną ekranu powitalnego, użyj funkcji windowSplashScreenIconBackgroundColor. Jest to przydatne, gdy kontrast między tłem okna a ikoną nie jest wystarczający.

    <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>

  5. Za pomocą windowSplashScreenBrandingImage możesz ustawić obraz, który będzie wyświetlany u dołu ekranu powitalnego. ale zgodnie z wytycznymi dotyczącymi wyglądu nie zaleca się używania obrazu marki.

    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>

  6. Za pomocą parametru windowSplashScreenBehavior możesz określić, czy na Androidzie 13 i nowszych aplikacja ma zawsze wyświetlać ikonę na ekranie powitalnym. Wartość domyślna to 0, co powoduje wyświetlenie ikony na ekranie powitalnym, jeśli działanie polegające na uruchomieniu ustawia splashScreenStyle na SPLASH_SCREEN_STYLE_ICON lub jest zgodne z działaniem systemu, jeśli działanie uruchamiania nie ma określonego stylu. Jeśli nie chcesz nigdy wyświetlać pustego ekranu powitalnego i zawsze chcesz, aby animowana ikona była zawsze widoczna, ustaw wartość icon_preferred.

    <item name="android:windowSplashScreenBehavior">icon_preferred</item>

Wyświetlaj ekran powitalny przez dłuższy czas

Ekran powitalny znika, gdy tylko aplikacja wyrenderuje pierwszą klatkę. Jeśli chcesz ładować niewielką ilość danych, na przykład asynchroniczne ładowanie ustawień w aplikacji z dysku lokalnego, możesz użyć ViewTreeObserver.OnPreDrawListener, aby zawiesić aplikację i wyciągnąć pierwszą klatkę.

Jeśli początkowa aktywność zakończy się przed rysowaniem – na przykład gdy nie ustawisz widoku treści i nie zakończysz go przed onResume – odbiornik wstępnego rysowania nie jest potrzebny.

Kotlin

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check whether the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready. Start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content isn't ready. Suspend.
                    false
                }
            }
        }
    )
}

Java

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check whether the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready. Start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content isn't ready. Suspend.
                        return false;
                    }
                }
            });
}

Dostosowywanie animacji zamykającej ekran powitalny

Animację ekranu powitalnego możesz jeszcze bardziej dostosować w Activity.getSplashScreen().

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.doOnEnd { splashScreenView.remove() }

        // Run your animation.
        slideUp.start()
    }
}

Java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

        // Run your animation.
        slideUp.start();
    });
}

Na początku tego wywołania zwrotnego rozpoczyna się animowany wektor wektorowy, który można rysować na ekranie powitalnym. W zależności od tego, jak długo trwa uruchamianie aplikacji, element rysunkowy może znajdować się w środku animacji. Używaj danych SplashScreenView.getIconAnimationStart, aby sprawdzić, kiedy rozpoczęła się animacja. Pozostały czas animacji ikony możesz obliczyć w następujący sposób:

Kotlin

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

Java

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}

Dodatkowe materiały