ComposeのPreviewで実行されてるかをチェックする

Photo by Hal Gatewood on Unsplash

ComposeのPreviewにはいくつか制限がありネットワークアクセス等ができません。そのためネットワーク画像を表示してるものなどはPreviewで確認がしづらいことがあります。

LocalInspectionMode を使うとPreviewで実行中かどうかを確認できます。

if (LocalInspectionMode.current) {
    // Preview時
} else {
    // 通常時
}

よくある例で Coil などを使ってるときなどで有用かなと思います。Previewでは仮のImageを表示することができます。

if (LocalInspectionMode.current) {
    // Preview時
    Image(
        painter = ColorPainter(color = Color.Red),
        contentDescription = null,
        modifier = Modifier.size(150.dp)
    )
} else {
    // 通常時
    AsyncImage(
        model = url,
        contentDescription = null,
        modifier = Modifier.size(150.dp)
    )
}

ちなみに、Previewをそのまま直接実行できると思いますが、この場合は通常実行時と同じ扱いになります。

参考

Preview your UI with composable previews | Jetpack Compose | Android Developers

小ネタ

Previewがたくさんあったときに以下のようにすごく探しづらい感じなっちゃいます。

こういう場合はPreview UIの左上から Gallery を選びます。

Galleryにすると、Previewが一覧で表示されるようになるので探しやすくなります。