サイトアイコン 知的好奇心

M3 (androidx.compose.material3) のTypographyでTextStyleパラメータを指定する方法

M3 (androidx.compose.material3) のTypographyでTextStyleパラメータを指定する方法をご紹介します。

条件

TypographyのTextStyleパラメータ

M3 (androidx.compose.material3)では、Typographyで指定するパラメータ(TextStyle)がM2と比較して大きく変わっています。

M2とM3の相違例

M2では以下のように指定していました。

val Typography = Typography(
   h1 = TextStyle(
       fontFamily = AbrilFatface,
       fontWeight = FontWeight.Normal,
       fontSize = 30.sp
   ),
   h2 = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Bold,
       fontSize = 20.sp
   ),
   h3 = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Bold,
       fontSize = 14.sp
   ),
   body1 = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Normal,
       fontSize = 14.sp
   )
)

一方、M3では以下のように指定します。

val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = AbrilFatface,
        fontWeight = FontWeight.Normal,
        fontSize = 30.sp
    ),
    displayMedium = TextStyle(
        fontFamily = Montserrat,
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp
    ),
    displaySmall = TextStyle(
        fontFamily = Montserrat,
        fontWeight = FontWeight.Bold,
        fontSize = 14.sp
    ),
    bodyLarge = TextStyle(
        fontFamily = Montserrat,
        fontWeight = FontWeight.Normal,
        fontSize = 14.sp
    )
)

これまで、見出しと言えば「h1」や「h2」を使用していたことを考えると、このパラメータ名変更は結構なインパクトです。
しかし、新しいパラメータ名をみると「種別 + 大きさ」という感じのネーミングなので、すぐに慣れることが出来ると思います。

対応表

M2とM3の対応表は以下の通りです。

M2 M3
h1 displayLarge
h2 displayMedium
h3 displaySmall
該当なし headlineLarge
h4 headlineMedium
h5 headlineSmall
h6 titleLarge
subtitle1 titleMedium
subtitle2 titleSmall
body1 bodyLarge
body2 bodyMedium
caption bodySmall
button labelLarge
該当なし labelMedium
overline labelSmall

参考

developers.android.com:Compose でマテリアル 2 からマテリアル 3 に移行する

https://developer.android.com/jetpack/compose/themes/material2-material3?hl=ja#m2_4

モバイルバージョンを終了