.NET MAUI Shell を使用してタブ ナビゲーションを実装する
- 10 分
タブ ナビゲーションは、タブ ストリップ (タッチできるコントロールの行) が画面の上部または下部に常に表示されるナビゲーション パターンです。 タブ ナビゲーションは、ユーザーが複数ページ アプリでページを選択するためのメカニズムを提供します。
このユニットでは、タブ ナビゲーションを実装するアプリを作成する方法について学習します。
タブ ナビゲーションとは
タブ ナビゲーションを使うアプリでは、各タブはアプリの特定のセクションまたはページを表します。 ユーザーは、タブ ストリップ内のタブを選択してアプリケーション内のコンテンツ間を移動します。 たとえば、次の図は iOS の時計アプリで使われているタブ ナビゲーションを示したものです。 ページの下部で強調表示されているアイコンを使うと、別のビューに切り替えることができます。 これらのアイコンはタブに対応し、ビューはタブ化されたページです。
タブ ストリップは常に表示されるので、ユーザーはタブ ナビゲーションを使ってアプリケーション内のコンテンツをすばやく切り替えることができます。 タブ ナビゲーションは、ユーザーがよく使う可能性があるセクションがアプリケーションに複数ある場合に最適です。 時計アプリケーションはその好例です。 時計、アラーム、ストップウォッチはよく使われる可能性が高いセクションです。
モバイル デバイスでは、タブ ストリップの領域は限られており、デバイスのサイズと向きに応じて一定数のタブしか表示できません。 使うタブは、3 から 4 個だけにすることをお勧めします。 含めるタブを増やすと、デバイスによっては、すべてのタブを表示できる十分な領域を確保できなくなります。 .NET MAUI でサポートされているオペレーティング システムは、オーバーフロー領域に対応しています。 この領域では、画面に収まらないタブにアクセスするための追加領域が提供されます。 しかし、このようなオーバーフロー タブに移動するには、ユーザーが追加の手順を行う必要があります。 このようなセクションは簡単に見つかりません。
4 つより多くのタブが必要な場合は、ポップアップ項目ナビゲーションなど、別のナビゲーション パターンを使うことを検討してください。 さらに、データの自然な形式がマスター詳細階層である場合は、タブ ナビゲーションは最適なオプションではありません。 このような場合は、スタック ナビゲーションを検討する必要があります。
.NET MAUI アプリでのタブ ナビゲーション
Shell .NET MAUI シェル アプリでタブ ナビゲーションを実装するには、TabBar オブジェクトを使います。
TabBar オブジェクトを使うと、タブのセットが表示され、ユーザーがタブを選ぶと表示されるコンテンツが自動的に切り替わります。次の図は、UI 領域を示したものです。
.NET MAUI Shell アプリケーションでタブを使うには、TabBar クラスの子として Shell クラスのインスタンスを作成します。 次に、Tab オブジェクトを TabBar に追加します。
Tab オブジェクト内では、ShellContent オブジェクトを ContentPage オブジェクトに設定する必要があります。
TabbedPage を作成する
TabBar のインスタンスは、Shell クラスの子として作成できます。 必要に応じて、Tab オブジェクトを TabBar に子として追加します。
Tab オブジェクト内では、ShellContent オブジェクトを ContentPage オブジェクトに設定する必要があります。
<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>
ポップアップ メニュー内のタブ
ポップアップ項目では、1 つ以上のタブを表示するタブ バーを含むページを開くことができます。
このデザインを実装するには、表示するタブごとに <ShellContent> 内で <FlyoutItem> 項目を追加します。
タブのタイトルとアイコンを制御するには、Title で Icon と <ShellContent> を設定します。
<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>