Slide 1

Slide 1 text

©2023 RAKUS Co., Ltd. M3 NavigationBar をマスターする Shibuya.apk #45 2023/11/10 @akkiee76

Slide 2

Slide 2 text

Akihiko Sato 株式会社ラクス / 楽楽精算 / モバイル開発チーム @akkiee76 自己紹介

Slide 3

Slide 3 text

M3 NavigationBar 概要 ● 画面下部に表示し、ナビゲーションを提供するコンポーネント ● M2 BottomNavigation が M3 NavigationBar に名称変更 ● NavigationBar の要素は NavigationBarItem ● 「Bottom Navigation Views Activity」 は M3 Compose 非対応 https://developer.android.com/jetpack/compose/designsystems/material2-material3?hl=ja#bottom-navigation NavigationBar BottomNavigation

Slide 4

Slide 4 text

Implementation 1. NavigationBar を設定する 2. NavigationBarItem を追加する 3. 画面切り替えを行う 4. Badge を付ける

Slide 5

Slide 5 text

Let's Implement 🛠

Slide 6

Slide 6 text

1. NavigationBar を設定する Scaffold( bottomBar = { NavigationBar { } } ) { Surface( modifier = Modifier .padding(bottom = it.calculateBottomPadding()) ) { }

Slide 7

Slide 7 text

2. NavigationBarItem を追加する enum class NavigationItem ( val label: String, @DrawableRes val resId: Int ) { HOME("Home", R.drawable.ic_home), EXPLORE("Explore", R.drawable.ic_fmd_good), MESSAGE("Message", R.drawable.ic_chat), STARRED("For You", R.drawable.ic_star); }

Slide 8

Slide 8 text

Scaffold( bottomBar = { NavigationBar { NavigationItem.entries.forEach { item -> NavigationBarItem( selected = false, onClick = {}, icon = { Icon( painter = painterResource(id = item.resId), contentDescription = null ) }, label = { Text(text = item.label) } ) } } } 2. NavigationBarItem を追加する

Slide 9

Slide 9 text

NavigationBarItem の注意点(M3 Guidelines) OK Don’t ● ユーザにとって遷移が明確であること ● NavigationBarItem は 3 ~ 5 であること ● Label を表示すること https://m3.material.io/components/navigation-bar/guidelines

Slide 10

Slide 10 text

build.gradle.kts dependencies { implementation("androidx.navigation:navigation-compose:2.7.4" ) } val navController = rememberNavController () Scaffold(bottomBar = { // NavigationBar } ) { Surface(modifier = Modifier.padding(bottom = it.calculateBottomPadding())) { NavHost(navController = navController , startDestination = NavigationItem .HOME.route) { composable(NavigationItem .HOME.route) { HomeScreen() } composable(NavigationItem .EXPLORE.route) { ExploreScreen () } composable(NavigationItem .MESSAGE.route) { MessageScreen () } composable(NavigationItem .STARRED.route) { FavoriteScreen () } } 3. Navigation を行う

Slide 11

Slide 11 text

val navBackStackEntry by navController.currentBackStackEntryAsState() val destination = navBackStackEntry?.destination NavigationBar { NavigationItem.entries.forEach { item -> val selected = destination?.hierarchy ?.any { it.route == item.route } == true NavigationBarItem( selected = selected, onClick = { navController.navigate(item.route) { launchSingleTop = true } }, icon = { }, label = { } ) } } 3. Navigation を行う https://developer.android.com/jetpack/compose/navigation?hl=ja#bottom-nav

Slide 12

Slide 12 text

NavigationBarItem( icon = { BadgedBox( badge = { Badge() } ) { Icon( painter = painterResource(id = item.resId), contentDescription = null ) } 4. Badge を付ける

Slide 13

Slide 13 text

@ExperimentalMaterial3Api @Composable fun Badge( modifier: Modifier = Modifier, containerColor: Color = BadgeDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), content: @Composable (RowScope.() -> Unit)? = null, ) BadgedBox( badge = { Badge { Text(text = "1") } }) { Icon( painter = painterResource(id = item.resId), contentDescription = null ) } 4. Badge を付ける(カスタマイズ)

Slide 14

Slide 14 text

Implementation completed 🛠

Slide 15

Slide 15 text

Material Design 3 Guidelines 👀

Slide 16

Slide 16 text

Item 設定の注意点 ● 選択時のアイコンは filled(塗りつぶし)を使用すること https://m3.material.io/components/navigation-bar/guidelines OK Caution ● Label は明確かつ十分なコントラストを設定すること OK Don’t Don’t

Slide 17

Slide 17 text

NavigationBarItem( selected = selected, onClick = onClick, icon = { val resId = if (selected) item.filledResId else item.outlinedResId Icon( painter = painterResource(id = resId), contentDescription = null ) }, label = { val fontWeight = if (selected) FontWeight.Bold else FontWeight.Normal Text( text = item.label, fontWeight = fontWeight ) } ) M3 Guidelines に準拠する

Slide 18

Slide 18 text

Implementation completed 🎉

Slide 19

Slide 19 text

まとめ ● NavigationBar は Item を content に指定するだけで 実装可能 ○ NavigationBarItem の Composable に詳細設定 ● M3 Guidelines のチェックも忘れずに

Slide 20

Slide 20 text

Thank you 🎉