Ekrany powitalne

Od wersji 12 Androida interfejs API SplashScreen umożliwia uruchamianie aplikacji z animacją, która obejmuje ruch w kierunku aplikacji podczas jej uruchamiania, ekran powitalny pokazujący ikonę aplikacji i przenoszenie do aplikacji. SplashScreen to Window, a zatem obejmuje Activity.

Ekran powitalny zawiera standardowe elementy projektu, które pojawiają się przy każdym uruchomieniu aplikacji, ale możesz go też dostosować, aby zachować unikalny branding aplikacji.

Oprócz interfejsu API platformy SplashScreen możesz też używać biblioteki zgodności SplashScreen, która zawiera interfejs API SplashScreen.

Jak działa ekran powitalny

Gdy użytkownik uruchomi aplikację, gdy jej proces nie jest uruchomiony (uruchomienie „na zimno”) lub gdy Activity nie został utworzony (uruchomienie „na ciepło”), występują te zdarzenia:

1. System wyświetla ekran powitalny z użyciem zdefiniowanych przez Ciebie motywów i animacji.

2. Gdy aplikacja będzie gotowa, ekran powitalny zniknie i uruchomi się aplikacja.

Podczas szybkiego uruchamiania ekran powitalny nigdy się nie wyświetla.

Elementy i mechanizm ekranu powitalnego

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

Elementy ekranu powitalnego, które można dostosować, to ikona aplikacji, tło ikony i tło okna:

Zwróć uwagę na te elementy na rysunku 2:

1 Ikona aplikacji musi być obiektem rysowalnym wektorowo. Może być statyczny lub animowany. Chociaż animacje mogą trwać nieograniczenie długo, zalecamy,aby nie przekraczały 1000 ms. Ikona programu uruchamiającego jest domyślna.

2 Tło ikony jest opcjonalne i przydatne, jeśli chcesz uzyskać większy kontrast między ikoną a tłem okna. Jeśli używasz ikony dostosowującej się do motywu, jej tło jest wyświetlane, jeśli jest wystarczająco kontrastowe w stosunku do tła okna.

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

4 Tło okna składa się z jednego nieprzezroczystego koloru. Jeśli ustawiony jest kolor tła okna, jest on używany domyślnie, jeśli atrybut nie jest ustawiony.

Wymiary ekranu powitalnego

Ikona ekranu powitalnego używa tych samych specyfikacji co ikony adaptacyjne:

• Obraz z logo: musi mieć wymiary 200 × 80 dp.
• Ikona aplikacji z tłem: musi mieć wymiary 240 × 240 dp i mieścić się w okręgu o średnicy 160 dp.
• Ikona aplikacji bez tła: musi mieć wymiary 288 × 288 dp i mieścić się w kółku o średnicy 192 dp.

Jeśli na przykład pełny rozmiar obrazu to 300 x 300 dp, ikona musi mieścić się w kolo 200 dp. Wszystko poza okręgiem staje się niewidoczne (zamaskowane).

animacje ekranu powitalnego i sekwencję uruchamiania,

Dodatkowe opóźnienie jest często związane z uruchamianiem aplikacji „na zimno”. Dodanie animowanej ikony na ekranie powitalnym ma oczywiste walory estetyczne i zapewnia lepsze wrażenia. Badania opinii użytkowników wskazują, że czas uruchamiania aplikacji jest postrzegany jako krótszy, gdy wyświetlana jest animacja.

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

1. Animacja otwierania: składa się z widoku systemu i ekranu powitalnego. Jest on kontrolowany przez system i nie można go dostosowywać.

2. Ekran powitalny (wyświetlany podczas „okresu oczekiwania” w sekwencji): ekran powitalny można dostosować, aby wyświetlać własną animację logo i elementy marki. Aby działać prawidłowo, musi spełniać wymagania opisane na tej stronie.

3. Animacja wyjścia: składa się z animacji, która powoduje ukrycie ekranu powitalnego. Jeśli chcesz je dostosować, użyj ikony SplashScreenView. Możesz stosować do nich dowolne animacje z ustawieniami przekształcenia, krycia i koloru. W takim przypadku po zakończeniu animacji usuń ekran powitalny ręcznie.

Podczas uruchamiania aplikacji masz możliwość pominięcia sekwencji animacji ikony, jeśli aplikacja jest już gotowa. Aplikacja uruchamia onResume()lub automatycznie wyświetla ekran powitalny, dlatego upewnij się, że animacja może być wygodnie pominięta. Ekran powitalny można zamknąć tylko przy użyciu przycisku onResume(), gdy aplikacja jest stabilna pod względem wizualnym, więc nie trzeba używać dodatkowych spinnerów. Wprowadzenie niekompletnego interfejsu może być dla użytkowników nieprzyjemne i może sprawiać wrażenie nieprzewidywalności lub braku dopracowania.

Wymagania dotyczące animacji ekranu powitalnego

Ekran powitalny musi spełniać te wymagania:

• Ustaw kolor tła pojedynczego okna bez przezroczystości. Tryb dzienny i nocny są obsługiwane w przypadku biblioteki kompatybilnej z SplashScreen.

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

  • Format: ikona musi być plikiem AnimatedVectorDrawable (AVD)XML.
  • Wymiary: ikona AVD musi mieć rozmiar 4 razy większy niż ikona adaptacyjna, zgodnie z tym:
    • Obszar ikony musi wynosić 432 dp, czyli 4 razy większą powierzchnię niż 108 dp niemaskowanej ikony adaptacyjnej.
    • Wewnętrzne 2/3 obrazu są widoczne na ikonie w wyszukiwarce i muszą mieć wymiar 288 dp. Innymi słowy, 72 dp, które stanowią wewnętrzną zamaskowaną część ikony adaptacyjnej, muszą być pomnożone przez 4.
  • Czas trwania: na telefonach zalecamy nie przekraczanie 1000 ms. Możesz użyć opóźnionego uruchomienia, ale nie może ono trwać dłużej niż 166 ms. Jeśli czas uruchamiania aplikacji jest dłuższy niż 1000 ms, rozważ użycie animacji w pętli.

• Określ odpowiedni czas wyświetlania ekranu powitalnego, który powinien nastąpić, gdy aplikacja wyświetli swoją pierwszą klatkę. Możesz je dostosować zgodnie z opisem w sekcji Pozostawianie ekranu powitalnego na dłużej.

Zasoby ekranu powitalnego

Pobierz przykładowy pakiet startowy, który pokazuje, jak utworzyć, sformatować i wyeksportować animację do AVD. Obejmuje ona:

• Plik projektu Adobe After Effects z animacją.
• Wyeksportowany plik XML AVD.
• Przykładowy GIF z animacją.

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

Polityka prywatności Google opisuje, jak postępujemy z danymi w tej usłudze.

Dostosowywanie ekranu powitalnego w aplikacji

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

Ekran powitalny aplikacji możesz dostosować na jeden z tych sposobów:

• Aby zmienić wygląd motywu, ustaw jego atrybuty.

• Pozostaw go na ekranie przez dłuższy czas.

• Dostosuj animację zamykania ekranu powitalnego.

Rozpocznij

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

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

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

Aby zmienić wygląd ekranu powitalnego, ustaw motyw.

Aby dostosować ekran powitalny aplikacji, możesz podać te atrybuty w temacie Activity. Jeśli masz już zastrzeżoną implementację ekranu powitalnego, która używa atrybutów takich jak android:windowBackground, rozważ udostępnienie alternatywnego pliku zasobu na potrzeby Androida 12 i nowszych.

1. Aby wypełnić tło jednym kolorem:windowSplashScreenBackground

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

2. Aby zastąpić ikonę na środku okna startowego, użyj windowSplashScreenAnimatedIcon.

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

   Jeśli obiekt można animować i rysować za pomocą właściwości AnimationDrawable i AnimatedVectorDrawable, ustaw wartość windowSplashScreenAnimationDuration na „true”, aby odtwarzać animację podczas wyświetlania okna początkowego. Nie jest to wymagane w przypadku Androida 13, ponieważ czas trwania jest bezpośrednio określany na podstawie AnimatedVectorDrawable.

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

3. Użyj wartości windowSplashScreenAnimationDuration , aby wskazać czas trwania animacji ikony na ekranie powitalnym. Ustawienie tego parametru nie ma wpływu na rzeczywisty czas wyświetlania ekranu powitalnego, ale możesz go przywrócić podczas dostosowywania animacji wyjścia z ekranu powitalnego za pomocą SplashScreenView.getIconAnimationDuration. Więcej informacji znajdziesz w sekcji Pozostawianie ekranu wczytywania na ekranie przez dłuższy czas.

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

4. Użyj windowSplashScreenIconBackgroundColor, aby ustawić tło za ikoną ekranu powitalnego. Jest to przydatne, jeśli między tłem okna a ikoną nie ma wystarczającego kontrastu.

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

5. Możesz użyć windowSplashScreenBrandingImage, aby ustawić obraz, który będzie wyświetlany u dołu ekranu powitalnego. Wytyczne dotyczące projektowania zalecają jednak, aby nie używać obrazów z elementami marki.

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

6. Możesz użyć parametru windowSplashScreenBehavior, aby określić, czy aplikacja ma zawsze wyświetlać ikonę na ekranie powitalnym w Androidzie 13 lub nowszym. Wartość domyślna to 0, która wyświetla ikonę na ekranie powitalnym, jeśli aktywność uruchamiająca ustawia parametr splashScreenStyle na SPLASH_SCREEN_STYLE_ICON, lub zachowuje zachowanie systemu, jeśli aktywność uruchamiająca nie określa stylu. Jeśli nie chcesz nigdy wyświetlać pustego ekranu powitalnego i chcesz, aby zawsze wyświetlała się animowana ikona, ustaw tę wartość na icon_preferred.

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

dłuższe wyświetlanie ekranu powitalnego,

Ekran powitalny znika, gdy tylko aplikacja wyświetli pierwszą klatkę. Jeśli chcesz załadować niewielką ilość danych, np. ustawienia w aplikacji z lokalnego dysku asynchronicznie, możesz użyć funkcji ViewTreeObserver.OnPreDrawListener, aby zawiesić aplikację i wygenerować jej pierwszy kadr.

Jeśli aktywność początkowa kończy się przed narysowaniem – na przykład przez nieustawienie widoku treści i zakończenie przed onResume – nie jest potrzebny listener przed narysowaniem.

// 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
                }
            }
        }
    )
}

// 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 zamykania ekranu powitalnego

Animację ekranu powitalnego możesz dodatkowo dostosować za pomocą Activity.getSplashScreen().

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()
    }
}

@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 tej funkcji wywołania zwrotnego na ekranie powitalnym rozpoczyna się animowany wektor do rysowania. W zależności od czasu uruchamiania aplikacji obraz może być w środku animacji. Użyj parametru SplashScreenView.getIconAnimationStart, aby dowiedzieć się, kiedy rozpoczęła się animacja. Pozostały czas trwania animacji ikony możesz obliczyć w ten sposób:

// 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
}

// 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

• Migracja dotychczasowej implementacji ekranu powitalnego na Androida 12 i nowsze wersje
• Aplikacja Now in Android, która pokazuje praktyczne zastosowanie ekranu powitalnego