ナビゲーション ドロワー コンポーネントを使用してスライドイン メニューを作成する

ナビゲーション ドロワー コンポーネントは、ユーザーがアプリのさまざまなセクションに移動できるようにするスライドイン メニューです。ユーザーは、横からスワイプするか、メニューアイコンをタップしてアクティブにできます。

ナビゲーション ドロワーを実装する際は、次の 3 つのユースケースを検討してください。

  • コンテンツの整理: ニュースアプリやブログアプリなど、ユーザーがさまざまなカテゴリを切り替えられるようにします。
  • アカウント管理: ユーザー アカウントを使用するアプリのアカウント設定セクションとプロフィール セクションへのクイックリンクを提供します。
  • 機能の検出: 複数の機能と設定を 1 つのメニューに整理して、複雑なアプリでユーザーが見つけやすく、アクセスしやすくします。

マテリアル デザインでは、ナビゲーション ドロワーには次の 2 種類があります。

  • 標準: 画面内のスペースを他のコンテンツと共有します。
  • モーダル: 画面内の他のコンテンツの上に表示されます。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

ナビゲーション ドロワーを実装する

ModalNavigationDrawer コンポーザブルを使用して、ナビゲーション ドロワーを実装できます。

要点

  • drawerContent スロットを使用して ModalDrawerSheet を指定し、ドロワーのコンテンツを指定します。

  • ModalNavigationDrawer は他にさまざまなドロワー パラメータを受け入れます。たとえば、次の例のように gesturesEnabled パラメータで、ドロワーがドラッグに応答するかどうかを切り替えることができます。

ナビゲーション ドロワーの動作を制御する

引き出しの開閉方法を制御するには、DrawerState を使用します。

要点

  • drawerState パラメータを使用して、DrawerStateModalNavigationDrawer に渡します。
  • DrawerState は、現在のドロワーの状態に関連するプロパティだけでなく、open 関数と close 関数へのアクセスを提供します。これらの suspend 関数は CoroutineScope を必要とし、これは rememberCoroutineScope を使用してインスタンス化できます。UI イベントに応じて停止関数を呼び出すこともできます。

結果

図 1. 標準のナビゲーション ドロワー(左)とモーダル ナビゲーション ドロワー(右)。

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

コンポーズ可能な関数を使用して、マテリアル デザインのデザイン システムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。

ご質問やフィードバックがある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。