Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TopAppBar Composableをカスタムする

Avatar for Hunachi Hunachi
April 04, 2025

TopAppBar Composableをカスタムする

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

Avatar for Hunachi

Hunachi

April 04, 2025
Tweet

More Decks by Hunachi

Other Decks in Technology

Transcript

  1. 自分好みにしたい② 9 Expanded状態とCollapsed状態の文字Styleを指定したい! val customTypography = androidx.compose.material3.Typography( titleLarge = LocalAppTypography.current.largeRead,

    headlineSmall = LocalAppTypography.current.exLargeTitle, ) MaterialTheme( typography = customTypography, ) { MediumTopAppBar(**.) } TopAppBarSmallTokens TopAppBarMediumTokensを参照
  2. 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
  3. 自分好みにしたい④ 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
  4. 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