Ekrany powitalne

Od Androida 12 interfejs API SplashScreen umożliwia uruchamianie aplikacji z animacją, w tym z ruchem w kierunku aplikacji podczas jej uruchamiania, ekranem powitalnym pokazującym ikonę aplikacji i przenoszeniem do aplikacji. SplashScreen to Window, więc obejmuje Activity.

Ekran powitalny wprowadza standardowe elementy projektu przy każdym uruchomieniu aplikacji, ale można go też dostosować, aby aplikacja zachowała unikalny branding.

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

Jak działa ekran powitalny

Gdy użytkownik uruchamia aplikację, gdy jej proces nie jest uruchomiony (uruchomienie „na zimno”) lub gdy nie utworzono Activity (uruchomienie częściowo z pamięci), występują te zdarzenia:

1. System wyświetla ekran powitalny, używając motywów i animacji zdefiniowanych przez Ciebie.

2. Gdy aplikacja jest gotowa, ekran powitalny znika i wyświetla się aplikacja.

Ekran powitalny nigdy nie wyświetla się podczas szybkiego uruchamiania.

Elementy i mechanizmy ekranu powitalnego

Elementy ekranu powitalnego są definiowane przez pliki zasobów XML w pliku manifestu Androida. Każdy element ma wersję dla trybu jasnego i ciemnego.

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

Weź pod uwagę te elementy, które są widoczne na rysunku 2:

1 Ikona aplikacji musi być obiektem rysowalnym wektorowo. Może być statyczny lub animowany. Chociaż animacje mogą mieć nieograniczony czas trwania, zalecamy,aby nie przekraczał on 1000 milisekund. Ikona programu uruchamiającego jest domyślna.

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 jest wyświetlane, gdy kontrast z tłem okna jest wystarczający.

3 Podobnie jak w przypadku ikon adaptacyjnych 1/3 pierwszego planu jest zamaskowana.

4 Tło okna składa się z jednego nieprzezroczystego koloru. Jeśli tło okna jest ustawione i jest jednolite, jest używane domyślnie, gdy atrybut nie jest ustawiony.

Wymiary ekranu powitalnego

Ikona ekranu powitalnego ma takie same specyfikacje jak ikony adaptacyjne:

• Obraz z logo 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: 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 × 300 dp, ikona musi mieścić się w okręgu o średnicy 200 dp. Wszystko poza okręgiem staje się niewidoczne (zamaskowane).

Animacje na ekranie powitalnym i sekwencja uruchamiania

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

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

1. Animacja wejściowa: składa się z widoku systemowego i ekranu powitalnego. Jest on kontrolowany przez system i nie można go dostosować.

2. Ekran powitalny (wyświetlany podczas „oczekiwania” w sekwencji): ekran powitalny można dostosować, co pozwala na dodanie własnej animacji logo i elementów 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 ukrywa ekran powitalny. Jeśli chcesz dostosować, użyj SplashScreenView i jego ikony. Możesz uruchomić na nich dowolną animację, korzystając z ustawień przekształcenia, przezroczystości i koloru. W takim przypadku ręcznie usuń ekran powitalny po zakończeniu animacji.

Podczas uruchamiania aplikacji i wyświetlania animacji ikony możesz pominąć sekwencję, jeśli aplikacja jest gotowa wcześniej. Aplikacja uruchamia onResume() lub ekran powitalny automatycznie się wyłącza, więc upewnij się, że ruch można łatwo pominąć. Ekran powitalny można zamknąć za pomocą onResume() tylko wtedy, gdy aplikacja jest stabilna pod względem wizualnym, więc nie są potrzebne żadne dodatkowe wskaźniki oczekiwania. 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 na ekranie powitalnym

Ekran powitalny musi spełniać te wymagania:

• Ustaw jednolity kolor tła okna bez przezroczystości. Tryby dzienny i nocny są obsługiwane przez bibliotekę zgodności SplashScreen.

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

  • Format: ikona musi być plikiem XML AnimatedVectorDrawable (AVD).
  • Wymiary: ikona AVD musi być 4 razy większa od ikony adaptacyjnej:
    • Obszar ikony musi mieć 432 dp, czyli 4 razy więcej niż obszar 108 dp niezamaskowanej ikony adaptacyjnej.
    • Wewnętrzne 2/3 obrazu jest widoczne na ikonie programu uruchamiającego i musi mieć 288 dp, czyli 4 razy więcej niż 72 dp, które stanowią wewnętrzny zamaskowany obszar ikony adaptacyjnej.
  • Czas trwania: zalecamy,aby na telefonach nie przekraczał on 1000 ms. Możesz użyć opóźnionego startu, ale nie może on przekraczać 166 ms. Jeśli czas uruchamiania aplikacji jest dłuższy niż 1000 ms, rozważ animację w pętli.

• Ustal odpowiedni moment na zamknięcie ekranu powitalnego, który następuje, gdy aplikacja rysuje pierwszą klatkę. Możesz go dodatkowo dostosować, jak opisano w sekcji dotyczącej utrzymywania ekranu powitalnego na ekranie przez dłuższy czas.

Zasoby dotyczące ekranu powitalnego

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

• Plik projektu Adobe After Effects z animacją.
• Wyeksportowany plik XML z animowanym obiektem wektorowym.
• 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 jednokolorowy. Aby dostosować ekran powitalny, dodaj atrybuty do motywu aplikacji.

Możesz dostosować ekran powitalny aplikacji, wykonując te czynności:

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

• Wyświetlaj go 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 interfejsem API 23. 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")
}

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

Aby dostosować ekran powitalny aplikacji, możesz określić w motywie Activity te atrybuty. Jeśli masz już starszą implementację ekranu powitalnego, która używa atrybutów takich jak android:windowBackground, rozważ udostępnienie alternatywnego pliku zasobów na Androida 12 lub nowszego.

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 tylko na Androida 12 (poziom API 32):

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

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

3. Użyj windowSplashScreenAnimationDuration, aby wskazać czas trwania animacji ikony ekranu powitalnego. Ustawienie tej wartości nie ma wpływu na rzeczywisty czas wyświetlania ekranu powitalnego, ale możesz ją pobrać podczas dostosowywania animacji wyjścia z ekranu powitalnego za pomocą SplashScreenView.getIconAnimationDuration. Więcej informacji znajdziesz w sekcji poniżej dotyczącej utrzymywania ekranu powitalnego 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, gdy kontrast między tłem okna a ikoną jest niewystarczający.

   <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. Jednak wskazówki dotyczące projektowania odradzają używanie wizerunku marki.

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

6. Możesz użyć windowSplashScreenBehavior, aby określić, czy aplikacja ma zawsze wyświetlać ikonę na ekranie powitalnym na urządzeniach z Androidem 13 lub nowszym. Wartość domyślna to 0, co oznacza, że ikona jest wyświetlana na ekranie powitalnym, jeśli aktywność uruchamiająca ustawia splashScreenStyle na SPLASH_SCREEN_STYLE_ICON, lub zachowuje się zgodnie z systemem, jeśli aktywność uruchamiająca nie określa stylu. Jeśli nie chcesz, aby kiedykolwiek wyświetlał się pusty ekran powitalny, i zawsze chcesz, aby wyświetlała się animowana ikona, ustaw wartość 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 wczytać niewielką ilość danych, np. ustawienia w aplikacji z dysku lokalnego w trybie asynchronicznym, możesz użyć ViewTreeObserver.OnPreDrawListener, aby zawiesić aplikację i wyrenderować jej pierwszą klatkę.

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

// 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 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 tego wywołania zwrotnego uruchamia się animowany obiekt rysowalny wektorowo na ekranie powitalnym. W zależności od czasu uruchamiania aplikacji element rysowalny może być w trakcie animacji. Użyj 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 rzeczywistą implementację ekranu powitalnego;