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
250
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.4k
Google Play ポリシー対応周りの整理/改善をしてみた
hunachi
0
410
レビューダイアログ機能の取り組みAndroid編 / Review Dialog for Android
hunachi
0
1.7k
Git Hands On for my lab.
hunachi
0
120
Google I/O 2018’s Extensions🦔
hunachi
1
2.6k
ML Kitはいいぞ!
hunachi
0
870
Paging Library は便利だぞ!
hunachi
1
480
Androidについて.
hunachi
0
130
Other Decks in Technology
See All in Technology
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
140
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
430
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
180
MobileActOsaka_250704.pdf
akaitadaaki
0
110
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
160
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
230
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
310
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
100
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
14k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
190
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Bash Introduction
62gerente
614
210k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Site-Speed That Sticks
csswizardry
10
680
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Navigating Team Friction
lara
187
15k
Become a Pro
speakerdeck
PRO
28
5.4k
GitHub's CSS Performance
jonrohan
1031
460k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
A better future with KSS
kneath
239
17k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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移行が楽に。いい感じのアニメーションも!)