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
300
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.6k
Google Play ポリシー対応周りの整理/改善をしてみた
hunachi
0
410
レビューダイアログ機能の取り組みAndroid編 / Review Dialog for Android
hunachi
0
1.8k
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
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
oracle4engineer
PRO
1
260
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
210
なごミュ@SPAJAM2025 第二回予選
1901drama
0
120
Backboneとしてのtimm2025
yu4u
3
1.2k
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
220
生成AIによるデータサイエンスの変革
taka_aki
0
3.1k
EKS Pod Identity における推移的な session tags
z63d
1
190
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
370
OCI Bastionサービス
oracle4engineer
PRO
1
100
夢の印税生活 / Life on Royalties
tmtms
0
270
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
2
590
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
480
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cult of Friendly URLs
andyhume
79
6.5k
Building Adaptive Systems
keathley
43
2.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
BBQ
matthewcrist
89
9.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Done Done
chrislema
185
16k
Practical Orchestrator
shlominoach
190
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
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移行が楽に。いい感じのアニメーションも!)