Upgrade to Pro — share decks privately, control downloads, hide ads and more …

M3 NavigationBar をマスターする

akkie76
November 05, 2023

M3 NavigationBar をマスターする

akkie76

November 05, 2023
Tweet

More Decks by akkie76

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 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

    View full-size slide

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

    View full-size slide

  5. Let's Implement 🛠

    View full-size slide

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

    View full-size slide

  7. 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);
    }

    View full-size slide

  8. 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 を追加する

    View full-size slide

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

    View full-size slide

  10. 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 を行う

    View full-size slide

  11. 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

    View full-size slide

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

    View full-size slide

  13. @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 を付ける(カスタマイズ)

    View full-size slide

  14. Implementation completed 🛠

    View full-size slide

  15. Material Design 3
    Guidelines 👀

    View full-size slide

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

    View full-size slide

  17. 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 に準拠する

    View full-size slide

  18. Implementation completed 🎉

    View full-size slide

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

    View full-size slide

  20. Thank you 🎉

    View full-size slide