ナビゲーション ドロワー コンポーネントは、ユーザーがアプリのさまざまなセクションに移動できるようにするスライドイン メニューです。ユーザーは、側面からスワイプするか、メニュー アイコンをタップします。
ナビゲーション ドロワーの実装について、次の 3 つのユースケースを考えてみましょう。
- コンテンツの整理: ユーザーがニュースアプリやブログアプリなど、さまざまなカテゴリを切り替えられるようにします。
- アカウント管理: ユーザー アカウントを持つアプリでは、アカウント設定とプロフィール セクションへのクイックリンクを提供します。
- 機能の紹介: 複数の機能と設定を 1 つのメニューにまとめて、複雑なアプリでユーザーが見つけやすく、アクセスしやすくします。
マテリアル デザインには、次の 2 種類のナビゲーション ドロワーがあります。
- 標準: 画面上のスペースを他のコンテンツと共有します。
- モーダル: 画面内の他のコンテンツの上に重ねて表示されます。
例
ModalNavigationDrawer コンポーザブルを使用してナビゲーション ドロワーを実装できます。
次の例のように、drawerContent スロットを使用して ModalDrawerSheet とドロワーのコンテンツを提供します。
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
Text("Drawer title", modifier = Modifier.padding(16.dp))
Divider()
NavigationDrawerItem(
label = { Text(text = "Drawer Item") },
selected = false,
onClick = { /*TODO*/ }
)
// ...other drawer items
}
}
) {
// Screen content
}
ModalNavigationDrawer は他にさまざまなドロワー パラメータを受け入れます。たとえば、次の例のように gesturesEnabled パラメータで、ドロワーがドラッグに応答するかどうかを切り替えることができます。
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
// Drawer contents
}
},
gesturesEnabled = false
) {
// Screen content
}
コントロールの動作
ドロワーの開閉方法を制御するには、DrawerState を使用します。drawerState パラメータを使用して DrawerState を ModalNavigationDrawer に渡す必要があります。
DrawerState は、open 関数と close 関数に加え、現在のドロワーの状態に関連するプロパティへのアクセスを提供します。これらの suspend 関数には CoroutineScope が必要です。これは、rememberCoroutineScope を使用してインスタンス化できます。また、UI イベントに応じて suspend 関数を呼び出すこともできます。
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
ModalDrawerSheet { /* Drawer content */ }
},
) {
Scaffold(
floatingActionButton = {
ExtendedFloatingActionButton(
text = { Text("Show drawer") },
icon = { Icon(Icons.Filled.Add, contentDescription = "") },
onClick = {
scope.launch {
drawerState.apply {
if (isClosed) open() else close()
}
}
}
)
}
) { contentPadding ->
// Screen content
}
}