Sdílet prostřednictvím

Přidání úvodní obrazovky do projektu aplikace .NET MAUI

  • Článek

V systémech Android a iOS můžou aplikace .NET Multi-Platform App UI (.NET MAUI) během inicializace zobrazovat úvodní obrazovku. Úvodní obrazovka se zobrazí okamžitě po spuštění aplikace a poskytne uživatelům okamžitou zpětnou vazbu, zatímco se inicializují prostředky aplikace:

Snímek obrazovky úvodní obrazovky .NET MAUI

Jakmile je aplikace připravená na interakci, úvodní obrazovka se zavře.

Důležité

V iOSu 16.4 nebo novějších simulátory nenačtou úvodní obrazovku, pokud není vaše aplikace podepsaná. Další informace, včetně alternativního řešení, najdete v tématu Problém GitHubu 18479.

Na Androidu 12+ (ROZHRANÍ API 31+) se na úvodní obrazovce zobrazuje ikona, která je na obrazovce uprostřed. Další informace o úvodních obrazovkách na Androidu 12 nebo novějších najdete v tématu Úvodní obrazovky na developer.android.com.

V projektu aplikace .NET MAUI je možné úvodní obrazovku zadat na jednom místě v projektu aplikace a v době sestavení se dá změnit její velikost na správné rozlišení cílové platformy a přidat ji do balíčku aplikace. Díky tomu nemusíte ručně duplikovat úvodní obrazovku a pojmenovat ji na jednotlivých platformách. Ve výchozím nastavení se rastrové obrázky (bez vektoru) automaticky nedají změnit velikost pomocí rozhraní .NET MAUI.

Úvodní obrazovka .NET MAUI může používat kterýkoli ze standardních formátů obrázků platformy, včetně souborů SVG (Scalable Vector Graphics).

Důležité

.NET MAUI převádí soubory SVG na soubory PNG. Proto při přidávání souboru SVG do projektu aplikace .NET MAUI by se měl odkazovat z XAML nebo C# s příponou .png. Jediný odkaz na soubor SVG by měl být v souboru projektu.

Úvodní obrazovku můžete do projektu aplikace přidat přetažením obrázku do složky Resources\Splash projektu, kde se akce sestavení automaticky nastaví na MauiSplashScreen. Tím se vytvoří odpovídající položka v souboru projektu:

<ItemGroup>
  <MauiSplashScreen Include="Resources\Splash\splashscreen.svg" />
</ItemGroup>

Poznámka:

Úvodní obrazovku můžete také přidat do jiných složek projektu aplikace. V tomto scénáři však musí být akce sestavení ručně nastavena na MauiSplashScreen v okně Vlastnosti .

Aby bylo možné dodržovat pravidla pojmenování prostředků Androidu, musí být názvy souborů úvodní obrazovky malými písmeny, začínat a končit písmenem a obsahovat pouze alfanumerické znaky nebo podtržítka. Další informace najdete v přehledu prostředků aplikace na developer.android.com.

V době sestavení se obrázek úvodní obrazovky změní na správnou velikost cílové platformy a zařízení. Do balíčku aplikace se pak přidá změněná úvodní obrazovka. Informace o zakázání balení úvodní obrazovky naleznete v tématu Zakázání balení úvodní obrazovky. Informace o generování prázdné úvodní obrazovky naleznete v tématu Vygenerování prázdné úvodní obrazovky.

Nastavení základní velikosti

.NET MAUI používá úvodní obrazovku na různých platformách a může změnit její velikost pro každou platformu.

Základní velikost úvodní obrazovky představuje základní hustotu obrázku a je efektivní měřítko 1,0 měřítka obrázku (velikost, kterou byste ve svém kódu obvykle použili k určení velikosti úvodní obrazovky), ze které jsou odvozeny všechny ostatní velikosti. Pokud nezadáte základní velikost rastrového obrázku, velikost obrázku se nezvětšuje. Pokud pro vektorový obrázek nezadáte základní velikost, například soubor SVG, použijí se rozměry zadané v obrázku jako základní velikost.

Následující diagram znázorňuje, jak základní velikost ovlivňuje obrázek:

Vliv základní velikosti na ikonu aplikace pro .NET MAUI

Proces zobrazený v diagramu se řídí těmito kroky:

  • A: Obrázek má rozměry 210x260 a základní velikost je nastavená na 424x520.
  • B: .NET MAUI škáluje image tak, aby odpovídala základní velikosti 424x520.
  • C: Vzhledem k tomu, že různé cílové platformy vyžadují různé velikosti image, .NET MAUI škáluje image ze základní velikosti na různé velikosti.

Tip

Obrázky SVG používejte tam, kde je to možné. Obrázky SVG můžou zvětšit až na větší velikosti a stále vypadají ostře a čistě. Rastrové obrázky, jako je obrázek PNG nebo JPG, vypadají při škálování rozmazaně.

Základní velikost je určena atributem BaseSize="W,H" , kde W je šířka obrázku a H je výška obrázku. Následující příklad nastaví základní velikost:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" BaseSize="128,128" />

V době sestavení se úvodní obrazovka změní na správné rozlišení cílové platformy. Výsledná úvodní obrazovka se pak přidá do balíčku aplikace.

Pokud chcete zastavit změnu velikosti vektorových obrázků, nastavte Resize atribut na false:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" Resize="false" />

Přidání barvy barevných odstínů a pozadí

Pokud chcete na úvodní obrazovku přidat barevný nádech, což je užitečné, když máte jednoduchý obrázek, který chcete pro zdroj vykreslit jinou barvou, nastavte TintColor atribut:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" TintColor="#66B3FF" />

Můžete také zadat barvu pozadí úvodní obrazovky:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" Color="#512BD4" />

Hodnoty barev se dají zadat v šestnáctkovém formátu nebo jako barva .NET MAUI. Je například Color="Red" platný.

Konfigurace specifická pro platformu

Na Androidu se úvodní obrazovka přidá do balíčku aplikace jako Resources/values/maui_colors.xml a Resources/drawable/maui_splash_image.xml. Aplikace .NET MAUI používají Maui.SplashTheme ve výchozím nastavení, což zajišťuje, že se v případě přítomnosti zobrazí úvodní obrazovka. Proto byste neměli v souboru manifestu ani ve třídě MainActivity zadávat jiný motiv:

using Android.App;
using Android.Content.PM;

namespace MyMauiApp
{
      [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize)]
      public class MainActivity : MauiAppCompatActivity
      {
      }
}

Pro pokročilejší scénáře úvodní obrazovky platí přístupy pro jednotlivé platformy.