Mar 30, 2023 04-58-25 PM Android Jetpack Compose_ Glide Preview.md

Person:

• android jetpack composeの質問です。 Glideを用いて画像を表示する Compose関数の プレビューを作ることはできますか?

ChatGPT:

• はい、Jetpack ComposeでGlideを使用して画像を表示し、プレビューを作成することができます。ただし、@Previewアノテーションを使用したプレビューでは、実際の画像は表示されず、代わりにデフォルトの画像が表示されます。これは、プレビュー時にリモート画像をダウンロードできないためです。

以下の例では、Glideを使って画像をロードし、表示する GlideImage コンポーザブル関数を作成します。

まず、build.gradleファイルにGlideとCompose用のGlideライブラリを追加します。

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.12.0'
    kapt 'com.github.bumptech.glide:compiler:4.12.0'
    implementation 'com.google.accompanist:accompanist-glide:0.18.0'
}

次に、Glideを使って画像を表示する GlideImage コンポーザブル関数を作成します。

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import com.bumptech.glide.request.target.Target
import com.google.accompanist.glide.rememberGlidePainter

@Composable
fun GlideImage(
    url: String,
    modifier: Modifier = Modifier,
    contentDescription: String? = null,
    contentScale: ContentScale = ContentScale.Fit,
    previewPlaceholder: Int = R.drawable.placeholder
) {
    val painter = rememberGlidePainter(
        request = url,
        previewPlaceholder = previewPlaceholder
    )

    Image(
        painter = painter,
        contentDescription = contentDescription,
        modifier = modifier,
        contentScale = contentScale
    )
}

この GlideImage 関数は、プレビューで表示するデフォルトのプレースホルダー画像として previewPlaceholder パラメータを受け取ります。

最後に、@Preview アノテーションを使ってプレビューを作成します。

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview
@Composable
fun PreviewGlideImage() {
    GlideImage(
        url = "https://example.com/sample_image.jpg",
        modifier = Modifier.size(100.dp),
        contentDescription = "Sample Image",
        previewPlaceholder = R.drawable.placeholder
    )
}

このプレビューでは、実際の画像の代わりに placeholder 画像が表示されます。