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
650
M3 NavigationBar をマスターする
akkiee76
November 05, 2023
Tweet
Share
More Decks by akkiee76
See All by akkiee76
Meet the Translation API
akkie76
0
150
コードレビューで開発を加速させるAIコードレビュー
akkie76
0
160
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
1.2k
コードレビューを支援するAI技術の応用
akkie76
5
590
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
7.1k
Jetpack Compose で Adaptive Layout に対応しよう
akkie76
0
320
Observationではじめる値監視
akkie76
3
3.3k
TextField 表示スタイル変更の 有効活用例 5 選
akkie76
0
420
rememberUpdatedState の使いどころを考える
akkie76
0
280
Other Decks in Technology
See All in Technology
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
How to Think Like a Performance Engineer
csswizardry
4
590
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
エンジニア向け会社紹介資料
caddi_eng
14
230k
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
280
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
170
Featured
See All Featured
Thoughts on Productivity
jonyablonski
64
4.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Optimizing for Happiness
mojombo
373
69k
Gamification - CAS2011
davidbonilla
78
4.9k
Designing for humans not robots
tammielis
247
25k
Practical Orchestrator
shlominoach
185
10k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Building Applications with DynamoDB
mza
89
5.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
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 🎉