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
TopAppBar Composableをカスタムする
Search
Hunachi
April 04, 2025
Technology
0
210
TopAppBar Composableをカスタムする
Material3対応のTopAppBar Composableを使いたいけど、デフォルトのUIからカスタムしたい!そんな方向けのスライドです。
Hunachi
April 04, 2025
Tweet
Share
More Decks by Hunachi
See All by Hunachi
PDF Viewer作成の今までとこれから
hunachi
0
3.1k
Google Play ポリシー対応周りの整理/改善をしてみた
hunachi
0
400
レビューダイアログ機能の取り組みAndroid編 / Review Dialog for Android
hunachi
0
1.6k
Git Hands On for my lab.
hunachi
0
110
Google I/O 2018’s Extensions🦔
hunachi
1
2.6k
ML Kitはいいぞ!
hunachi
0
870
Paging Library は便利だぞ!
hunachi
1
470
Androidについて.
hunachi
0
130
Other Decks in Technology
See All in Technology
GitHub ActionsをTypeScriptで作ろう!
sansantech
PRO
2
180
AWS LambdaをTypeScriptで動かして分かった、Node.jsのTypeScriptサポートの利点と課題
smt7174
1
1.8k
newmo の創業を支える Software Architecture と Platform Engineering
110y
5
790
KubeCon + CloudNativeCon Europe 2025 Recap: The GPUs on the Bus Go 'Round and 'Round / Kubernetes Meetup Tokyo #70
pfn
PRO
0
180
Web Streams APIの基本と実践、TypeScriptでの活用法 / TSKaigi 2025 Web Streams API
tasshi
4
530
激動の一年を通じて見えてきた「技術でリードする」ということ
ktr_0731
8
8.6k
初参加のハノーバーメッセで感じた世界最大級イベントの熱気とAI活用の未来
hamadakoji
0
120
OCI Full Stack Disaster Recovery サービス概要
oracle4engineer
PRO
1
140
勘違いから始まったProxmox on ProxmoxでGPUパススルー【JPmoxs勉強会#7】/JPmoxs7_GPU_Passthrough_on_Proxmox_on_Proxmox-A_Journey_That_Started_with_a_Misunderstanding
tsukimi_site
1
130
DataEngineeringとCloudNativeの今と未来
foursue
0
250
GrafanaをClaude DesktopからMCPで触ってみた
hamadakoji
0
1.3k
ワールドカフェ再び、そしてロール・ツール群の開発 / World Café Again, and the Development of a Suite of Roles and Tools
ks91
PRO
0
110
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
440
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
The Language of Interfaces
destraynor
158
25k
Optimizing for Happiness
mojombo
378
70k
How to Ace a Technical Interview
jacobian
276
23k
Writing Fast Ruby
sferik
628
61k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
180
53k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Transcript
2025/04/04 shibuya.apk #52 TopAppBar Composable をカスタムする @_hunachi 1
Hunachi/ふなち 2024/09~ 株式会社タイミー Androidエンジニア ~2024/08 株式会社ヤプリ Androidエンジニア 2 二輪の免許を取った 🏍
目次 • TopAppBar Composable • 自分好みにしたい① • 自分好みにしたい② • 自分好みにしたい③
• 自分好みにしたい④ 3
(Material3)TopAppBar Composable 4 https://developer.android.com/develop/ui/compose/components/app-bars
TopAppBar Composable(Material3) 5 https://developer.android.com/develop/ui/compose/components/app-bars
自分好みにしたい① 6 文字を大きくしたら表示が崩れちゃう!
自分好みにしたい① 7 文字を大きくしたら表示が崩れちゃう! title = { Text(**.,overflow = TextOverflow.Ellipsis) }
自分好みにしたい② 8 Expanded状態とCollapsed状態の文字Styleを指定したい!
自分好みにしたい② 9 Expanded状態とCollapsed状態の文字Styleを指定したい! val customTypography = androidx.compose.material3.Typography( titleLarge = LocalAppTypography.current.largeRead,
headlineSmall = LocalAppTypography.current.exLargeTitle, ) MaterialTheme( typography = customTypography, ) { MediumTopAppBar(**.) } TopAppBarSmallTokens TopAppBarMediumTokensを参照
Expanded状態とCollapsed状態の文字Styleを指定したい! 自分好みにしたい② 10
Expanded状態で2行以上表示したい! 自分好みにしたい③ 11
自分好みにしたい③ 12 Expanded状態で2行以上表示したい! BoxWithConstraintsスコープ内でtextMeasurer.measureを 使いテキストのサイズを計算✍ 計算時にpaddingを考慮してあげるのも忘れない 計算結果はTextLayoutResult型で取得 textLayoutResult.size.heightがテキストの高さ この高さをMediumTopAppBarのexpandedHeightに代入
BoxWithConstraints { val textMeasurer = rememberTextMeasurer() val textLayoutResult: TextLayoutResult =
remember(title) { textMeasurer.measure( title, headerTitleStyle, */ parent layout's width - Padding constraints = constraints.copy(maxWidth = constraints.maxWidth - topAppBarTitleMarginPx), ) } val expandedHeight = with(LocalDensity.current) { */ タイトルの高さ + titleにつけるpadding と Appbarの高さ で大きい方を使う。 maxOf(textLayoutResult.size.height.toDp() + titlePadding, TopAppBarDefaults.MediumAppBarExpandedHeight) } MediumTopAppBar( title = { Text(**.) }, expandedHeight = expandedHeight, ) } 自分好みにしたい③ 13
自分好みにしたい③ 14 Expanded状態で2行以上表示したい!
自分好みにしたい④ 15 Marginに違和感がある!
自分好みにしたい④ 16 Marginに違和感がある! */ AppBar.kt内のコード private val TopAppBarHorizontalPadding = 4.dp
*/ A title inset when the App-Bar is a Medium or Large one. Also used to size a spacer when the */ navigation icon is missing. private val TopAppBarTitleInset = 16.dp - TopAppBarHorizontalPadding
val TopAppBarTitlePadding = 16.dp val appBarState = rememberTopAppBarState() val scrollBehavior
= enterAlwaysScrollBehavior(state = appBarState) */ 0.5はAppbarのアニメーションコードを参考に決め打ちしたもの。何の値でも少し描画がカタつくタイミングが出てく る。 val isExpanded by remember { derivedStateOf { scrollBehavior.state.collapsedFraction *= 0.5 } } MediumTopAppBar( title = { Text( modifier = Modifier.padding( end = if (isExpanded) { TopAppBarTitlePadding } else { if (**左右のアクションがない */) TopAppBarTitlePadding else 0.dp }, ), ) }, scrollBehavior = scrollBehavior, ) 自分好みにしたい④ 17
自分好みにしたい④ 18 Marginに違和感がある!
まとめ 19 ここまでカスタムすべきか ここまでやるなら1からTopAppBarを作るべきか はアプリによると思いますが… やろうと思えば少しの変更で色々できる! TopAppBarをそのまま使うメリットも多い(Edge to Edge移行が楽に。いい感じのアニメーションも!)