不使用CollapsingToolbarLayout实现滚动折叠Header时出现闪烁问题求助

Hey there! Let's tackle that annoying flicker issue you're seeing when your custom header expands back to full height. I've run into similar problems before, so here's what I think might be going on and how to fix it:

Common Causes of the Flicker #

• Frequent layout redraws/reflows: If you're directly modifying LayoutParams or calling requestLayout() repeatedly while adjusting the header height, it can trigger excessive view tree redraws and cause flicker.
• Missing hardware acceleration: Custom animations without hardware acceleration rely on software rendering, which is prone to stutters and flickers.
• Abrupt visibility changes: If you're hiding the TextView suddenly when the header finishes expanding, the layout jump can cause a flicker.

Step-by-Step Fixes #

1. Use Property Animations Instead of Direct Layout Changes

Directly modifying height triggers synchronous layout updates. Switch to ValueAnimator for smooth transitions—this optimizes the rendering process and reduces flicker:

// Example: Expand animation for the header
val expandAnimator = ValueAnimator.ofInt(currentHeaderHeight, targetFullHeight)
expandAnimator.duration = 300
expandAnimator.addUpdateListener { animation ->
    val newHeight = animation.animatedValue as Int
    val params = headerView.layoutParams
    params.height = newHeight
    headerView.layoutParams = params

    // Smoothly toggle TextView visibility based on height threshold
    val visibilityThreshold = targetFullHeight * 0.8 // Adjust as needed
    val alpha = if (newHeight >= visibilityThreshold) 0f else 1f
    textView.alpha = alpha

    // Only set GONE/VISIBLE when alpha reaches 0/1 to avoid layout jumps
    if (alpha == 0f && textView.visibility != View.GONE) {
        textView.visibility = View.GONE
    } else if (alpha > 0f && textView.visibility != View.VISIBLE) {
        textView.visibility = View.VISIBLE
    }
}
expandAnimator.start()

Note: Avoid calling requestLayout() in the animation callback—setting LayoutParams directly triggers necessary updates, and property animations maintain a stable frame rate.

2. Enable Hardware Acceleration for the Header

Hardware acceleration renders the view to a GPU layer, reducing software-rendering glitches. Add this to your custom header's constructor:

setLayerType(View.LAYER_TYPE_HARDWARE, null)

Or add it directly in your layout XML:

android:layerType="hardware"

3. Prevent Duplicate Animation Triggers

Check your RecyclerView scroll listener to ensure the expand animation only runs once when scrolling to the top—repeated triggers cause constant redraws:

var isExpanding = false
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        val firstVisiblePos = (recyclerView.layoutManager as LinearLayoutManager).findFirstVisibleItemPosition()
        
        if (firstVisiblePos == 0 && !isExpanding) {
            isExpanding = true
            startExpandAnimation() // Call your expand animation method here
        } else if (dy > 0 && isExpanding) {
            isExpanding = false
            expandAnimator.cancel() // Cancel animation if scrolling down mid-expand
        }
    }
})

4. Optimize Your Header Layout Structure

• Ensure your LinearLayout uses match_parent for height (not wrap_content) so hiding the TextView doesn't cause sudden layout shifts.
• Reduce unnecessary view nesting (use <merge> tags if possible) to lighten the layout tree and speed up rendering.

Final Notes #

The most likely culprits are excessive layout redraws during animation and abrupt visibility changes for the TextView. Following these steps should eliminate the flicker while keeping your LinearLayout visible and TextView hidden as needed. If issues persist, check for other UI-heavy operations in your scroll listener that might be blocking the main thread.

内容的提问来源于stack exchange，提问作者Araceli A.