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 uruchamia aplikację, gdy proces aplikacji nie jest uruchomiony ( start) lub Activity nie jest (początkowy start), następujące zdarzenia:

  1. System wyświetla ekran powitalny, korzystając z motywów i animacji określić definicję.

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

Ekran powitalny nigdy się nie wyświetla podczas szybki start.

Elementy i mechanika ekranu powitalnego

Elementy ekranu powitalnego są zdefiniowane przez pliki zasobów XML w Plik 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 pokazujący elementy ekranu powitalnego
Rysunek 2. Personalizowane elementy powitania ekranu.

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

1 Ikona aplikacji musi mieć obiekt rysowalny wektorowo. it mogą być statyczne lub animowane. Animacje mogą mieć nieograniczony czas trwania, nie zalecamy przekraczania 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 tagu ikony adaptacyjnej, jest wyświetlane, jeśli kontrast z tłem okna jest wystarczająco duży.

3 Podobnie jak w przypadku ikon adaptacyjnych, jedna trzecia pierwszy plan jest maskowany.

4 Tło okna składa się z jednego nieprzezroczystego koloru. Jeśli tło okna jest ustawione i ma jednolity kolor, zostanie ono użyte 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 ikony: musi mieć wymiary 240 × 240 dp i mieścić się Średnica okręgu: 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 np. pełny rozmiar obrazu ma wymiary 300 × 300 dp, ikona musi pasować wewnątrz okręgu o średnicy 200 dp. Wszystko poza okręgiem zmienia się niewidoczny (zamaskowany).

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 do ekranu powitalnego ma oczywiście estetyczny wygląd, zapewnia bardziej zaawansowane 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: co pokazano na rys. 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. it jest kontrolowany przez system i nie można go dostosować.

  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. Zamknij animację: składa się z animacji, która ukrywa ekran powitalny. Jeśli chcesz je dostosować, użyj SplashScreenView i jej . Można uruchomić na nich dowolną animację z ustawieniami przekształcenia, przezroczystości i koloru. W takim przypadku ręcznie usuń ekran powitalny, gdy animacja jest gotowa.

Podczas uruchamiania animacji ikony przy uruchomieniu aplikacji można pominąć w przypadkach, gdy aplikacja jest gotowa wcześniej. Aplikacja uruchamia onResume() lub automatyczne wygaszanie ekranu powitalnego. Upewnij się, że ruch wygodnie pominąć. Ekran powitalny można zamknąć tylko przy użyciu onResume() jeśli aplikacja jest stabilna pod względem wizualnym, nie pojawiają się niezbędną. Niekompletny interfejs może być niekorzystny dla użytkowników i stwarzają 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. 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 być 4-krotnie większa od rozmiaru adaptacyjnego w następujący sposób:
      • Obszar ikon musi mieć 432 dp, czyli 4-krotność Obszar 108 dp niezamaskowanej 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 go jeszcze bardziej dostosować zgodnie z opisem w sekcji na temat Pozostawianie ekranu powitalnego przez dłuższy czas.

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 animacji.

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

W Polityce prywatności Google opisaliśmy, jak w tej usłudze obsługiwane są dane.

Dostosuj ekran powitalny 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ć, 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 urządzeń z interfejsu API 23. Aby dodać go do projektu, dodaj ten fragment kodu do Twój plik build.gradle:

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

Możesz określić te atrybuty w motywie Activity, aby je dostosować ekranu powitalnego aplikacji. Jeśli masz już starszą wersję ekranu powitalnego implementacji, która korzysta z takich atrybutów jak android:windowBackground, rozważ udostępniając alternatywny plik zasobów na Androida 12 i nowsze wersje.

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

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

  2. Używaj 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ć 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żywaj 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 Zobacz następującą sekcję na temat: wyświetlanie ekranu powitalnego przez dłuższy czas .

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

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

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

  5. Za pomocą windowSplashScreenBrandingImage aby ustawić obraz wyświetlany u dołu ekranu powitalnego. Jednak wytyczne dotyczące projektowania nie są zalecane.

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

  6. Za pomocą windowSplashScreenBehavior aby określić, czy aplikacja zawsze ma wyświetlać ikonę na ekranie powitalnym w Android 13 lub nowszy. Wartością domyślną jest 0. Ikona ekranu powitalnego, jeśli działanie związane z uruchomieniem ustawia splashScreenStyle na SPLASH_SCREEN_STYLE_ICON, lub działa zgodnie z działaniem systemu, jeśli działanie związane z uruchamianiem nie określa parametru stylu. Jeśli nie chcesz wyświetlać pustego ekranu powitalnego i zawsze chcesz animowanej ikony, 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 muszą wczytać niewielką ilość danych, np. ustawienia w aplikacji asynchronicznie dysku lokalnego, ViewTreeObserver.OnPreDrawListener zawiesić aplikację i wygenerować pierwszą klatkę.

Jeśli początkowa aktywność zakończy się przed rysowaniem – np. nie ustawić widok treści i zakończyć przed onResume, czyli wstępne rysowanie Nie jest potrzebny detektor.

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 jeszcze bardziej dostosować animację ekranu powitalnego 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żywaj SplashScreenView.getIconAnimationStart aby wiedzieć, kiedy zaczęła się animacja. Możesz obliczyć pozostały czas trwania będzie wyglądać tak:

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