☰

Jetpack Compose でプレビューに画像プレースホルダーを使用する方法 質問する

tag-icon • tag-icon android image android-jetpack-compose
Jetpack Compose でプレビューに画像プレースホルダーを使用する方法 質問する

XML では、実際のデータが利用できない場合にプレースホルダーを使用してデザインに使用するオプションがありましたtools:。Jetpack Compose にも同様のオプションがありますか?

専用のプレビュー関数でサンプル データを composable に渡すことができることはわかっています。ただし、たとえば、画像ソースが URL (Coil、Glide などで読み込まれる) である場合、サンプル URL を渡してもプレビューで読み込むことはできません。そのための実用的なソリューションがあれば、開発時間を節約できます。

ベストアンサー1

2022年11月更新

Coil を使用している場合...

implementation("io.coil-kt:coil-compose:2.2.2")

...これで、デバッグ モードでのみプレースホルダーを使用してプレビューできるようになりました。

AsyncImage(
   model = "https://www.example.com/image.jpg",
   placeholder = debugPlaceholder(R.drawable.debugPlaceholder),
   contentDescription = stringResource(R.string.description)
)

そして、ユーティリティ メソッドを作成します。

@Composable
fun debugPlaceholder(@DrawableRes debugPreview: Int) =
    if (LocalInspectionMode.current) {
        painterResource(id = debugPreview)
    } else {
        null
    }

詳細はこちらをご覧ください:https://coil-kt.github.io/coil/compose/

おすすめ記事