Ekrany powitalne

Począwszy od Androida 12 Interfejs API SplashScreen umożliwia uruchamianie aplikacji z animacją, w tym ruchem w aplikacji po uruchomieniu, ekranem powitalnym ikonę aplikacji i przejście do samej aplikacji. SplashScreen to Window i obejmuje więc Activity

Rysunek 1. Ekran powitalny

Ekran powitalny wprowadza standardowe elementy graficzne do każdej aplikacji ale można ją dostosować, aby zachować unikalną cechę marki.

Oprócz korzystania z interfejsu API platformy SplashScreen możesz też używać SplashScreen biblioteka kompatybilna, która obejmuje 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 jest 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 swoje zastosowanie w trybie jasnym i ciemnym.

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

Obraz przedstawiający elementy zawarte na ekranie powitalnym
Rysunek 2. Personalizowane elementy powitania ekranu.

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

1 Ikona aplikacji musi być obiektem rysowalnym wektorowo. it mogą być statyczne lub animowane. Animacje mogą mieć nieograniczony czas trwania, zalecamy nie przekraczać 1000 milisekund. Domyślna ikona programu uruchamiającego.

2 Tło ikony jest opcjonalne i przydatne, jeśli Potrzeba większego kontrastu 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 z tłem 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 ma te same specyfikacje co ikon adaptacyjnych, w następujący sposób:

  • Obraz marki: 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ę koło 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).

Ilustracja pokazująca ikony o różnych rozmiarach dla jednolitego i przezroczystego tła
Rysunek 3. Wymiary ikony na ekranie powitalnym dla: na jednolitym i przezroczystym tle.

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 na ekranie powitalnym ma oczywiste walory estetyczne i zapewnia lepsze wrażenia. Badania opinii użytkowników pokazują, że postrzegany start-up czas oglądania animacji jest krótszy.

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

Obraz pokazujący sekwencję uruchamiania w 12 kolejnych ujęciach, począwszy od kliknięcia ikony programu uruchamiającego i powiększenia obrazu wypełniającego ekran
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 w trakcie części sekwencji „oczekiwanie”): ekran powitalny ekran można dostosować, dodając własną animację logo marki. 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 uruchomić na nich dowolną animację z ustawieniami przekształcenia, krycia i koloru. W takim przypadku ręcznie usuń ekran powitalny, gdy animacja jest gotowa.

Podczas uruchamiania aplikacji, gdy animacja ikony jest odtwarzana, możesz pominąć sekwencję, 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. Niekompletny interfejs może być niekorzystny dla użytkowników i stwarzają wrażenie nieprzewidywalności lub braku dopracowania.

Wymagania dotyczące animacji ekranu powitalnego

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

  • Ustaw kolor tła jednego okna bez przezroczystości. Dzień i noc są obsługiwane przez Biblioteka kompatybilna SplashScreen.

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

    • Format: ikona musi mieć AnimatedVectorDrawable (AVD) Plik XML:
    • Wymiary: ikona AVD musi mieć 4 razy większy rozmiar niż ikona adaptacyjna, zgodnie z tym wzorem:
      • Powierzchnia ikony musi wynosić 432 dp, czyli 4 razy większą powierzchnię 108 dp niemaskowanej ikony adaptacyjnej.
      • Na ikonie programu uruchamiającego widoczne są 2/3 wewnętrznej części obrazu. i musi wynosić 288 dp, czyli 4 razy więcej niż 72 dp, tworzy wewnętrzny obszar maskowany ikony adaptacyjnej.
    • Czas trwania: w przypadku telefonów zalecamy nie więcej niż 1000 ms. Za pomocą jest opóźnione, ale nie może trwać dłużej niż 166 ms. Jeśli aplikacja czas uruchamiania jest dłuższy niż 1000 ms, pomyśl o animacji zapętlającej.

  • Ustaw odpowiednią godzinę zamknięcia ekranu powitalnego, aplikacja pobiera 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 zestaw startowy, , który pokazuje, 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 z animacją.

Pobierając te pliki, akceptujesz te dokumenty: 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 elementu windowBackground Twojego motywu, jeśli windowBackground jest jednokolorowy. Aby dostosować ekran powitalny, dodaj do motywu aplikacji.

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

  • 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 urządzeń z interfejsu API 23. 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")
}

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

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

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

  2. Użyj 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 jest animowany i można go rysować AnimationDrawable i AnimatedVectorDrawable, ustaw windowSplashScreenAnimationDuration na odtwarzanie animacji w trakcie wyświetlania okna początkowego. Nie jest to wymagane na Androida 13, ponieważ czas trwania jest bezpośrednio AnimatedVectorDrawable

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

  3. Użyj windowSplashScreenAnimationDuration aby wskazać czas trwania animacji ikony na ekranie powitalnym. Ustawienie Nie ma wpływu na czas wyświetlania ekranu powitalnego ale możesz go pobrać podczas dostosowywania wyjścia 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. Za pomocą windowSplashScreenBrandingImage aby ustawić obraz 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, co powoduje wyświetlenie ikony 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 muszą wczytać niewielką ilość danych, np. ustawienia w aplikacji asynchronicznie dysku lokalnego, ViewTreeObserver.OnPreDrawListener zawiesić aplikację i wygenerować pierwszą klatkę.

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

Dostosuj animację 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 tego wywołania zwrotnego animowany obiekt rysowalny wektorowy na ekranie powitalnym. W zależności od czasu trwania tego procesu obiekt do rysowania może być w trakcie 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:

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