Prodlužte dobu trvání úvodní obrazovky vytvořením a používáním rozšířené úvodní obrazovky pro vaši aplikaci. Tato vylepšená obrazovka napodobuje úvodní obrazovku, která se zobrazí při spuštění aplikace, lze ji však přizpůsobit. Ať už chcete zobrazit informace o načítání v reálném čase nebo dát své aplikaci více času na přípravu úvodního uživatelského rozhraní, vylepšená úvodní obrazovka může pomoci definovat uživatelské prostředí při spuštění.

Fráze “rozšířená úvodní obrazovka” v této části odkazuje na úvodní obrazovku, která zůstává na obrazovce po delší dobu. Nepředstavuje podtřídu, která je odvozena od třídy SplashScreen.

Důležitá rozhraní API

V této části se používají následující rozhraní API:

  • Třída SplashScreen
  • Událost Window.SizeChanged
  • Metoda Application.OnLaunched

Výchozí doporučení pro úvodní obrazovku

Ujistěte se, že vaše vylepšená úvodní obrazovka přesně napodobuje výchozí úvodní obrazovku. Chcete-li to provést, postupujte podle níže uvedených doporučení.

  • Stránka rozšířené úvodní obrazovky musí používat obrázek o velikosti 620 x 300 pixelů, který odpovídá obrázku určenému pro úvodní obrazovku v manifestu aplikace (obrázek úvodní obrazovky vaší aplikace). V Microsoft Visual Studio jsou nastavení úvodní obrazovky uložena pod Úvodní obrazovka karty Vizuální zdroje manifest aplikace (soubor Package.appxmanifest).
  • Vylepšená úvodní obrazovka musí používat barvu pozadí, která odpovídá barvě pozadí zadané pro úvodní obrazovku v manifestu aplikace (pozadí úvodní obrazovky vaší aplikace).
  • Chcete-li umístit rozšířený obrázek úvodní obrazovky vaší aplikace na stejné souřadnice obrazovky jako výchozí úvodní obrazovka, musíte v kódu použít třídu SplashScreen.
  • Kód by měl reagovat na události změny velikosti okna (například když je obrazovka otočena nebo když je vaše aplikace umístěna vedle jiné aplikace otevřené na obrazovce) změnou pozice prvků na rozšířené úvodní obrazovce pomocí třídy SplashScreen.

Chcete-li vytvořit vylepšenou úvodní obrazovku, která napodobuje výchozí úvodní obrazovku, použijte níže uvedený postup.

Přidání prvku Prázdná stránka do existující aplikace

Tento článek předpokládá, že chcete přidat rozšířenou úvodní obrazovku do existujícího projektu aplikace Universal Windows Platform (UWP) v C#, Visual Basic nebo C++.

  • Otevřete aplikaci v sadě Visual Studio.
  • Otevřít položku projekt na liště nabídek a klikněte Přidat nový prvek. Otevře se dialogové okno Přidání nového prvku.
  • V tomto dialogovém okně přidejte nový prázdná stránka do aplikace. V této části se rozšířená stránka úvodní obrazovky nazývá ExtendedSplash.

Při přidávání prvku prázdná stránka jsou vytvořeny dva soubory: jeden pro označení (ExtendedSplash.xaml) a druhý pro kód (ExtendedSplash.xaml.cs).

Základní kód XAML pro rozšířenou úvodní obrazovku

Chcete-li na rozšířenou úvodní obrazovku přidat obrázek a řízení průběhu, postupujte podle těchto kroků.

V souboru ExtendedSplash.xaml:

  • Změňte vlastnost Pozadí výchozího prvku Grid tak, aby odpovídala barvě pozadí nakonfigurované pro úvodní obrazovku vaší aplikace v jejím manifestu (pod Vizuální aktiva soubor Package.appxmanifest). Výchozí barva úvodní obrazovky je světle šedá (hexadecimální hodnota #464646). Vezměte prosím na vědomí, že tato položka Mřížka poskytováno ve výchozím nastavení při vytváření nového prázdná stránka. Není nutné používat Mřížka, je jednoduše pohodlným základem pro vytvoření pokročilé úvodní obrazovky.
  • Přidejte prvek Canvas do mřížky. Plátno slouží k umístění obrázku rozšířené úvodní obrazovky.
  • Přidejte na plátno prvek obrázku. Pro rozšířenou úvodní obrazovku použijte stejný obrázek 620 x 300 pixelů, který jste vybrali pro výchozí úvodní obrazovku.
  • (Volitelné) Přidejte ovládací prvek Průběh, který uživatelům ukazuje, že se vaše aplikace načítá. Tato sekce přidává prvek ProgressRing namísto definovaného nebo nedefinovaného prvku ProgressBar.
ČTĚTE VÍCE
Kolik by měl kefír stát?

Následující příklad ukazuje prvek mřížky s těmito doplňky a změnami.

V tomto příkladu je šířka ProgressRing nastavena na 20 pixelů. Šířku můžete ručně nastavit na hodnotu vhodnou pro vaši aplikaci, ale ovládací prvek se nevykreslí, pokud je šířka menší než 20 pixelů.

Základní kód pro rozšířenou třídu úvodní obrazovky

Rozšířená úvodní obrazovka by měla reagovat na jakékoli změny velikosti okna (pouze Windows) nebo orientace. Je třeba aktualizovat polohu obrázku, který používáte, aby rozšířená úvodní obrazovka vypadala dobře bez ohledu na změnu velikosti okna.

Tento postup použijte k určení, jak správně zobrazit rozšířenou úvodní obrazovku.

    Přidání požadovaných jmenných prostorů Chcete-li získat přístup ke třídě SplashScreen, struktuře Rect a událostem Window.SizeChanged, musíte přidat následující jmenné prostory do Soubor ExtendedSplash.xaml.cs.

using Windows.ApplicationModel.Activation; using Windows.Foundation; using Windows.UI.Core; 
partial class ExtendedSplash : Page < internal Rect splashImageRect; // Rect to store splash screen image coordinates. private SplashScreen splash; // Variable to hold the splash screen object. internal bool dismissed = false; // Variable to track splash screen dismissal status. internal Frame rootFrame; // Define methods and constructor >
public ExtendedSplash(SplashScreen splashscreen, bool loadState) < InitializeComponent(); // Listen for window resize events to reposition the extended splash screen image accordingly. // This ensures that the extended splash screen formats properly in response to window resizing. Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize); splash = splashscreen; if (splash != null) < // Register an event handler to be executed when the splash screen has been dismissed. splash.Dismissed += new TypedEventHandler(DismissedEventHandler); // Retrieve the window coordinates of the splash screen image. splashImageRect = splash.ImageLocation; PositionImage(); // If applicable, include a method for positioning a progress control. PositionRing(); >// Create a Frame to act as the navigation context rootFrame = new Frame(); > 
void PositionImage()
void PositionRing()
// Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view). void DismissedEventHandler(SplashScreen sender, object e) < dismissed = true; // Complete app setup operations here. >

Po dokončení nastavení aplikace přejděte z rozšířené úvodní obrazovky na jinou stránku. Následující kód definuje metodu DismissExtendedSplash pro navigaci na stránku MainPage definovanou v souboru MainPage.xaml aplikace.

async void DismissExtendedSplash() < await Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,() =>< rootFrame = new Frame(); rootFrame.Content = new MainPage(); Window.Current.Content = rootFrame; >); > 
void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e) < // Safely update the extended splash screen image coordinates. This function will be executed when a user resizes the window. if (splash != null) < // Update the coordinates of the splash screen image. splashImageRect = splash.ImageLocation; PositionImage(); // If applicable, include a method for positioning a progress control. // PositionRing(); >> 

Poznámka Než se pokusíte získat umístění obrázku, ujistěte se, že proměnná třídy ( splash ) obsahuje platný objekt SplashScreen, jak je znázorněno v příkladu.

void RestoreState(bool loadState) < if (loadState) < // code to load your app's state here >> 

Změňte obslužnou rutinu události aktivace spuštění

Když se aplikace spustí, systém předá informace o úvodní obrazovce obsluze události aktivace spuštění aplikace. Tyto informace můžete použít ke správnému umístění obrázku na stránce Advanced Splash Screen. Tyto informace na úvodní obrazovce lze získat z argumentů události aktivace, které jsou předány obsluze události OnLaunched aplikace (viz proměnná args v následujícím kódu).

ČTĚTE VÍCE
Jaké jsou dobré dámské hodinky?

Pokud jste ještě nepřepsali obslužnou rutinu OnLaunched pro vaši aplikaci, přečtěte si článek Životní cyklus aplikace, kde se dozvíte, jak zpracovat události aktivace.

Přidáním následujícího kódu do souboru App.xaml.cs vytvoříte a zobrazíte rozšířenou úvodní obrazovku.

protected override void OnLaunched(LaunchActivatedEventArgs args) < if (args.PreviousExecutionState != ApplicationExecutionState.Running) < bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated); ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState); Window.Current.Content = extendedSplash; >Window.Current.Activate(); > 

Celý kód

Níže uvedený kód se mírně liší od fragmentů kódu uvedených v předchozích krocích.

  • ExtendedSplash.xaml obsahuje tlačítko DismissSplash. Po kliknutí na toto tlačítko zavolá obsluha události DismissSplashButton_Click metodu DismissExtendedSplash. Ve své aplikaci zavolejte DismissExtendedSplash, když aplikace dokončí načítání prostředků nebo inicializaci uživatelského rozhraní.
  • Tato aplikace také používá šablonu aplikace UWP s navigací Frame. Výsledkem je, že v souboru App.xaml.cs obslužná rutina aktivace spuštění (OnLaunched) definuje element rootFrame a používá jej ke konfiguraci obsahu okna aplikace.

ExtendedSplash.xaml

Tento příklad obsahuje tlačítko DismissSplash, protože nemá žádné aplikační prostředky k načtení. Ve vaší aplikaci by se rozšířená úvodní obrazovka měla automaticky zavřít, když aplikace dokončí načítání prostředků nebo přípravu počátečního uživatelského rozhraní.

ExtendedSplash.xaml.cs

Všimněte si, že metoda DismissExtendedSplash je volána z obslužné rutiny události kliknutí pro tlačítko DismissSplash. V aplikaci nepotřebujete tlačítko DismissSplash. Místo toho zavolejte DismissExtendedSplash, když aplikace dokončí načítání prostředků a chcete přejít na její hlavní stránku.

using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; using Windows.ApplicationModel.Activation; using SplashScreenExample.Common; using Windows.UI.Core; // The Blank Page item template is documented at https://go.microsoft.com/fwlink/p/?LinkID=234238 namespace SplashScreenExample < /// /// An empty page that can be used on its own or navigated to within a Frame. /// partial class ExtendedSplash : Page < internal Rect splashImageRect; // Rect to store splash screen image coordinates. private SplashScreen splash; // Variable to hold the splash screen object. internal bool dismissed = false; // Variable to track splash screen dismissal status. internal Frame rootFrame; public ExtendedSplash(SplashScreen splashscreen, bool loadState) < InitializeComponent(); // Listen for window resize events to reposition the extended splash screen image accordingly. // This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc. Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize); splash = splashscreen; if (splash != null) < // Register an event handler to be executed when the splash screen has been dismissed. splash.Dismissed += new TypedEventHandler(DismissedEventHandler); // Retrieve the window coordinates of the splash screen image. splashImageRect = splash.ImageLocation; PositionImage(); // Optional: Add a progress ring to your splash screen to show users that content is loading PositionRing(); >// Create a Frame to act as the navigation context rootFrame = new Frame(); // Restore the saved session state if necessary RestoreState(loadState); > void RestoreState(bool loadState) < if (loadState) < // TODO: write code to load state >> // Position the extended splash screen image in the same location as the system splash screen image. void PositionImage() < extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X); extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y); extendedSplashImage.Height = splashImageRect.Height; extendedSplashImage.Width = splashImageRect.Width; >void PositionRing() < splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width*0.5) - (splashProgressRing.Width*0.5)); splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height*0.1)); >void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e) < // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc. if (splash != null) < // Update the coordinates of the splash screen image. splashImageRect = splash.ImageLocation; PositionImage(); PositionRing(); >> // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view). void DismissedEventHandler(SplashScreen sender, object e) < dismissed = true; // Complete app setup operations here. >void DismissExtendedSplash() < // Navigate to mainpage rootFrame.Navigate(typeof(MainPage)); // Place the frame in the current Window Window.Current.Content = rootFrame; >void DismissSplashButton_Click(object sender, RoutedEventArgs e) < DismissExtendedSplash(); >> > 

App.xaml.cs

Tento projekt byl vytvořen pomocí šablony projektu prázdná aplikace UWP (XAML) ve Visual Studiu. Obslužné rutiny událostí OnNavigationFailed i OnSuspending se vytvářejí automaticky a není třeba je měnit, aby bylo možné implementovat rozšířenou úvodní obrazovku. V této sekci se mění pouze OnLaunched.

ČTĚTE VÍCE
Jak se dělá japonská manikúra?

Pokud jste pro svou aplikaci nepoužili šablonu projektu, přečtěte si část „Krok 4: Úprava obslužné rutiny spuštění aktivace“, kde je uveden příklad upravené obslužné rutiny OnLaunched, která nepoužívá navigaci rámcem.

using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime; using Windows.ApplicationModel; using Windows.ApplicationModel.Activation; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; // The Blank Application template is documented at https://go.microsoft.com/fwlink/p/?LinkID=234227 namespace SplashScreenExample < /// /// Provides application-specific behavior to supplement the default Application class. /// sealed partial class App : Application < /// /// Initializes the singleton application object. This is the first line of authored code /// executed, and as such is the logical equivalent of main() or WinMain(). /// public App() < Microsoft.ApplicationInsights.WindowsAppInitializer.InitializeAsync( Microsoft.ApplicationInsights.WindowsCollectors.Metadata | Microsoft.ApplicationInsights.WindowsCollectors.Session); this.InitializeComponent(); this.Suspending += OnSuspending; >/// /// Invoked when the application is launched normally by the end user. Other entry points /// will be used such as when the application is launched to open a specific file. /// /// Details about the launch request and process. protected override void OnLaunched(LaunchActivatedEventArgs e) < #if DEBUG if (System.Diagnostics.Debugger.IsAttached) < this.DebugSettings.EnableFrameRateCounter = true; >#endif Frame rootFrame = Window.Current.Content as Frame; // Do not repeat app initialization when the Window already has content, // just ensure that the window is active if (rootFrame == null) < // Create a Frame to act as the navigation context and navigate to the first page rootFrame = new Frame(); // Set the default language rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0]; rootFrame.NavigationFailed += OnNavigationFailed; // Display an extended splash screen if app was not previously running. if (e.PreviousExecutionState != ApplicationExecutionState.Running) < bool loadState = (e.PreviousExecutionState == ApplicationExecutionState.Terminated); ExtendedSplash extendedSplash = new ExtendedSplash(e.SplashScreen, loadState); rootFrame.Content = extendedSplash; Window.Current.Content = rootFrame; >> if (rootFrame.Content == null) < // When the navigation stack isn't restored navigate to the first page, // configuring the new page by passing required information as a navigation // parameter rootFrame.Navigate(typeof(MainPage), e.Arguments); >// Ensure the current window is active Window.Current.Activate(); > /// /// Invoked when Navigation to a certain page fails /// /// The Frame which failed navigation /// Details about the navigation failure void OnNavigationFailed(object sender, NavigationFailedEventArgs e) < throw new Exception("Failed to load Page " + e.SourcePageType.FullName); >/// /// Invoked when application execution is being suspended. Application state is saved /// without knowing whether the application will be terminated or resumed with the contents /// of memory still intact. /// /// The source of the suspend request. /// Details about the suspend request. private void OnSuspending(object sender, SuspendingEventArgs e) < var deferral = e.SuspendingOperation.GetDeferral(); // TODO: Save applicaiton state and stop any background activity deferral.Complete(); >> > 

Související témata

Referenční materiály

  • Namespace Windows.ApplicationModel.Activation
  • Třída Windows.ApplicationModel.Activation.SplashScreen
  • Vlastnost Windows.ApplicationModel.Activation.SplashScreen.ImageLocation
  • Událost Windows.ApplicationModel.Core.CoreApplicationView.Activated
ČTĚTE VÍCE
Jak poznáte, že máte seboreu?

Ahoj všichni! Tým dev.family je v kontaktu. V tomto článku sdílíme krátký návod, jak nainstalovat Splash Screen do aplikace pro více platforem napsané v React Native s podporou více témat.

Úvodní obrazovka je první obrazovka, kterou uživatelé uvidí před načtením do hlavní aplikace. Tato obrazovka je možná nejlepší způsob, jak zajistit, aby byl název vaší aplikace a obecně její celý název zapamatovatelnější.

To ale není hlavní role úvodní obrazovky. Pod ním lze například skrýt příjem dat z API a načítání hlavní aplikace. To uděláme, když při načítání stejných dat ukážeme na obrazovce nakladač. To vám umožní zlepšit UX a okamžitě předvést hotovou aplikaci uživateli. A proto při prvním otevírání vyjměte extra nakladač.

V tomto krátkém průvodci se podíváme na instalaci úvodních obrazovek pro iOS a Android pomocí frameworku reaktivní-nativní pomocí knihovny reaktivní-nativní-splash-screen.

Přípravné práce

Nejprve musíte nainstalovat samotnou knihovnu do projektu:

příze přidat reakt-nativní-splash-screen

Poté ve složce ios musíte spustit příkaz k instalaci modulů:

cd ios && instalace pod && cd ..

(přejděte do adresáře ios, nainstalujte moduly a vraťte se zpět)

Dále jsou dvě možnosti konfigurace:

  1. Pro úvodní obrazovku použijte obrázek exportovaný například ze stejného Figma
  2. Ruční výroba této obrazovky je obtížnější a trvá déle

Podívejme se nejprve na samotnou obrazovku.

Řekněme, že jsme zvolili možnost při použití obrázku. Exportujeme ve vysokém rozlišení (v našem případě x3). Ale protože děláme vše pro dvě témata najednou, musíme exportovat obě kopie (pro světlou a tmavou). Dále přejděte na AppIcon a přetáhněte nejprve jeden obrázek, potom další.

Poté klikněte na Generovat, stáhněte aktiva a umístěte je do složky ssets u kořene projektu.

Nyní, když jsou obecné přípravy hotové, přejděme přímo k instalaci do mobilní aplikace. Začněme iOS.

Nastavení úvodní obrazovky iOS

Nejprve otevřete .xcworkspace našeho projektu. Zde vidíme prázdnou ikonu AppIcon (pokud jste nepřidali ikonu aplikace nebo jiné položky). Nyní vytvoříme soubor sady obrázků. Říkejme tomu třeba SplashScreen (ano, velmi originální, já vím 🙂

Po vytvoření vidíme v nastavení Vzhledy s vybranou možností Žádné. Klikněte na něj a vyberte Libovolné, Světlé, Tmavé. V Any and Light přetahujeme prostředky pro lehké téma iOS. In Dark – pro tmavé, resp. Dopadne to takto:

ČTĚTE VÍCE
Co je neformální dress code?

To je skoro vše.

Otevřít LaunchScreen.storyboard. Vyberte si Zobrazit scénu ovladače > Zobrazit ovladač > Zobrazit a smazat odtamtud vše. Po tomto vybereme Pohled, klikněte na ikonu trojúhelníku vpravo nahoře a zrušte zaškrtnutí Vodítka rozložení > Bezpečná oblast. Klikněte na plus a přidejte do našeho Zobrazit Zobrazení obrázku. Odstraňte všechna odsazení a zaškrtnutí Omezení okrajů.

V nastavení vpravo specifikujeme zdroj pro naši úvodní obrazovku. A vyberte Zobrazení obsahu, které nám nejvíce vyhovuje. V tomto případě Scale To Fill. Ale Aspect Fit je vhodný pro většinu.

Zde si můžete prohlédnout tmavý motiv a zkontrolovat, zda se obrázek správně změnil.

Vyřešili jsme snadnou část instalace na iOS.

Co se týče toho těžkého, všechno je mnohem zábavnější. Nemohu poskytnout hotové řešení. Budete muset exportovat všechny obrázky a barvy, které tvoří vaši úvodní obrazovku, sami a ručně upravit LaunchScreen.storyboard.

Ukážeme vám, jak na to:

Obecně, jak můžete vidět ze snímků obrazovky, je technika podobná, až na to, že není přidán jeden celý obrázek, ale složená obrazovka. Vše ale děláme podobným způsobem: přidáváme barvy, nastavujeme jim různé palety v závislosti na tématu a s obrázky se chováme jako ve výše uvedeném příkladu.

Největším problémem tohoto přístupu je škálování pro různé modely iPhone. To lze vyřešit různými odsazeními. Mohou být statické: používají se stejně na všech modelech. Konvenčně 30px vlevo – a bude tomu tak u všech modelů bez ohledu na to, zda je obrazovka menší nebo větší. Mohou také existovat dynamické odrážky, jako například v případě loga. Vše se konfiguruje v nastavení zobrazení (pro obrázek):

Stejně jako umístění pro obrazovky různých modelů. Pravděpodobně by bylo ještě správnější říci odsazení, které je zachováno:

Jedním slovem, pokud zvolíte tuto metodu, budete si s ní muset pohrát sami.

Posledním krokem je přejít do souboru AppDelegate.m a přidat následující:

[super aplikace:application didFinishLaunchingWithOptions:launchOptions]; [RNSplashScreen show]; // volání naší SplashScreen return YES;