Úvodní obrazovka

Stažení ukázky

Spuštění aplikace pro Android nějakou dobu trvá, zejména když se aplikace poprvé spustí na zařízení. Na úvodní obrazovce se může zobrazit průběh spuštění uživatele nebo označení značky.

Přehled

Spuštění aplikace pro Android nějakou dobu trvá, zejména při prvním spuštění aplikace na zařízení (někdy se označuje jako studený start). Úvodní obrazovka může uživateli zobrazit průběh spuštění nebo může zobrazovat informace o značce, které aplikaci identifikují a propagují.

Tato příručka popisuje jednu techniku implementace úvodní obrazovky v aplikaci pro Android. Popisuje následující kroky:

1. Vytvoření nakresleného prostředku pro úvodní obrazovku

2. Definování nového motivu, který zobrazí nakreslený prostředek.

3. Přidání nové aktivity do aplikace, která se použije jako úvodní obrazovka definovaná motivem vytvořeným v předchozím kroku.

Požadavky

V této příručce se předpokládá, že aplikace cílí na rozhraní ANDROID API úrovně 21 nebo vyšší. Aplikace musí mít také balíčky NuGet Xamarin.Android.Support.v4 a Xamarin.Android.Support.v7.AppCompat NuGet přidané do projektu.

Veškerý kód a KÓD XML v této příručce najdete v ukázkovém projektu Úvodní obrazovka pro tuto příručku.

Implementace úvodní obrazovky

Nejrychlejší způsob, jak vykreslit a zobrazit úvodní obrazovku, je vytvořit vlastní motiv a použít ho na aktivitu, která zobrazuje úvodní obrazovku. Při vykreslení aktivity načte motiv a použije na pozadí aktivity nakreslený prostředek (odkazovaný motivem). Tento přístup se vyhne nutnosti vytvářet soubor rozložení.

Úvodní obrazovka je implementována jako aktivita, která zobrazuje značky kreslitelné, provádí všechny inicializace a spouští všechny úkoly. Jakmile se aplikace spustí, spustí aktivita úvodní obrazovky hlavní aktivitu a odebere se ze zásobníku zpět aplikace.

Vytvoření kresleného pro úvodní obrazovku

Úvodní obrazovka zobrazí na pozadí aktivity úvodní obrazovky nakreslený kód XML. Pro zobrazení obrázku je nutné použít rastrový obrázek (například PNG nebo JPG).

Ukázková aplikace definuje nakreslený název splash_screen.xml. Tento kreslený objekt používá k zacentrování úvodní obrazovky v aplikaci seznam vrstev, jak je znázorněno v následujícím souboru 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>

Tím layer-list se zacentruje úvodní obrázek na barvu pozadí určenou @color/splash_background prostředkem. Ukázková aplikace definuje tuto barvu v souboru Resources/values/colors.xml :

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

Další informace o Drawable objektech naleznete v dokumentaci Google na Android Drawable.

Implementace motivu

Pokud chcete vytvořit vlastní motiv pro aktivitu úvodní obrazovky, upravte (nebo přidejte) hodnoty souboru nebo styles.xml a vytvořte nový style prvek pro úvodní obrazovku. Níže je uveden ukázkový soubor hodnot/style.xml s style názvem 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 je velmi spartán – deklaruje pozadí okna, explicitně odebere záhlaví z okna a deklaruje, že je na celé obrazovce. Pokud chcete vytvořit úvodní obrazovku, která emuluje uživatelské rozhraní aplikace před tím, než aktivita nafoukne první rozložení, můžete místo v definici stylu použít windowContentOverlaywindowBackground . V tomto případě musíte také upravit splash_screen.xml kreslit tak, aby zobrazoval emulaci uživatelského rozhraní.

Vytvoření úvodní aktivity

Teď potřebujeme novou aktivitu pro Android ke spuštění, která má úvodní obrázek a provádí všechny úlohy po spuštění. Následující kód je příkladem úplné implementace úvodní obrazovky:

[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 explicitně používá motiv vytvořený v předchozí části a přepisuje výchozí motiv aplikace. Vzhledem k tomu, že motiv deklaruje nakreslený jako pozadí, není nutné načíst rozložení OnCreate .

Atribut je důležité nastavit NoHistory=true tak, aby se aktivita odebrala z back stacku. Pokud chcete zabránit zrušení spouštěcího procesu tlačítkem Zpět, můžete ho také přepsat OnBackPressed a nechat ho udělat nic:

public override void OnBackPressed() { }

Spouštěcí práce se provádí asynchronně v OnResume. To je nezbytné, aby se spuštění nezpomalí nebo zpožďuje vzhled úvodní obrazovky. Po dokončení SplashActivity práce se spustí MainActivity a uživatel může začít pracovat s aplikací.

Tato nová SplashActivity je nastavena jako aktivita spouštěče aplikace nastavením atributu MainLauncher na true. Vzhledem k tomu SplashActivity , že je nyní aktivita spouštěče, musíte upravit MainActivity.csa odebrat MainLauncher atribut z MainActivity:

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

Režim na šířku

Úvodní obrazovka implementovaná v předchozích krocích se správně zobrazí v režimu na výšku i na šířku. V některých případech je však nutné mít samostatné úvodní obrazovky pro režimy na výšku a na šířku (například pokud je úvodní obrázek na celé obrazovce).

Pokud chcete přidat úvodní obrazovku pro režim na šířku, postupujte takto:

1. Do složky Zdroje nebo kreslení přidejte verzi na šířku úvodní obrazovky, kterou chcete použít. V tomto příkladu splash_logo_land.png je verze loga na šířku, která byla použita v předchozích příkladech (místo modrého).

2. Ve složce Resources/drawable vytvořte verzi kresleného objektulayer-list, který byl definován dříve (například splash_screen_land.xml). V tomto souboru nastavte cestu rastrového obrázku na šířku obrázku úvodní obrazovky. V následujícím příkladu splash_screen_land.xml používá 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. Pokud složka Resources/values-land ještě neexistuje, vytvořte ji.

4. Přidejte soubory colors.xml a style.xml do oblasti hodnot (lze je zkopírovat a upravit ze stávajících hodnot/colors.xml a hodnot/style.xml souborů).

5. Upravte hodnoty-land/style.xml tak, aby používala krajinnou verzi nakresleného pro windowBackground. V tomto příkladu se používá 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. Upravte hodnoty-land/colors.xml tak, aby se nakonfigurovali barvy, které chcete použít pro verzi úvodní obrazovky na šířku. V tomto příkladu se barva úvodního pozadí změní na modrou pro režim na šířku:

   <?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. Znovu sestavte a spusťte aplikaci. Otočte zařízení do režimu na šířku, zatímco úvodní obrazovka se stále zobrazuje. Úvodní obrazovka se změní na šířku verze:

   

Všimněte si, že použití úvodní obrazovky v režimu na šířku neposkytuje vždy bezproblémové prostředí. Android ve výchozím nastavení spustí aplikaci v režimu na výšku a přepojí ji do režimu na šířku, i když už je zařízení v režimu na šířku. V důsledku toho, pokud je aplikace spuštěná v režimu na šířku, zobrazí zařízení krátce úvodní obrazovku na výšku a pak animuje otočení z na výšku na úvodní obrazovku na šířku. Tento počáteční přechod na výšku na šířku se bohužel provádí i v případě, že ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape je zadaný v příznakech úvodní aktivity. Nejlepším způsobem, jak toto omezení obejít, je vytvořit jeden úvodní obrázek obrazovky, který se správně vykresluje v režimu na výšku i na šířku.

Shrnutí

Tento průvodce popisuje jeden ze způsobů implementace úvodní obrazovky v aplikaci Xamarin.Android; konkrétně použití vlastního motivu na aktivitu spuštění.

Související odkazy

• Úvodní obrazovka (ukázka)
• Nakreslený seznam vrstev
• Vzory návrhu materiálu – úvodní obrazovky