Ekrany powitalne

Od Androida 12 aplikacje uruchamiają się z systemowym ekranem powitalnym, który obejmuje ruch w kierunku aplikacji podczas jej uruchamiania, ekran powitalny pokazujący ikonę aplikacji i przenoszenie do aplikacji. Ekran powitalny to Window, więc obejmuje Activity.

Rysunek 1. Ekran powitalny.

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

Aby dostosować ekran powitalny w aplikacji, użyj biblioteki zgodności Jetpack SplashScreen. Interfejs ten opakowuje interfejs API platformy SplashScreen i działa z dowolnym elementem ComponentActivity, w tym z aktywnościami, które ustawiają interfejs za pomocą Compose przy użyciu setContent.

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 jasnego i ciemnego motywu.

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

Ekran powitalny z ponumerowanymi objaśnieniami elementów, które można dostosować
Rysunek 2. Elementy ekranu powitalnego, które można dostosować.

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: 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).

Wymiary ikony ekranu powitalnego z jednolitym i przezroczystym tłem
Rysunek 3. Wymiary ikony ekranu powitalnego odpowiednio dla jednolitego i przezroczystego tła.

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

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

Sekwencja uruchamiania w 12 kolejnych klatkach, zaczynając od kliknięcia ikony programu uruchamiającego i wypełnienia ekranu w miarę powiększania
Rysunek 4. Sekwencja uruchamiania.

  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 go dostosować, użyj widoku SplashScreenViewProvider i jego ikony. Możesz zastosować do nich dowolną animację, korzystając z ustawień przekształcenia, krycia 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ą metody 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 jeden 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, jak poniżej:
      • 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 tworzą 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

Rysunek 5. Przykładowe urządzenie AVD.

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

  • Plik projektu animacji w Adobe After Effects.
  • 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 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 ten fragment kodu do pliku build.gradle:

Dynamiczny

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

Kotlin

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

Następnie utwórz motyw ekranu powitalnego, który dziedziczy z Theme.SplashScreen, ustaw postSplashScreenTheme na motyw, którego aktywność używa później, zastosuj motyw ekranu powitalnego w pliku manifestu (patrz Migracja dotychczasowej implementacji ekranu powitalnego na Androida 12) i wywołaj installSplashScreen() w aktywności początkowej przed wywołaniem super.onCreate(), jak pokazano w przykładach w następnych sekcjach.

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 i nowsze wersje.

  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 interfejsu 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 określić 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ą SplashScreenViewProvider.iconAnimationDurationMillis. Więcej informacji znajdziesz w sekcji poniżej dotyczącej dłuższego wyświetlania ekranu powitalnego.

    <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 zgodnie ze wskazówkami dotyczącymi projektowania nie zaleca się używania obrazu 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 wolisz, aby zawsze była wyświetlana 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 musisz wczytać niewielką ilość danych, np. asynchronicznie wczytać ustawienia w aplikacji z dysku lokalnego, użyj setKeepOnScreenCondition, aby ekran powitalny był widoczny, dopóki dane nie będą gotowe. Warunek jest oceniany przed narysowaniem każdej klatki, więc powinien być szybki, aby nie blokować interfejsu.

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

override fun onCreate(savedInstanceState: Bundle?) {
    // Install the splash screen before calling super.onCreate().
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Keep the splash screen on-screen until the initial data is ready.
    // The condition is checked each time the app is about to draw a frame.
    splashScreen.setKeepOnScreenCondition { !viewModel.isReady.value }

    setContent {
        MyApp()
    }
}

Dostosowywanie animacji zamykania ekranu powitalnego

Animację ekranu powitalnego możesz dostosować za pomocą setOnExitAnimationListener. Detektor otrzymuje obiekt SplashScreenViewProvider, który udostępnia widok ekranu powitalnego do animacji. Wywołaj remove(), gdy animacja się zakończy.

override fun onCreate(savedInstanceState: Bundle?) {
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenViewProvider ->
        val splashScreenView = splashScreenViewProvider.view
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenViewProvider.remove at the end of your custom
        // animation.
        slideUp.doOnEnd { splashScreenViewProvider.remove() }

        // Run your animation.
        slideUp.start()
    }

    setContent {
        MyApp()
    }
}

Przed rozpoczęciem 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 SplashScreenViewProvider.iconAnimationStartMillis, aby dowiedzieć się, kiedy animacja się rozpoczęła. Pozostały czas trwania animacji ikony możesz obliczyć w ten sposób:

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenViewProvider.iconAnimationDurationMillis
// Get the start time of the animation, in milliseconds since the epoch.
val animationStart = splashScreenViewProvider.iconAnimationStartMillis
// Calculate the remaining duration of the animation.
val remainingDuration =
    (animationDuration - (System.currentTimeMillis() - animationStart))
        .coerceAtLeast(0L)

Dodatkowe materiały