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, a zatem obejmuje Activity.

Rysunek 1. ekran powitalny.

Ekran powitalny zawiera standardowe elementy projektu, które są wyświetlane przy każdym uruchomieniu aplikacji, ale można 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 proces aplikacji 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 mechanika 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:

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

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 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 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 ikony: musi mieć wymiary 288 × 288 dp i mieścić się w okręgu 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).

Obraz przedstawiający różne wymiary ikony na tle jednolitym i przezroczystym
Rysunek 3. Wymiary ikony ekranu wczytywania dla odpowiednio jednolitych i przezroczystych tła.

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świetla się animację.

Animacja ekranu powitalnego jest umieszczona w komponentach sekwencji uruchamiania, jak pokazano 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. 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. Zamknij animację: składa się z animacji, która ukrywa ekran powitalny. Jeśli chcesz je dostosować, użyj ikony SplashScreenView. Możesz uruchomić na nich dowolną animację 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 animacji ikony, jeśli aplikacja jest już gotowa. Aplikacja uruchamia onResume()lub ekran powitalny automatycznie się wyłącza, więc 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 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ć plikiem AnimatedVectorDrawable (AVD)XML.
    • Wymiary: ikona AVD musi mieć rozmiar 4 razy większy niż ikona adaptacyjna, zgodnie z tym:
      • Powierzchnia ikony musi wynosić 432 dp, czyli 4 razy większą powierzchnię niż niemaskowana ikona dostosowująca się do rozmiaru 108 dp.
      • 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 on być dłuższy niż 166 ms. Jeśli czas uruchamiania aplikacji przekracza 1000 ms, rozważ animację zapętlania.

  • 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

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

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ą.
  • Final exported AVD XML file.
  • 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:

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

  • 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:

Groovy

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

Kotlin

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. 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 na Androida 12 (poziom API 32) wykonaj te czynności:

    Jeśli obiekt można animować i rysować za pomocą AnimationDrawable i AnimatedVectorDrawable, ustaw 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 do wskazania czasu trwania animacji ikony ekranu powitalnego. 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 ma wyświetlać się 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. 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 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.

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

Animację ekranu powitalnego możesz dodatkowo dostosować za pomocą 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 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. Aby dowiedzieć się, kiedy rozpoczęła się animacja, użyj parametru SplashScreenView.getIconAnimationStart. Pozostały czas trwania 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