Implementace navigace na kartách pomocí prostředí .NET MAUI
- 10 min
Navigace na kartách je navigační vzor, ve kterém se v horní nebo dolní části obrazovky trvale zobrazuje pruh karet (řádek dotykových ovládacích prvků). Navigace pomocí karet poskytuje uživateli mechanismus výběru mezi stránkami v aplikaci s více stránkami.
V této lekci se dozvíte, jak vytvořit aplikaci, která implementuje navigaci na kartách.
Co je navigace na kartách?
V aplikaci, která používá navigaci pomocí tabulátoru, představuje každá karta konkrétní oddíl nebo stránku aplikace. Uživatelé vyberou karty v pruhu karet a přesunou se mezi obsahem v aplikaci. Například následující obrázek znázorňuje použití navigace na kartách v aplikaci Hodiny v iOSu. Ikony zvýrazněné v základu stránky umožňují přepínat mezi různými zobrazeními. Tyto ikony odpovídají kartám a zobrazení jsou stránky s kartami:
Vzhledem k tomu, že pruh karet je vždy viditelný, umožňuje navigace na kartách uživatelům rychle přepínat mezi obsahem v aplikaci. Navigace pomocí karet je ideální v případě, že aplikace má několik oddílů, které bude uživatel pravděpodobně často používat. Příkladem jsou aplikace clock. Oddíly hodin, budíků a stopek se pravděpodobně často používají.
Na mobilních zařízeních má pás karet obvykle omezený prostor a může v závislosti na velikosti a orientaci zařízení zobrazit pouze pevný počet karet. Doporučení je použít pouze tři až čtyři karty. Pokud zahrnete více karet, není zaručeno, že máte dostatek místa k zobrazení všech karet na všech zařízeních. Operační systémy podporované rozhraním .NET MAUI umožňují přetečení oblasti. Tato oblast poskytuje více oblastí pro přístup k kartám, které se nevejdou na obrazovku. Přechod na tyto karty přetečení ale vyžaduje další kroky uživatele. Tyto oddíly jsou méně zjistitelné.
Pokud potřebujete více než čtyři karty, zvažte použití jiného navigačního vzoru, například navigace v informačním rámečku. Navigace na kartách navíc není nejlepší volbou, pokud vaše data tvoří přirozenou hierarchii hlavních podrobností. V těchto případech byste měli zvážit navigaci zásobníku.
Navigace pomocí karet v aplikaci .NET MAUI
Objekt slouží TabBar k implementaci navigace pomocí tabulátoru v aplikaci prostředí .NET MAUI. Objekt TabBar zobrazí sadu karet a automaticky přepne zobrazený obsah, když uživatel vybere kartu. Následující obrázek znázorňuje oblasti uživatelského rozhraní.
Pokud chcete použít karty v aplikaci .NET MAUI Shell, vytvořte instanci TabBar třídy jako podřízenou Shell třídu. Pak přidejte Tab objekty do objektu TabBar. V rámci objektu TabShellContent by měl být objekt nastaven na ContentPage objekt.
Vytvoření stránky TabbedPage
Instanci můžete vytvořit TabBar jako podřízenou třídu Shell . Podle potřeby přidejte TabTabBar objekty jako podřízené položky. V rámci objektu TabShellContent by měl být objekt nastaven na ContentPage objekt.
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Xaminals.Views"
x:Class="Xaminals.AppShell">
<TabBar>
<Tab Title="Moon Phase"
Icon="moon.png">
<ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
</Tab>
<Tab Title="Sunrise"
Icon="sun.png">
<ShellContent ContentTemplate="{DataTemplate local:SunrisePage}" />
</Tab>
</TabBar>
</Shell>
Karty v kontextové nabídce
Kontextová položka může otevřít stránku s panelem karet, který zobrazuje jednu nebo více karet.
Pokud chcete tento návrh implementovat, přidejte <ShellContent> položku na <FlyoutItem> každou kartu, kterou chcete zobrazit.
Nastavte a Title nastavte Icon ovládací prvek <ShellContent> názvu a ikony karty.
<FlyoutItem Title="Astronomy" Icon="moon.png">
<ShellContent Title="Moon Phase" Icon="moon.png"
ContentTemplate="{DataTemplate local:MoonPhasePage}"/>
<ShellContent Title="Sunrise" Icon="sun.png"
ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>
<FlyoutItem Title="About" Icon="question.png">
<ShellContent
ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>