主页 / 问题 / 1583109
Accepted
Sirop4ik
Asked:2024-06-07 22:40:59 +0000 UTC2024-06-07 22:40:59 +0000 UTC

为什么 dp 在 andorid TV 上不能按预期工作？

  • 772

在 Android TV 上，我使用 Jetpack Compose，其中卡大小在 720p（模拟器）和 1080p（模拟器）电视上看起来不同。

720： 在此输入图像描述

1080： 在此输入图像描述

卡代码：

...
Card(
            modifier = Modifier
                .width(412.dp)
                .height(200.dp),
            border = CardDefaults.border(border = Border.None),
            colors = CardDefaults.colors(
                containerColor = ColorTokens.grey_40,
                contentColor = ColorTokens.white,
                focusedContainerColor = Color.White,
                focusedContentColor = Color.Black,
                pressedContainerColor = Color.Gray,
                pressedContentColor = Color.LightGray
            ),
            shape = CardDefaults.shape (shape = RoundedCornerShape(CornerRadiusTokens.radius_300.withDPIOffset(LocalContext.current))),
            onClick = { /*TODO*/ },
        )
...

我希望这些卡片在两个屏幕上看起来都是一样的dp。我缺少什么？

android

1 个回答

  1. Best Answer

    问题是我们的设计是针对 1080p 屏幕进行的，所有 UI 元素值均以像素 (px) 为单位，而不是 dp。这意味着，如果您尝试在不同的屏幕上使用 200px，那么它看起来显然会有所不同。

    因此，为了支持1080p和720p屏幕，需要将尺寸从1080屏幕调整到720屏幕。

    这是函数：

    inline val Int.extToDp: Dp
    @Composable get() = with(LocalDensity.current) { [email protected]() }

val Int.pxToDpWithOffset: Dp
    @Composable get() {
        val screenDensity: Float = LocalContext.current.resources.displayMetrics.densityDpi.toFloat()

        val factor: Float = when {
            screenDensity <= DisplayMetrics.DENSITY_TV -> {
                (screenDensity / DisplayMetrics.DENSITY_XHIGH)
            }

            else /* DisplayMetrics.DENSITY_XHIGH */ -> {
                1f
            }
        }

        val adjustedDp: Int = (this * factor).roundToInt()
        return adjustedDp.extToDp
    }

    用法：

    ...
            modifier = Modifier
                .width(412.pxToDpWithOffset)
                .height(200.pxToDpWithOffset)
...

    如果我错过了什么，请告诉我:)

    • 0

相关问题