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
画像が表示されます。