「Composeの基本レイアウト」のメモ#10 ~ボトム ナビゲーション - マテリアルの実装~

11. ボトム ナビゲーション - マテリアル

ボトムバーの最小構成

@Composable
private fun SootheBottomNavigation(modifier: Modifier = Modifier) {
    NavigationBar(
        modifier = modifier
    ) {
        NavigationBarItem(
            selected = false,
            onClick = { /*TODO*/ },
            icon = { /*TODO*/ },
            label = { /*TODO*/ }
        )
        NavigationBarItem(
            selected = true,
            onClick = { /*TODO*/ },
            icon = { /*TODO*/ },
            label = { /*TODO*/ }) 
    }

ボトムバーの微調整

• selected: Boolean型で、このアイテムが現在選択されているかどうかを示します。例えば、現在表示している画面に対応するアイテムが選択されている場合にtrue を設定します
• onClick: ユーザーがアイテムをクリックしたときに実行されるコールバック関数です。ここに画面遷移やその他のアクションを設定します

iconパラメータ

• icon: アイコンを表示するためのコンテンツです。通常はアイコン画像を表示するためにIconコンポーザブルを使用します　

最小構成

• 大事なのはimageVectorだけ

icon = {
   Icon(
       imageVector = Icons.Default.~,
       contentDescription = null
   )
},

labelパラメータ

• label: アイテムのラベル（テキスト）を表示するためのコンテンツです。通常はTextコンポーザブルを使用します

最小構成

• Textコンポーザブル渡すだけ

label = {
   Text(
       text = stringResource(R.string.bottom_navigation_home)
   )
},