Material 3 Expressive の実装例の紹介シリーズです。
今回は Navigation bar を紹介します。
(androidx.compose.material3:material3:1.4.0-alpha15 時点での内容になります。)
Material 3 Expressive での変更点
- Material 3 の Navigation bar よりも高さが短く変更
- Medium の Window size で使用可能な Horizontal なアイテム表示の追加
- 選択中のアイテムのラベルの色が On surface variant から Secondary に変更
実装
ShortNavigationBar
これまでの NavigationBar 相当の ShortNavigationBar が用意されています。
こちらを使うことで Material 3 Expressive で変更された高さが短い Navigation bar が適用されます。
ShortNavigationBar {
items.forEachIndexed { index, item ->
ShortNavigationBarItem(
icon = {
Icon(
painter = painterResource(item.icon),
contentDescription = null
)
},
label = { Text(item.label) },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
}
Horizontal navigation items
ShortNavigationBar の Arrangement を中央に変更しつつ、ShortNavigationBarItem の iconPosition を NavigationItemIconPosition.Start に変更することで Horizontal な表示にすることができます。
ShortNavigationBar(
arrangement = ShortNavigationBarArrangement.Centered
) {
items.forEachIndexed { index, item ->
ShortNavigationBarItem(
iconPosition = NavigationItemIconPosition.Start,
icon = {
Icon(
painter = painterResource(
if (selectedItem == index) selectedIcons[index] else unselectedIcons[index]
),
contentDescription = null
)
},
label = { Text(item) },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
}
