Jetpack Compose 中的 sp 大小与 XML sp 大小不同吗？答案

【问题标题】：Are sp sizes in Jetpack Compose different from XML sp sizes?Jetpack Compose 中的 sp 大小与 XML sp 大小不同吗？
【发布时间】：2022-08-08 07:51:52
【问题描述】：

这可能是一个奇怪的问题，但 Jetpack Compose 中定义的 sp 与 XML 中的 sp 不同吗？我们在TextView 中使用的 XML 样式定义如下：

    <style name=\"Body\">
        <item name=\"android:textSize\">12sp</item>
        <item name=\"android:lineSpacingExtra\">8dp</item>
        <item name=\"android:letterSpacing\">-0.03125</item>
    </style>

我们还有一个在 XML 中定义的字体系列，并通过 android:fontFamily 和 fontFamily 应用于主题：

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<font-family xmlns:app=\"http://schemas.android.com/apk/res-auto\">

    <font
        app:font=\"@font/some_font_regular\"
        app:fontStyle=\"normal\"
        app:fontWeight=\"500\" />

    <font
        app:font=\"@font/some_font_italic\"
        app:fontStyle=\"italic\"
        app:fontWeight=\"500\" />

    <font
        app:font=\"@font/some_font_bold\"
        app:fontStyle=\"normal\"
        app:fontWeight=\"700\" />

    <font
        app:font=\"@font/cera_pro_bold_italic\"
        app:fontStyle=\"italic\"
        app:fontWeight=\"700\" />

</font-family>

转到 Jetpack Compose，我们有一个数据类，其中包含 TextStyles 和我们试图模仿 XML 中的定义的字体系列的定义：

data class AppTypography(
    private val someFontFamily: FontFamily = FontFamily(
        Font(R.font.some_font_regular, FontWeight.W500, FontStyle.Normal),
        Font(R.font.some_font_bold, FontWeight.W700, FontStyle.Normal),
        Font(R.font.some_font_italic, FontWeight.W500, FontStyle.Italic),
        Font(R.font.some_font_pro_bold_italic, FontWeight.W700, FontStyle.Italic),
    ),
    // ...
    val body: TextStyle = TextStyle(
        fontFamily = someFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp,
        lineHeight = 24.sp
    ),
    // ...
)
internal val LocalTypography = staticCompositionLocalOf { AppTypography() }

这个数据类反过来用在这个对象中，它提供了对排版、颜色等的访问：

object AppTheme {
    val colors: AppColors
        @Composable
        get() = LocalColors.current
    val typography: AppTypography
        @Composable
        get() = LocalTypography.current
    val dimensions: AppDimensions
        @Composable
        get() = LocalDimensions.current
    val shapes: AppShapes
        @Composable
        get() = LocalShapes.current
}

最后，我们将此对象用作实际的 Composable：

@Composable
fun AppTheme(
    colors: AppColors = lightColors(),
    content: @Composable () -> Unit
) {
    val rememberedColors = remember { colors.copy() }.apply { updateColorsFrom(colors) }
    CompositionLocalProvider(
        LocalColors provides rememberedColors,
        LocalTypography provides AppTheme.typography,
        LocalDimensions provides AppTheme.dimensions,
        LocalShapes provides AppTheme.shapes,
    ) {
        content()
    }
}

然后我们在Texts 之一中使用body 样式：

Text(
    modifier = Modifier.padding(start = 16.dp),
    text = stringResource(stringResourceId),
    style = AppTheme.typography.body,
    color = AppTheme.colors.onSurface
)

比较传统 View 系统与 Compose 中的文本大小（左侧为 XML，右侧为 Compose）：

两者都使用 12sp 作为文本大小，但 Compose 看起来更小。公平地说，即使图标看起来也更小。我不确定是什么导致了这种差异，也许外部 Composable 的填充可能会产生影响？在将视图迁移到 Compose 时，是否有人遇到过类似的行为？

他们使用相同的字体吗？不同的字体在相同的大小值下更大。您可以通过打开文字处理器并以相同大小输入不同字体的几个单词来看到这一点。与 compose 相比，XML 对我来说看起来很粗体，而且更大
嗨@GabeSechan，我会回答他们应该使用相同的字体，但是看看我们如何在 Compose 中定义我们的字体系列与我们通常如何在 XML 中定义它，毕竟可能会有区别
这个问题有更新吗？
嗨@sgurdag，我就此向 Google 提交了issue，我得到的建议是 Compose 中的字体不能保证 100% 与 XML 匹配——您需要修改诸如 letterSpacing 和includeFontPadding（在 Compose 1.2.0 中可用）与 XML 匹配

标签： android android-jetpack-compose android-xml

【解决方案1】：

因此，我在向 Google 提交了issue 后得到的建议是修改letterSpacing 和includeFontPadding（我相信在 Compose 1.2.0 中可用）。在我的例子中，使用我提到的Body 样式，我通过以下方式接近了字体在 XML 中的样子：

将letterSpacing 设置为(-0.5).sp
将fontSize 设置为16.sp
将lineHeight 设置为24.sp

我还对我们的应用程序中如何定义字体大小感到困惑——我们有两个dimens.xml 文件，一个用于hdpi 和xxhdpi，结果我使用了较小的hdpi 字体大小（12 sp ) 当我将字体大小从 XML 转换为 Compose 时，我应该使用较大的字体 (16 sp)。我还没有尝试过根据密度设置不同字体大小的解决方案，但是这个approach 发现看起来很有希望

【讨论】：