Ekrany powitalne

Począwszy od Androida 12 interfejs API SplashScreen pozwala aplikacjom uruchamiać się z animacją, w tym ruchem w aplikacji podczas uruchamiania, ekranem powitalnym z ikoną aplikacji oraz przejściem do samej aplikacji. SplashScreen to Window, dlatego obejmuje Activity.

Rysunek 1. Ekran powitalny

Ekran powitalny wprowadza standardowe elementy przy każdej wprowadzeniu aplikacji, ale możesz go dostosować, aby aplikacja zachowała unikalną cechę marki.

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

Jak działa ekran powitalny

Gdy użytkownik uruchomi aplikację, gdy proces aplikacji nie jest uruchomiony (uruchomienie zimnego startu) lub Activity nie został utworzony (uruchomienie częściowo), występują te zdarzenia:

  1. System wyświetla ekran powitalny, korzystając z zdefiniowanych przez Ciebie motywów i animacji.

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

Ekran powitalny nigdy się nie pojawia podczas uruchamiania z pamięci.

Elementy i mechanika ekranu powitalnego

Elementy ekranu powitalnego są definiowane przez pliki zasobów XML w pliku manifestu Androida. Każdy element ma swoje zastosowanie w trybie jasnym i ciemnym.

Dostosowywane elementy ekranu powitalnego to ikona aplikacji, tło ikony i tło okna:

Obraz pokazujący elementy ekranu powitalnego
Rysunek 2. Dostosowywane elementy ekranu powitalnego.

Weź pod uwagę te elementy pokazane na rys. 2:

1 Ikona aplikacji musi mieć obiekt rysowalny wektorowo. Może być statyczny lub animowany. Chociaż czas trwania animacji jest nieograniczony, zalecamy nieprzekraczanie limitu 1000 milisekund. Domyślna 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żywasz ikony adaptacyjnej, jej tło wyświetla się, jeśli kontrastuje z tłem okna w wystarczającym stopniu.

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

4 Tło okna ma jeden nieprzezroczysty kolor. Jeśli tło okna jest ustawione i ma jednolity kolor, to jest domyślnie używane, gdy atrybut nie jest ustawiony.

Wymiary ekranu powitalnego

W przypadku ikony ekranu powitalnego obowiązują te same specyfikacje co ikony adaptacyjne:

  • Obraz marki: musi mieć wymiary 200 × 80 dp.
  • Ikona aplikacji z tłem ikony: musi mieć wymiary 240 × 240 dp i mieści się w kole 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 np. pełny rozmiar obrazu ma wymiary 300 × 300 dp, ikona musi zmieścić się w okręgu o średnicy 200 dp. Wszystko poza okręgiem staje się niewidoczne (zamaskowane).

Ilustracja pokazująca ikony o różnych rozmiarach dla jednolitego i przezroczystego tła
Rysunek 3. Wymiary ikony ekranu powitalnego odpowiednio dla tła jednolitego i przezroczystego.

Animacje na ekranie powitalnym i sekwencja uruchamiania

Dodatkowe opóźnienia są często związane z uruchamianiem aplikacji przy uruchomieniu „na zimno”. Dodanie animowanej ikony do ekranu powitalnego ma oczywisty walor estetyczny i zapewnia użytkownikom lepsze wrażenia. Badania opinii użytkowników pokazują, że widoczny czas uruchamiania podczas oglądania animacji jest krótszy.

Animacja na ekranie powitalnym jest umieszczona w komponentach sekwencji uruchamiania, jak widać na rysunku 4.

Obraz przedstawiający sekwencję uruchamiania w 12 kolejnych klatkach, na początku dotykając ikony programu uruchamiającego i wypełniając ekran w miarę jego powiększania
Rysunek 4. Sekwencja uruchamiania.

  1. Otwórz animację: obejmuje widok systemu na ekranie powitalnym. Zajmuje się nią system i nie można jej dostosować.

  2. Ekran powitalny (widoczny w części sekwencji: „oczekiwanie”): 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. Zamknij animację: składa się z animacji, która ukrywa ekran powitalny. Jeśli chcesz dostosować ustawienia, użyj ikony SplashScreenView i jej ikony. Możesz uruchomić na nich dowolną animację z ustawieniami przekształcenia, przezroczystości i koloru. W takim przypadku musisz ręcznie usunąć ekran powitalny po zakończeniu animacji.

Podczas uruchamiania animacji ikony przy uruchomieniu aplikacji możesz pominąć sekwencję, jeśli aplikacja jest gotowa wcześniej. Aplikacja aktywuje funkcję onResume() lub automatycznie mija czas oczekiwania ekranu powitalnego, więc upewnij się, że ruch można pominąć. Ekran powitalny można zamknąć za pomocą polecenia onResume() tylko wtedy, gdy aplikacja jest stabilna z punktu widzenia wizualnego działania – nie są potrzebne dodatkowe wskaźniki. Przedstawienie niepełnego interfejsu może zdenerwować użytkowników i sprawiać wrażenie nieprzewidywalności lub braku dopracowania.

Wymagania dotyczące animacji na ekranie powitalnym

Ekran powitalny musi spełniać następujące wymagania:

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

  • 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 od ikony adaptacyjnej, zgodnie z tymi zasadami:
      • Obszar ikon musi mieć wartość 432 dp, czyli 4-krotność obszaru 108 dp niezamaskowanej ikony adaptacyjnej.
      • Na ikonie programu uruchamiającego widoczne są wewnętrzne dwie trzecie obrazu i muszą one wynosić 288 dp, czyli 4 razy więcej niż 72 dp, które stanowią wewnętrzny, maskowany obszar ikony adaptacyjnej.
    • Czas trwania: w przypadku telefonów zalecamy nie więcej niż 1000 ms. Możesz użyć opóźnionego uruchomienia, ale nie może on być dłuższy niż 166 ms. Jeśli czas uruchamiania aplikacji przekracza 1000 ms, rozważ animację zapętlania.

  • Ustaw odpowiednią godzinę do zamknięcia ekranu powitalnego, gdy aplikacja wyświetla pierwszą klatkę. Możesz go bardziej dostosować zgodnie z opisem w sekcji o utrzymaniu ekranu powitalnego przez dłuższy czas.

Zasoby ekranu powitalnego

Rysunek 5. Przykładowy ŚREDNI CZAS OGLĄDANIA.

Pobierz przykładowy zestaw startowy, z którego dowiesz się, jak utworzyć, sformatować i wyeksportować animację do AVD. Oto niektóre z nich:

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

Pobierając te pliki, akceptujesz Warunki korzystania z usług Google.

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

Dostosuj ekran powitalny w aplikacji

Domyślnie SplashScreen używa koloru windowBackground Twojego motywu, jeśli windowBackground jest pojedynczym 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.

  • Zadbaj o to, aby wyświetlały się na ekranie przez dłuższy czas

  • Dostosuj animację zamykania ekranu powitalnego.

Rozpocznij

Podstawowa biblioteka SplashScreen udostępnia ekran powitalny Androida 12 na wszystkich urządzeniach z interfejsu API 23. Aby dodać go do projektu, dodaj do pliku build.gradle ten fragment kodu:

Odlotowe

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 określić te atrybuty w motywie Activity. Jeśli masz już starszą implementację ekranu powitalnego, która używa atrybutów takich jak android:windowBackground, możesz przesłać alternatywny plik zasobów dla Androida 12 i nowszych wersji.

  1. Użyj windowSplashScreenBackground, aby wypełnić tło określonym jednym kolorem:

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

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

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

    Jeśli obiekt jest animowany i można go rysować za pomocą obiektów AnimationDrawable i AnimatedVectorDrawable, ustaw windowSplashScreenAnimationDuration na odtwarzanie animacji w oknie początkowym. Nie jest to wymagane w Androidzie 13, ponieważ czas trwania jest bezpośrednio wnioskowany na podstawie AnimatedVectorDrawable.

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

  3. Użyj właściwości windowSplashScreenAnimationDuration, aby określić czas trwania animacji ikony na ekranie powitalnym. Ustawienie tej opcji nie ma żadnego wpływu na czas wyświetlania ekranu powitalnego, ale możesz go pobrać podczas dostosowywania animacji wyjścia z ekranu powitalnego za pomocą funkcji SplashScreenView.getIconAnimationDuration. Więcej informacji znajdziesz w sekcji poświęconej wyświetlaniu ekranu powitalnego przez dłuższy czas.

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

  4. Użyj ikony windowSplashScreenIconBackgroundColor, aby ustawić tło za ikoną ekranu powitalnego. Jest to przydatne, gdy kontrast między tłem okna a ikoną jest za mały.

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

  5. Możesz użyć opcji windowSplashScreenBrandingImage, aby ustawić wyświetlanie obrazu u dołu ekranu powitalnego. wytyczne dotyczące projektowania odradzają jednak używanie obrazu marki.

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

  6. Możesz użyć właściwości windowSplashScreenBehavior, aby określić, czy na Androidzie 13 i nowszych aplikacja ma zawsze wyświetlać ikonę na ekranie powitalnym. Wartość domyślna to 0. Ikona jest wyświetlana na ekranie powitalnym, jeśli działanie uruchamiania ustawia splashScreenStyle na SPLASH_SCREEN_STYLE_ICON, lub jest zgodne z działaniem systemu, jeśli działanie związane z uruchamianiem nie określa stylu. Jeśli nie chcesz nigdy wyświetlać pustego ekranu powitalnego i zawsze chcesz wyświetlać animowaną ikonę, ustaw wartość icon_preferred.

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

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

Ekran powitalny znika zaraz po wyświetleniu pierwszej ramki aplikacji. Jeśli musisz wczytać niewielką ilość danych, np. asynchronicznie wczytywać ustawienia aplikacji z dysku lokalnego, za pomocą funkcji ViewTreeObserver.OnPreDrawListener możesz zawiesić aplikację i wyrenderować pierwszą klatkę.

Jeśli początkowa aktywność zakończy się przed rysowaniem – na przykład jeśli nie ustawisz widoku treści i nie ukończysz przed onResume – detektor 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;
                    }
                }
            });
}

Dostosuj animację zamykania ekranu powitalnego

Możesz dostosować animację ekranu powitalnego za pomocą narzędzia 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();
    });
}

Początek tego wywołania zwrotnego rozpoczyna animowany wektor rysowalny na ekranie powitalnym. W zależności od tego, jak długo trwa uruchomienie aplikacji, element rysowalny może być w tym samym środku animacji. Użyj SplashScreenView.getIconAnimationStart, aby sprawdzić, kiedy zaczęła się animacja. Pozostały czas animacji ikony możesz obliczyć w ten 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