Udostępnij za pośrednictwem


Ekran powitalny

Uruchomienie aplikacji systemu Android zajmuje trochę czasu, zwłaszcza gdy aplikacja jest uruchamiana po raz pierwszy na urządzeniu. Ekran powitalny może wyświetlać postęp uruchamiania użytkownika lub wskazywać znakowanie.

Omówienie

Uruchomienie aplikacji systemu Android zajmuje trochę czasu, zwłaszcza podczas pierwszego uruchomienia aplikacji na urządzeniu (czasami jest to nazywane zimnym startem). Ekran powitalny może wyświetlać postęp uruchamiania użytkownika lub może wyświetlać informacje o znakowaniu w celu zidentyfikowania i podwyższenia poziomu aplikacji.

W tym przewodniku omówiono jedną technikę implementowania ekranu powitalnego w aplikacji systemu Android. Obejmuje on następujące kroki:

  1. Tworzenie zasobu możliwego do rysowania dla ekranu powitalnego.

  2. Definiowanie nowego motywu, który będzie wyświetlać zasób z możliwością rysowania.

  3. Dodanie nowego działania do aplikacji, która będzie używana jako ekran powitalny zdefiniowany przez motyw utworzony w poprzednim kroku.

Przykładowy ekran powitalny logo platformy Xamarin, po którym następuje ekran aplikacji

Wymagania

W tym przewodniku założono, że aplikacja jest przeznaczona dla interfejsu API systemu Android na poziomie 21 lub wyższym. Aplikacja musi również mieć pakiety NuGet Xamarin.Android.Support.v4 i Xamarin.Android.Support.v7.AppCompat NuGet dodane do projektu.

Implementowanie ekranu powitalnego

Najszybszym sposobem renderowania i wyświetlania ekranu powitalnego jest utworzenie motywu niestandardowego i zastosowanie go do działania, które wyświetla ekran powitalny. Gdy działanie jest renderowane, ładuje motyw i stosuje zasób do rysowania (przywoływane przez motyw) do tła działania. Takie podejście pozwala uniknąć konieczności tworzenia pliku układu.

Ekran powitalny jest implementowany jako działanie, które wyświetla markę rysowalne, wykonuje wszelkie inicjacje i uruchamia wszystkie zadania. Po uruchomieniu aplikacji działanie ekranu powitalnego uruchamia główne działanie i usuwa się ze stosu wstecznego aplikacji.

Tworzenie rysowalnego ekranu powitalnego

Ekran powitalny wyświetli kod XML do rysowania w tle działania ekranu powitalnego. Do wyświetlenia obrazu konieczne jest użycie obrazu z mapą bitową (na przykład PNG lub JPG).

Przykładowa aplikacja definiuje rysowalny o nazwie splash_screen.xml. To rysowanie używa listy warstw, aby wyśrodkować obraz ekranu powitalnego w aplikacji, jak pokazano w poniższym kodzie XML:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/splash_logo"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

Powoduje to layer-list wyśrodkowanie obrazu powitalnego na kolorze tła określonym przez @color/splash_background zasób. Przykładowa aplikacja definiuje ten kolor w pliku Resources/values/colors.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
  ...
  <color name="splash_background">#FFFFFF</color>
</resources>

Aby uzyskać więcej informacji na temat Drawable obiektów, zobacz dokumentację firmy Google dotyczącą systemu Android Drawable.

Implementowanie motywu

Aby utworzyć motyw niestandardowy dla działania ekranu powitalnego, zmodyfikuj (lub dodaj) wartości/styles.xml pliku i utwórz nowy style element ekranu powitalnego. Poniżej przedstawiono przykładowe wartości/style.xml pliku o style nazwie MyTheme.Splash:

<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>

  <style name="MyTheme" parent="MyTheme.Base">
  </style>

  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>  
  </style>
</resources>

MyTheme.Splash jest bardzo spartan — deklaruje tło okna, jawnie usuwa pasek tytułu z okna i deklaruje, że jest pełnoekranowy. Jeśli chcesz utworzyć ekran powitalny, który emuluje interfejs użytkownika aplikacji, zanim działanie nadmuchuje pierwszy układ, możesz użyć windowContentOverlay zamiast windowBackground definicji stylu. W takim przypadku należy również zmodyfikować splash_screen.xml rysowalne tak, aby wyświetlała emulację interfejsu użytkownika.

Tworzenie działania splash

Teraz potrzebujemy nowego działania dla systemu Android, aby uruchomić ten obraz powitalny i wykonać wszystkie zadania uruchamiania. Poniższy kod to przykład pełnej implementacji ekranu powitalnego:

[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : AppCompatActivity
{
    static readonly string TAG = "X:" + typeof(SplashActivity).Name;

    public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
    {
        base.OnCreate(savedInstanceState, persistentState);
        Log.Debug(TAG, "SplashActivity.OnCreate");
    }

    // Launches the startup task
    protected override void OnResume()
    {
        base.OnResume();
        Task startupWork = new Task(() => { SimulateStartup(); });
        startupWork.Start();
    }

    // Simulates background work that happens behind the splash screen
    async void SimulateStartup ()
    {
        Log.Debug(TAG, "Performing some startup work that takes a bit of time.");
        await Task.Delay (8000); // Simulate a bit of startup work.
        Log.Debug(TAG, "Startup work is finished - starting MainActivity.");
        StartActivity(new Intent(Application.Context, typeof (MainActivity)));
    }
}

SplashActivity jawnie używa motywu utworzonego w poprzedniej sekcji, przesłaniając motyw domyślny aplikacji. Nie ma potrzeby ładowania układu, OnCreate ponieważ motyw deklaruje rysowanie jako tło.

Należy ustawić NoHistory=true atrybut tak, aby działanie zostało usunięte ze stosu wstecznego. Aby zapobiec anulowaniu procesu uruchamiania przycisku Wstecz, możesz również zastąpić OnBackPressed go i nie robić nic:

public override void OnBackPressed() { }

Praca uruchamiania jest wykonywana asynchronicznie w pliku OnResume. Jest to konieczne, aby działanie uruchamiania nie spowalniało ani nie opóźniało wyglądu ekranu uruchamiania. Po zakończeniu pracy zostanie uruchomionaMainActivity, SplashActivity a użytkownik może rozpocząć interakcję z aplikacją.

Ten nowy element SplashActivity jest ustawiany jako działanie uruchamiania dla aplikacji przez ustawienie atrybutu MainLauncher na true. Ponieważ SplashActivity jest teraz działanie uruchamiania, musisz edytować MainActivity.csi usunąć MainLauncher atrybut z MainActivity:

[Activity(Label = "@string/ApplicationName")]
public class MainActivity : AppCompatActivity
{
    // Code omitted for brevity
}

Tryb poziomy

Ekran powitalny zaimplementowany w poprzednich krokach będzie wyświetlany poprawnie zarówno w trybie pionowym, jak i poziomym. Jednak w niektórych przypadkach konieczne jest posiadanie oddzielnych ekranów powitalnych dla trybów pionowych i poziomych (na przykład jeśli obraz powitalny jest pełnoekranowy).

Aby dodać ekran powitalny dla trybu poziomego, wykonaj następujące kroki:

  1. W folderze Resources/drawable dodaj wersję poziomą obrazu ekranu powitalnego, którego chcesz użyć. W tym przykładzie splash_logo_land.png to wersja pozioma logo, która została użyta w powyższych przykładach (używa białych liter zamiast niebieskiego).

  2. W folderze Resources/drawable utwórz wersję poziomą rysowalnej layer-list , która została zdefiniowana wcześniej (na przykład splash_screen_land.xml). W tym pliku ustaw ścieżkę mapy bitowej na wersję poziomą obrazu ekranu powitalnego. W poniższym przykładzie splash_screen_land.xml używa splash_logo_land.png:

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item>
        <color android:color="@color/splash_background"/>
      </item>
      <item>
        <bitmap
            android:src="@drawable/splash_logo_land"
            android:tileMode="disabled"
            android:gravity="center"/>
      </item>
    </layer-list>
    
  3. Utwórz folder Resources/values-land, jeśli jeszcze nie istnieje.

  4. Dodaj pliki colors.xml i style.xml do obszaru wartości (można je skopiować i zmodyfikować z istniejących wartości/colors.xml i wartości/style.xml plików).

  5. Zmodyfikuj wartości land/style.xml, aby używała wersji poziomej elementu rysowalnego dla elementu windowBackground. W tym przykładzie jest używana splash_screen_land.xml :

    <resources>
      <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
      </style>
        <style name="MyTheme" parent="MyTheme.Base">
      </style>
      <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_screen_land</item>
        <item name="android:windowNoTitle">true</item>  
        <item name="android:windowFullscreen">true</item>  
        <item name="android:windowContentOverlay">@null</item>  
        <item name="android:windowActionBar">true</item>  
      </style>
    </resources>
    
  6. Zmodyfikuj wartości land/colors.xml, aby skonfigurować kolory, których chcesz użyć dla wersji poziomej ekranu powitalnego. W tym przykładzie kolor tła powitalnego został zmieniony na niebieski dla trybu poziomego:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
      <color name="primary">#2196F3</color>
      <color name="primaryDark">#1976D2</color>
      <color name="accent">#FFC107</color>
      <color name="window_background">#F5F5F5</color>
      <color name="splash_background">#3498DB</color>
    </resources>
    
  7. Skompiluj i uruchom ponownie aplikację. Obróć urządzenie do trybu poziomego, gdy ekran powitalny jest nadal wyświetlany. Ekran powitalny zmienia się na wersję poziomą:

    Obracanie ekranu powitalnego do trybu poziomego

Należy pamiętać, że korzystanie z ekranu powitalnego trybu poziomego nie zawsze zapewnia bezproblemowe środowisko. Domyślnie system Android uruchamia aplikację w trybie pionowym i przenosi ją do trybu poziomego, nawet jeśli urządzenie jest już w trybie poziomym. W związku z tym, jeśli aplikacja jest uruchamiana, gdy urządzenie jest w trybie poziomym, urządzenie na krótko przedstawia pionowy ekran powitalny, a następnie animuje rotację z portretu na ekran powitalny poziomy. Niestety, to początkowe przejście pionowo-poziome odbywa się nawet wtedy, gdy ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape jest określony w flagach działania splash. Najlepszym sposobem obejścia tego ograniczenia jest utworzenie pojedynczego obrazu ekranu powitalnego, który jest renderowany poprawnie zarówno w trybach pionowych, jak i poziomych.

Podsumowanie

W tym przewodniku omówiono jeden ze sposobów implementowania ekranu powitalnego w aplikacji platformy Xamarin.Android; a mianowicie stosowanie motywu niestandardowego do działania uruchamiania.