Support automatically unbind the request when the view is detached from the window

[liujingxing]

Many times, I don't want to restart a request when a view is attached to a window，Currently, I need to manually call View.dispose() to unbind the request

ivHead.load("...")
val parent = ivHead.parent as? ViewGroup
parent?.removeView(ivHead)

//it will restart a request,  This is not what I expected
parent?.addView(ivHead)

By the way，Glide won't restart a request when a view is attached to a window,

[colinrtwhite]

By the way，Glide won't restart a request when a view is attached to a window,

Are you sure this is correct? How does Glide support views inside a RecyclerView without restarting the request when the view is re-attached? Without it, views used inside a RecyclerView won't have an image displayed when they're re-attached.

[liujingxing]

Yes, I'm sure

In Coil, it waits for the view to be attached to the window before executing the request, but in Glide, even if the view is not attached to the window, it executes the request as soon as it gets the width and height of the view

For example

suspend fun testGlide(){                                      
    val ivHead = ImageView(requireContext())                  
    val layoutParams = ConstraintLayout.LayoutParams(300, 300)
    ivHead.layoutParams = layoutParams                        
    Glide.with(this).load("https://...").into(ivHead)         
    //Wait a while until the request is successful            
    delay(3000)                                               
    //In this case the drawable will not be null              
    val drawable = ivHead.drawable                            
}                                                             

[liujingxing]

In the coroutine, the view is re-attached to the window and when a new image is loaded, it doesn't work properly. I can't explain it

For example

activity_test.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fl_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="100dp"
        tools:ignore="ContentDescription" />

    <Button
        android:id="@+id/bt_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="220dp"
        android:backgroundTint="@android:color/darker_gray"
        android:text="Next"
        android:textColor="@android:color/white" />

</FrameLayout>

TestActivity

class TestActivity : AppCompatActivity() {

    private lateinit var binding: ActivityTestBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        binding = ActivityTestBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.btNext.setOnClickListener {
            lifecycleScope.launch { binding.test() }
        }
    }

    private fun ActivityTestBinding.test() {
        Log.d("Coil", "launch start")
        flContainer.removeView(ivImage)
        val firstUrl = "https://images.unsplash.com/photo-1550982639-7a8682210ca6"
        val secondUrl = "https://images.unsplash.com/photo-1550973594-c5e511105435"
        val newUrl = if (ivImage.tag == firstUrl) secondUrl else firstUrl
        ivImage.tag = newUrl
        ivImage.load(newUrl) {
            listener(
                onStart = { request ->
                    Log.d("Coil", "onStart ${request.data}")
                },
                onCancel = { request ->
                    Log.d("Coil", "onCancel ${request.data}")
                },
                onSuccess = { _, result ->
                    Log.d("Coil", "onSuccess ${result.request.data}",)
                },
            )
        }
        flContainer.addView(binding.ivImage)
        Log.d("Coil", "launch end newUrl=$newUrl")
    }
}

No matter how many times I clicked the button, it always showed the first image， Log output：

In coil version 3.3.0, it still does not work properly

[liujingxing]

To solve this problem, consider setting currentRequest to null when the view is detached from the window, as in the following example

internal class ViewTargetRequestManager(private val view: View) : View.OnAttachStateChangeListener {

    //Omitting parts of code

    @MainThread
    override fun onViewDetachedFromWindow(v: View) {
        currentRequest?.dispose()
        currentRequest = null     //Adding this line solves the problem
    }

}

This does not affect the usage in RecyclerView

[colinrtwhite]

@liujingxing Removing that line will potentially break support for Fragments. Also making that change could potentially have unexpected behaviour changes for end users so we'd need to hide any change we make behind a configuration option and keep the default behaviour as is for now.

[liujingxing]

I looked into it and found that this was caused by the use of coroutines incorrectly, When the parent and child coroutines use Dispatchers.Main.Immediate context launch coroutines, child coroutines will not be blocked

For example

//coroutines v1.10.2
private val scope = CoroutineScope(SupervisorJob())   
                                                     
private fun launchParent(){                           
    Log.e("Coil", "Parent launch start")             
    scope.launch(Dispatchers.Main.immediate) {       
        Log.e("Coil", "Parent launch executing")     
        launchChild()                                
    }                                                
    Log.e("Coil", "Parent launch end")               
}                                                    
                                                     
private fun launchChild() {                           
    Log.e("Coil", "Child launch start")              
    scope.async(Dispatchers.Main.immediate) {        
        Log.e("Coil", "Child launch executing")      
    }                                                
    Log.e("Coil", "Child launch end")                
}                                                    

call launchParent method，Log output：

In coil, this results in new requests not being able to replace old ones in time, and eventually new pictures cannot be displayed