【Android】composeでdp, pxを変換する

はじめに

jetpack composeで dp to px および px to dpの変換処理の例があまりなかったのでメモに書いておきます。
本記事はcomposeのversion: 1.2.0-beta03の情報です。
APIは変更される可能性があるので適宜最新versionに置き換えてください。

px to dp

val widthPx = 16f
val density = LocalDensity.current
with(density) {
    val dp = widthPx.toDp()
}

dp to px

val widthDp = 16.dp
val density = LocalDensity.current
with(density) {
    val px = widthDp.toPx()
}

Densityを取得することで、Densityに生えているtoDp(), toPx()の関数が利用できるようになります。
CompositionLocal経由でDensityをcomposableから取得で出来ます。
なお、CompositionLocalはcomposeにおいて大事な機能なのでよくわからない方は公式ドキュメントを読んでください。

具体的なユースケース

おまけとして具体的にpx, dpの変換が必要となる例を紹介します。

var width by remember { mutableStateOf(0.dp) }
var height by remember { mutableStateOf(0.dp) }
with(LocalDensity.current) {
    // coilで画像を表示
    AsyncImage(
        model = imageUrl,
        contentDescription = null,
        onState = {
            // 画像のロードが完了したら端末上の画像サイズを取得しdpに変換する
            width = it.painter!!.intrinsicSize.width.toDp()
            height = it.painter!!.intrinsicSize.height.toDp()
        }
    )
}
Box(
    modifier = Modifier
        .width(width)
        .height(height)
        .background(Color.Green)
)

coilで画像を表示し、端末上の画像サイズを取得し利用する場合はpx to dpの変換をする必要があります。
このサンプルでは、画像サイズと同じサイズのBoxを表示しています。
coilで取得できるが端末上の画像サイズintrinsicSizeは単位がpxのためdpに変換して利用しています。