Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
M3 NavigationBar をマスターする
Search
akkiee76
November 05, 2023
Technology
0
880
M3 NavigationBar をマスターする
akkiee76
November 05, 2023
Tweet
Share
More Decks by akkiee76
See All by akkiee76
Meet the Translation API
akkie76
0
300
コードレビューで開発を加速させるAIコードレビュー
akkie76
1
490
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
4.2k
コードレビューを支援するAI技術の応用
akkie76
5
840
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
8.2k
Jetpack Compose で Adaptive Layout に対応しよう
akkie76
0
650
Observationではじめる値監視
akkie76
4
4.5k
TextField 表示スタイル変更の 有効活用例 5 選
akkie76
0
620
rememberUpdatedState の使いどころを考える
akkie76
0
470
Other Decks in Technology
See All in Technology
地方企業がクラウドを活用するヒント
miu_crescent
PRO
1
120
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
4
3.5k
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
120
private spaceについてあれこれ調べてみた
operando
1
220
Women in Agile
kawaguti
PRO
3
190
[2025クラウドガバナンスはこう変わる!マルチアカウント運用のre:Invent最新情報と活用例] re:Invent 2024 から見る AWS マルチアカウントガバナンスのこれまでとこれから
0nihajim
0
110
Fin-JAWS第38回reInvent2024_全金融系セッションをライトにまとめてみた
mhrtech
1
160
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
サーバーレスで楽しよう!お気軽に始められる3つのポイント / Have fun with Serverless!
_kensh
3
280
アンチパターンのアーキテクチャと組織 / Anti-Pattern Software Architecture and Organization
oztick139
0
150
Grid表示のレイアウトで Flow layoutsを使う
cffyoha
1
160
CloudWatch Container Insightsを使ったAmazon ECSのリソース監視
umekou
1
140
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Agile that works and the tools we love
rasmusluckow
328
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
A better future with KSS
kneath
238
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
910
We Have a Design System, Now What?
morganepeng
51
7.4k
A Tale of Four Properties
chriscoyier
158
23k
Transcript
©2023 RAKUS Co., Ltd. M3 NavigationBar をマスターする Shibuya.apk #45 2023/11/10
@akkiee76
Akihiko Sato 株式会社ラクス / 楽楽精算 / モバイル開発チーム @akkiee76 自己紹介
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
Implementation 1. NavigationBar を設定する 2. NavigationBarItem を追加する 3. 画面切り替えを行う 4.
Badge を付ける
Let's Implement 🛠
1. NavigationBar を設定する Scaffold( bottomBar = { NavigationBar { }
} ) { Surface( modifier = Modifier .padding(bottom = it.calculateBottomPadding()) ) { }
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); }
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 を追加する
NavigationBarItem の注意点(M3 Guidelines) OK Don’t • ユーザにとって遷移が明確であること • NavigationBarItem は
3 ~ 5 であること • Label を表示すること https://m3.material.io/components/navigation-bar/guidelines
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 を行う
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
NavigationBarItem( icon = { BadgedBox( badge = { Badge() }
) { Icon( painter = painterResource(id = item.resId), contentDescription = null ) } 4. Badge を付ける
@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 を付ける(カスタマイズ)
Implementation completed 🛠
Material Design 3 Guidelines 👀
Item 設定の注意点 • 選択時のアイコンは filled(塗りつぶし)を使用すること https://m3.material.io/components/navigation-bar/guidelines OK Caution • Label
は明確かつ十分なコントラストを設定すること OK Don’t Don’t
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 に準拠する
Implementation completed 🎉
まとめ • NavigationBar は Item を content に指定するだけで 実装可能 ◦
NavigationBarItem の Composable に詳細設定 • M3 Guidelines のチェックも忘れずに
Thank you 🎉