TopAppBar Composableをカスタムする

Material3対応のTopAppBar Composableを使いたいけど、デフォルトのUIからカスタムしたい！そんな方向けのスライドです。

Transcript

1. 2025/04/04 shibuya.apk #52 TopAppBar Composable をカスタムする @_hunachi 1
2. Hunachi/ふなち 2024/09~ 株式会社タイミー Androidエンジニア ~2024/08 株式会社ヤプリ Androidエンジニア 2 二輪の免許を取った 🏍
3. 目次 • TopAppBar Composable • 自分好みにしたい① • 自分好みにしたい② • 自分好みにしたい③ • 自分好みにしたい④ 3
4. （Material3）TopAppBar Composable 4 https://developer.android.com/develop/ui/compose/components/app-bars
5. TopAppBar Composable（Material3） 5 https://developer.android.com/develop/ui/compose/components/app-bars
6. 自分好みにしたい① 6 文字を大きくしたら表示が崩れちゃう！
7. 自分好みにしたい① 7 文字を大きくしたら表示が崩れちゃう！ title = { Text(**.,overflow = TextOverflow.Ellipsis) }
8. 自分好みにしたい② 8 Expanded状態とCollapsed状態の文字Styleを指定したい！
9. 自分好みにしたい② 9 Expanded状態とCollapsed状態の文字Styleを指定したい！ val customTypography = androidx.compose.material3.Typography( titleLarge = LocalAppTypography.current.largeRead, headlineSmall = LocalAppTypography.current.exLargeTitle, ) MaterialTheme( typography = customTypography, ) { MediumTopAppBar(**.) } TopAppBarSmallTokens TopAppBarMediumTokensを参照
10. Expanded状態とCollapsed状態の文字Styleを指定したい！ 自分好みにしたい② 10
11. Expanded状態で2行以上表示したい！ 自分好みにしたい③ 11
12. 自分好みにしたい③ 12 Expanded状態で2行以上表示したい！ BoxWithConstraintsスコープ内でtextMeasurer.measureを 使いテキストのサイズを計算✍ 計算時にpaddingを考慮してあげるのも忘れない 計算結果はTextLayoutResult型で取得 textLayoutResult.size.heightがテキストの高さ この高さをMediumTopAppBarのexpandedHeightに代入
13. 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. 自分好みにしたい③ 14 Expanded状態で2行以上表示したい！
15. 自分好みにしたい④ 15 Marginに違和感がある！
16. 自分好みにしたい④ 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
17. 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. 自分好みにしたい④ 18 Marginに違和感がある！
19. まとめ 19 ここまでカスタムすべきか ここまでやるなら1からTopAppBarを作るべきか はアプリによると思いますが… やろうと思えば少しの変更で色々できる！ TopAppBarをそのまま使うメリットも多い（Edge to Edge移行が楽に。いい感じのアニメーションも！）