異なる画面やアプリ間のナビゲーションは、ユーザー エクスペリエンスの中核となる要素です。以下の原則は、さまざまなアプリを横断して一貫した直感的ユーザー エクスペリエンスを実現するためのベースラインを示すものです。Navigation コンポーネントは、以下の原則をデフォルトで実装するように設計されており、これにより、ユーザーはアプリ間を移動する際に、同じヒューリスティックとパターンを適用してナビゲーションを行うことができます。
固定的な開始デスティネーションを設定する
アプリを作成する際は必ず、固定的な開始デスティネーションを設定します。開始デスティネーションは、ユーザーがランチャーからアプリを起動したときに最初に表示される画面です。このデスティネーションは、ユーザーが [戻る] ボタンを押してランチャーに戻るときに表示される最後の画面でもあります。Sunflower アプリを例に見てみましょう。
図 1. リスト画面は、Sunflower アプリの開始デスティネーションです。
ランチャーから Sunflower アプリを起動すると、ユーザーに表示される最初の画面はリスト画面です。この画面には、ユーザーの庭の植物のリストが表示されます。この画面は、アプリを終了する前に表示される最後の画面でもあります。ユーザーは、リスト画面で [戻る] ボタンを押すと、ランチャーに戻ります。
ナビゲーション状態はデスティネーションのスタックとして表現される
アプリを初めて起動した場合、ユーザーを対象とする新しいタスクが作成され、アプリの開始デスティネーションが表示されます。これが、「バックスタック」と呼ばれる基本デスティネーションになり、アプリのナビゲーション状態のベースとなります。スタックの一番上には「現在の画面」が配置されます。スタック内の以前のデスティネーションは、ユーザーが訪れた場所の履歴を示します。バックスタックの一番下には常に、アプリの開始デスティネーションが配置されます。
バックスタックを変更する処理は常にスタックの最上部で行われ、新しいデスティネーションをスタックの最上部にプッシュするか、スタックの最上部にあるデスティネーションをポップするかのいずれかになります。デスティネーションへのナビゲーションは、そのデスティネーションをスタックの最上部にプッシュすることを意味します。
Navigation コンポーネントがすべてのバックスタックの順序を管理しますが、バックスタックをご自分で管理することもできます。
[上へ] と [戻る] はアプリのタスク内では同じ機能を持つ
図 2. [上へ] ボタンと [戻る] ボタン
[戻る] ボタンは、画面の下部にあるシステム ナビゲーション バーに表示されます。このボタンを使用すると、ユーザーが最近操作した画面の履歴を逆時系列順に移動できます。ユーザーが [戻る] ボタンを押すと、現在のデスティネーションがバックスタックの最上部からポップされ、ユーザーは 1 つ前のデスティネーションに移動します。
[上へ] ボタンは、画面の上部にあるアプリバーに表示されます。アプリのタスク内で、[上へ] ボタンと [戻る] ボタンは同じように機能します。
[上へ] ボタンがアプリを終了することはない
ユーザーがアプリの開始デスティネーションにいる場合、[上へ] ボタンは表示されません。[上へ] ボタンはアプリを終了しません。他方、[戻る] ボタンは表示され、[戻る] ボタンを押すと、アプリは終了します。
別のアプリのタスク上にあるディープリンクを使用して対象アプリを起動した場合、[上へ] を押すと、ディープリンクをトリガーしたアプリではなく、合成バックスタックを通じて対象アプリのタスクに移動します。他方、[戻る] ボタンを押すと、別アプリの方に戻ります。
ディープリンクの場合は手動ナビゲーションをシミュレーションする
特定のデスティネーションに対してディープリンク経由で移動した場合、または手動ナビゲーション経由で移動した場合のいずれであっても、[上へ] ボタンを使用することで、デスティネーション間を移動して最終的に開始デスティネーションに戻ることができます。
アプリのタスク内でデスティネーションにディープリンクすると、そのアプリのタスク用の既存のバックスタックはすべて削除され、ディープリンク後のバックスタックに置き換えられます。
再び Sunflower アプリを例として使用します。ユーザーが以前にランチャー画面からアプリを起動して、リンゴの詳細情報画面に移動してきたとします。[Recents] 画面を見ると、一番上の画面が [Apple] の詳細情報画面となっている状態のタスクが存在していることがわかります。
図 3. Sunflower アプリに対するユーザー ナビゲーションとその結果生じたバックスタック
この段階で、ユーザーはホームボタンをタップしてアプリをバックグラウンドに移行できます。ここで、このアプリにディープリンク機能があり、名前を入力すると、その植物の詳細情報画面が直接起動できるとします。このディープリンク経由でアプリを開くと、図 3 に示す現在の Sunflower バックスタックは、図 4 に示す新しいバックスタックに完全に置き換えられます。
図 4. ディープリンクをたどることは、Sunflower アプリの既存のバックスタックに代わるものです。
Sunflower バックスタックは、最上部にアボカドの詳細情報画面が配置された「合成バックスタック」に置き換えられています。開始デスティネーションである [My Garden] 画面もバックスタックに追加されています。元の Sunflower バックスタックは消去されており、ユーザーが以前に [Apple] の詳細情報画面を表示していたという情報も消去されています。合成バックスタックは現実の操作をシミュレーションしたものであるため、この点は重要です。アプリ内を実際に移動した場合に実現するバックスタックと一致する必要があります。
このニーズを満たすために、作成される合成バックスタックは、NavGraph に基づいて簡略化された合成バックスタックです。ネストされていないシンプルな NavGraph の場合は、開始デスティネーションとディープリンク デスティネーションで構成されます。より複雑なネストされたナビゲーション グラフの場合、合成バックスタックには、ディープリンク デスティネーションの祖先であるネストされたグラフの開始デスティネーションも含まれます。
Navigation コンポーネントは、ディープリンクをサポートしており、ナビゲーション グラフ内の任意のデスティネーションにリンクしたときに、現実的なバックスタックを自動的に再作成します。