使用DepthPageTransformer时Youtube Player播放被遮挡问题求助

Hey there, let’s tackle this frustrating issue head-on. The root problem here is that the DepthPageTransformer keeps the previous page’s view partially visible (even with transparency/scale changes) while ViewPager’s default offscreenPageLimit=1 caches that page. This cached view ends up sitting on top of your YoutubePlayerView, triggering the occlusion warning and stopping playback. When you jump from page 7 to 5, the previous page (4) isn’t cached anymore, so no overlap—hence why that works.

Here are four targeted fixes to resolve this:

1. Dynamically Adjust ViewPager’s Offscreen Cache #

Temporarily reduce the offscreen page limit when navigating to your Youtube Player page, so the previous page isn’t cached. Revert it back when leaving to maintain performance.

viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
    override fun onPageScrolled(pos: Int, offset: Float, offsetPixels: Int) {}

    override fun onPageSelected(pos: Int) {
        // Replace 5 with your Youtube Player page position
        viewPager.offscreenPageLimit = if (pos == 5) 0 else 1
        // Force adapter to refresh views
        viewPager.adapter?.notifyDataSetChanged()
    }

    override fun onPageScrollStateChanged(state: Int) {}
})

⚠️ Note: Setting offscreenPageLimit=0 might cause more frequent view creation/destruction, which could impact smoothness on lower-end devices. Use this if other fixes don’t work.

2. Modify DepthPageTransformer to Fully Hide Offscreen Pages #

The default Depth transformer leaves previous pages partially visible. Update it to push offscreen pages completely out of the viewport once the transition finishes:

public class FixedDepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    @Override
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) {
            // Page is fully off-screen to the left: hide it
            view.setAlpha(0f);
            view.setTranslationX(-pageWidth); // Push completely left
        } else if (position <= 0) {
            // Previous page sliding out: keep visible during transition
            view.setAlpha(1 + position);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);
        } else if (position <= 1) {
            // Current/next page sliding in: keep original Depth behavior
            view.setAlpha(1 - position);
            view.setTranslationX(pageWidth * -position);
            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else {
            // Page is fully off-screen to the right: hide it
            view.setAlpha(0f);
            view.setTranslationX(pageWidth); // Push completely right
        }
    }
}

This ensures cached pages aren’t lingering in the visible area after the transition.

3. Boost YoutubePlayerView’s Z-Elevation #

Force the Youtube player to sit on top of all other views by increasing its elevation. This bypasses the occlusion issue entirely:

In XML: #

<com.google.android.youtube.player.YouTubePlayerView
    android:id="@+id/youtube_player"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="8dp" /> <!-- Higher than surrounding views -->

In Code (for pre-API 21 compatibility): #

ViewCompat.setElevation(youtubePlayerView, 8f)

4. Manually Hide the Previous Page’s View #

When selecting the Youtube Player page, explicitly hide the previous cached page’s view. Restore visibility when navigating away:

viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
    override fun onPageScrolled(pos: Int, offset: Float, offsetPixels: Int) {}

    override fun onPageSelected(pos: Int) {
        if (pos == 5) {
            // Hide the previous page (pos-1) if it exists
            val prevPage = viewPager.getChildAt(pos - 1)
            prevPage?.visibility = View.GONE
        } else {
            // Restore visibility for all pages
            for (i in 0 until viewPager.childCount) {
                viewPager.getChildAt(i)?.visibility = View.VISIBLE
            }
        }
    }

    override fun onPageScrollStateChanged(state: Int) {}
})

Recommendation #

Start with Fix 2 (modifying the transformer) or Fix 3 (elevation boost)—these are the most performant and least intrusive solutions. If those don’t work, try Fix 1 or 4.

内容的提问来源于stack exchange，提问作者Jyoti JK