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
510
M3 NavigationBar をマスターする
akkiee76
November 05, 2023
Tweet
Share
More Decks by akkiee76
See All by akkiee76
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
240
コードレビューを支援するAI技術の応用
akkie76
5
480
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
6.5k
Jetpack Compose で Adaptive Layout に対応しよう
akkie76
0
140
Observationではじめる値監視
akkie76
3
2k
TextField 表示スタイル変更の 有効活用例 5 選
akkie76
0
320
rememberUpdatedState の使いどころを考える
akkie76
0
210
アーキテクチャを明文化して臨んだ新規アプリ開発戦略
akkie76
0
140
プライバシー強化の最前線 ~2024年春以降の展望と対策~
akkie76
0
160
Other Decks in Technology
See All in Technology
Domain-driven Design: A Complete Example
ewolff
2
270
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
440
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
240
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
400
20240516 OpenID TechNight Vol.21 「OIDFシェアードシグナルフレームワーク(ID2)を利用してリアルタイムでセキュリティシグナルを共有するための最新情報」
oidfj
0
170
Laboratories in Science and Technology: Deep Neural Networks
keio_smilab
PRO
3
180
20240509 CloudWatch でいろいろなものを監視してみよう
masaruogura
1
120
【SORACOM UG 四国】今だからこそ学ぶ!IoTの全体像と最新事例、生成AIの基礎
soracom
PRO
2
190
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
230
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
10
1.8k
TiDBにおけるテーブル設計と最適化の事例
cygames
0
810
使われないものを作るな!出口から作るデータ分析基盤 / Data Platform Development Starting from the User Needs
amaotone
16
4.8k
Featured
See All Featured
Building Applications with DynamoDB
mza
88
5.7k
Gamification - CAS2011
davidbonilla
77
4.6k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Designing the Hi-DPI Web
ddemaree
276
33k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Into the Great Unknown - MozCon
thekraken
15
1.1k
The Invisible Customer
myddelton
114
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Raft: Consensus for Rubyists
vanstee
133
6.3k
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 🎉