Android ViewPager使用预加载机制导致出现页面穿透问题

​

缘由

在应用中使用ViewPager，并且设置预加载页面。结果出现了一些异常的现象。
我们有4个页面，分别是4个Fragment，暂且称为FragmentA、FragmentB、FragmentC、FragmentD，ViewPager在MainActivity中，切换时，FragmentB会将FragmentA覆盖，这个时候，在FragmentB中点击某一处，如果该处的FragmentA也有控件，会出现异常的情况，事件会响应到FragmentA中的控件中去，也就是事件穿透了。

原因分析:

​这个问题在使用 ViewPager 和 PageTransformer 时确实比较常见。根本原因在于 ViewPager 的工作机制以及 PageTransformer 如何影响页面视图。

1. ViewPager 预加载机制: ViewPager 为了实现平滑的滑动效果，默认会预加载当前页面左右两侧的页面（数量由 setOffscreenPageLimit(int limit) 控制，默认为1）。这意味着即使某个页面在视觉上已经部分或完全移出屏幕，它的视图 (View) 仍然存在于 ViewPager 的视图层级 (View Hierarchy) 中，并且可能仍然是活动的。
2. PageTransformer 的作用: PageTransformer 主要通过修改页面的绘制属性（如 translationX, translationY, scaleX, scaleY, alpha, rotation 等）来实现切换动画。它改变的是页面的 视觉 位置和外观，但通常 不改变 页面视图在视图层级中的存在状态或其接收触摸事件的能力。
3. 事件分发机制: 当你在屏幕上点击时，Android 的触摸事件会从父视图（这里是 ViewPager）分发到子视图。即使某个页面（比如前一个页面）通过 PageTransformer 被平移到了当前页面的后面或者屏幕外，如果它的视图边界（在进行变换之前的原始边界，或者变换后的边界仍然与点击位置有重叠，并且它没有被设置为不可交互）仍然能够响应触摸事件，那么点击事件就可能被它拦截并处理。尤其是当 PageTransformer 只是平移 (translation) 而没有处理视图的 Z 轴顺序 (elevation) 或可点击状态时，这个问题更容易发生。默认情况下，后添加的页面（索引更大的页面）会绘制在先添加的页面之上，但事件分发可能不会严格遵守这个视觉顺序，特别是对于经过变换的视图。

总结来说： 前一个页面虽然在视觉上被移开了（或者被当前页面遮挡了），但它的 View 实例仍然存在于内存和视图树中，并且默认情况下是可交互的。当你点击的位置恰好也落在了这个“隐藏”页面的可交互控件的原始或变换后的区域内时，事件可能就会被它错误地接收。

解决方案:

最有效的解决办法是在你的 PageTransformer 的 transformPage(View page, float position) 方法中，根据页面的 position 来动态地管理页面的可交互状态。

• position 的含义：
  • 0: 当前完全可见的页面。
  • (-1, 0): 左侧相邻的页面，正在移入或移出屏幕。
  • (0, 1): 右侧相邻的页面，正在移入或移出屏幕。
  • <= -1: 完全移出屏幕左侧的页面。
  • >= 1: 完全移出屏幕右侧的页面。

你需要确保只有当前页面（或者你希望可以交互的过渡页面）是可点击的，而那些视觉上处于非活动状态（尤其是被当前页面遮挡的页面）应该被禁用交互。

具体实现方法:

在你的 PageTransformer 的 transformPage 方法中添加逻辑：

方法一：直接设置 clickable 或 enabled (简单但不一定完全解决子视图问题)

// Java
import androidx.viewpager.widget.ViewPager;
import android.view.View;public class MyPageTransformer implements ViewPager.PageTransformer {@Overridepublic void transformPage(View page, float position) {// ... 你原有的变换逻辑 (translation, scale, alpha etc.)// 关键：根据 position 决定页面是否可以交互// 通常我们只希望当前页面 (-1 < position < 1 范围内的页面，特别是 position 接近 0 的) 可以交互// 对于完全移出屏幕或在后面的页面 (position <= -1 或 position >= 1，尤其是 position < 0 时) 禁用交互if (position < -1f || position > 1f) {// 完全不可见page.setAlpha(0f); // 视觉上隐藏 (可选)page.setEnabled(false);page.setClickable(false);} else {// 在屏幕内或正在过渡page.setEnabled(true);page.setClickable(true);// 这里可以根据 position 的具体值调整 alpha 或其他视觉效果if (position == 0) {// 当前页面，确保完全可见和可交互page.setAlpha(1f);} else {// 过渡页面，可以根据需要设置透明度等// 例如，让远离中心的页面更透明float scaleFactor = Math.max(0.85f, 1 - Math.abs(position));page.setScaleX(scaleFactor);page.setScaleY(scaleFactor);page.setAlpha(1 - Math.abs(position)); // 渐变效果}}// 可能需要递归禁用子视图，如果 setEnabled(false) 对父视图不够的话// setChildrenClickable(page, position > -1f && position < 1f);}// 辅助方法，递归设置子视图的可点击性 (如果需要)private void setChildrenClickable(View view, boolean clickable) {if (view instanceof ViewGroup) {ViewGroup viewGroup = (ViewGroup) view;for (int i = 0; i < viewGroup.getChildCount(); i++) {setChildrenClickable(viewGroup.getChildAt(i), clickable);}}view.setClickable(clickable);}
}

// Kotlin
import androidx.viewpager.widget.ViewPager
import android.view.View
import android.view.ViewGroupclass MyPageTransformer : ViewPager.PageTransformer {override fun transformPage(page: View, position: Float) {// ... 你原有的变换逻辑 (translation, scale, alpha etc.)// 关键：根据 position 决定页面是否可以交互val isVisible = position >= -1f && position <= 1fpage.isEnabled = isVisiblepage.isClickable = isVisible // 设置根视图的可点击性if (!isVisible) {page.alpha = 0f // 完全不可见时隐藏 (可选)} else {// 在屏幕内或正在过渡// 可以根据 position 调整 alpha 等视觉效果if (position == 0f) {// 当前页面page.alpha = 1f} else {// 过渡页面val scaleFactor = maxOf(0.85f, 1 - kotlin.math.abs(position))page.scaleX = scaleFactorpage.scaleY = scaleFactorpage.alpha = 1 - kotlin.math.abs(position) // 渐变效果}}// 如果 page.isEnabled = false 不足以阻止子视图响应点击，// 你可能需要递归地禁用子视图。// setChildrenClickable(page, isVisible)}// 辅助方法，递归设置子视图的可点击性 (如果需要)private fun setChildrenClickable(view: View, clickable: Boolean) {view.isClickable = clickableif (view is ViewGroup) {for (i in 0 until view.childCount) {setChildrenClickable(view.getChildAt(i), clickable)}}}
}

方法二：使用 Elevation (API 21+)

如果你的应用最低支持 API 21 (Lollipop)，你可以利用 elevation 属性。通常，Z 轴更高的视图会接收触摸事件。确保当前页面的 elevation 最高。

// Java (API 21+)
import androidx.viewpager.widget.ViewPager;
import android.view.View;
import android.os.Build;public class MyPageTransformer implements ViewPager.PageTransformer {private static final float MAX_ELEVATION = 8f; // dp, or just a relative value@Overridepublic void transformPage(View page, float position) {// ... 你原有的变换逻辑 ...if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {// 让当前页面及其邻近页面的 Elevation 根据 position 变化// 当前页面 (position=0) Elevation 最高// 越远的页面 Elevation 越低float absPos = Math.abs(position);float elevation = (1 - absPos) * MAX_ELEVATION;page.setElevation(elevation);}// 你仍然可能需要结合方法一中的 setClickable/setEnabled// 特别是对于完全移出屏幕的页面 (absPos >= 1)if (position < -1f || position > 1f) {page.setAlpha(0f);page.setEnabled(false);page.setClickable(false);} else {page.setEnabled(true);page.setClickable(true);// 根据需要设置 alpha 等page.setAlpha(1 - Math.abs(position)); // 示例}}
}

// Kotlin (API 21+)
import androidx.viewpager.widget.ViewPager
import android.view.View
import android.os.Buildclass MyPageTransformer : ViewPager.PageTransformer {companion object {private const val MAX_ELEVATION = 8f // dp, or just a relative value}override fun transformPage(page: View, position: Float) {// ... 你原有的变换逻辑 ...if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {val absPos = kotlin.math.abs(position)// 越靠近中间 (position=0), elevation 越高page.elevation = (1 - absPos) * MAX_ELEVATION}// 结合管理 clickable/enabled 状态val isVisible = position >= -1f && position <= 1fpage.isEnabled = isVisiblepage.isClickable = isVisibleif (!isVisible) {page.alpha = 0f} else {page.alpha = 1 - kotlin.math.abs(position) // 示例}}
}

总结建议:

• 首选方法一，在 transformPage 中根据 position 明确设置 page.setEnabled(false) 和/或 page.setClickable(false) 对于那些不应响应交互的页面（特别是 position < 0 且视觉上在后面的页面）。如果页面根布局设置 clickable=false 不足以阻止其子控件响应事件，你可能需要递归地禁用子控件的可点击状态，或者直接将整个页面的 setEnabled(false)。
• 如果你的 minSdkVersion >= 21，可以结合方法二使用 elevation 来辅助控制 Z 轴顺序，这有助于系统更正确地进行事件分发。
• 测试：仔细测试你的 PageTransformer 在各种滑动状态下的表现，确保只有期望的页面可以响应点击。

通过在 PageTransformer 中主动管理页面的交互状态，能够解决这个点击穿透的问题。