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
260
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
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
OPENLOGI Company Profile
hr01
0
67k
Operating Operator
shhnjk
1
590
怖くない!はじめてのClaude Code
shinya337
0
400
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
100
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Faster Mobile Websites
deanohume
307
31k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Music & Morning Musume
bryan
46
6.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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移行が楽に。いい感じのアニメーションも!)