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
310
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.7k
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
140
Other Decks in Technology
See All in Technology
フィンテック養成勉強会#56
finengine
0
110
Grafana Meetup Japan Vol. 6
kaedemalu
1
200
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
1.2k
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
進捗
ydah
2
230
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
660
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
fujiyamaorange
0
530
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
490
研究開発と製品開発、両利きのロボティクス
youtalk
1
360
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.4k
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
7
2.2k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Writing Fast Ruby
sferik
628
62k
Building an army of robots
kneath
306
46k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Statistics for Hackers
jakevdp
799
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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移行が楽に。いい感じのアニメーションも!)