在使用Coil加载图像时显示进度条？

Question

如何在使用Coil时从URL获取图像时显示进度条？

- Unaisul Hadi

Answer 1

使用ImageRequest.Listener

示例:

val imageRequest = ImageRequest.Builder(context)
    .data(url)
    .listener(
        onStart = {
            // set your progressbar visible here
        },
        onSuccess = { request, metadata ->
            // set your progressbar invisible here
        }
    )
    .build()

imageLoader.enqueue(request)

- uragiristereo

Answer 2

如果您正在使用Jetpack Compose创建应用程序，那么您不需要手动操作，可以使用库提供的内置SubcomposeAsyncImage（从版本2.0.0-rc01开始）来完成。

SubcomposeAsyncImage(
    model = image,
    contentDescription = "",
    loading = { 
        CircularProgressIndicator(color = Color.Black) 
    },
)

- Pratik Fagadiya

---

SubcomposeAsyncImage的性能较差，不建议在列表中使用。 - undefined

感谢@AnmolSinghSahi提供的信息。 - undefined

Answer 3

我没有使用过Coil，但我建议你可以尝试以下方法：

// Before request run on the needed method
yourProgressbar.visibility = View.VISIBLE

val request = ImageRequest.Builder(context)
.data("https://www.example.com/image.jpg")
.target { drawable ->
    yourProgressbar.visibility = View.INVISIBLE
}.build()   

val disposable = imageLoader.enqueue(request)

这里是官方文档的示例。请参考此链接。

- kirkadev

Answer 4

我只在Compose中尝试过，但我认为你可以像Glide一样使用它（译者注：Glide是一款图片加载库）。

将进度条设置为占位符。

val circularProgressDrawable = CircularProgressDrawable(this)
circularProgressDrawable.strokeWidth = 5f
circularProgressDrawable.centerRadius = 30f
circularProgressDrawable.start()

imageView.load("https://www.example.com/image.jpg") {
    crossfade(true)
    placeholder(circularProgressDrawable)
    transformations(CircleCropTransformation())
}

- Stefano Sansone

Answer 5

这是我正在做的事情，它按预期正常工作。

 binding.circularProgressBar.visibility = View.VISIBLE
 binding.ivTeamPic.load(url) {
      target {
           binding.circularProgressBar.visibility = View.GONE
           binding.ivTeamPic.setImageDrawable(it)
      }
 }

- Mohd Naushad