如何在Android WebView加载的HTML页面之间实现滑动切换效果

使用ViewPager2承载多WebView实例是目前该场景下最稳定的实现方式，具体实现步骤如下：

• 第一步：引入ViewPager2依赖
  在模块级build.gradle的dependencies块中添加官方依赖：

  dependencies {
      implementation "androidx.viewpager2:viewpager2:1.0.0"
  }
  

• 第二步：编写页面布局
  在需要展示内容的Activity或Fragment的布局文件中添加ViewPager2控件：

  <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/viewPager"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
  

• 第三步：实现自定义Adapter
  继承RecyclerView.Adapter，每个条目返回WebView实例，在绑定逻辑中给对应WebView加载指定HTML页面即可，示例代码：

  public class HtmlPageAdapter extends RecyclerView.Adapter<HtmlPageAdapter.HtmlPageViewHolder> {
      // 存储所有待加载的HTML路径列表，支持本地assets路径、远程链接两种格式
      private List<String> htmlPathList;
  
      public HtmlPageAdapter(List<String> htmlPathList) {
          this.htmlPathList = htmlPathList;
      }
  
      @NonNull
      @Override
      public HtmlPageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
          WebView webView = new WebView(parent.getContext());
          // 提前配置WebView通用设置，可根据业务需求调整参数
          WebSettings settings = webView.getSettings();
          settings.setJavaScriptEnabled(true);
          settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
          webView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
          return new HtmlPageViewHolder(webView);
      }
  
      @Override
      public void onBindViewHolder(@NonNull HtmlPageViewHolder holder, int position) {
          holder.webView.loadUrl(htmlPathList.get(position));
      }
  
      @Override
      public int getItemCount() {
          return htmlPathList.size();
      }
  
      public static class HtmlPageViewHolder extends RecyclerView.ViewHolder {
          WebView webView;
          public HtmlPageViewHolder(@NonNull View itemView) {
              super(itemView);
              webView = (WebView) itemView;
          }
      }
  }
  

• 第四步：绑定Adapter实现滑动效果
  在Activity的onCreate逻辑中添加如下代码即可完成基础滑动切换功能：

  // 初始化HTML页面路径列表，示例为assets目录下的本地页面
  List<String> pageList = Arrays.asList("file:///android_asset/page1.html", "file:///android_asset/page2.html", "file:///android_asset/page3.html");
  ViewPager2 viewPager = findViewById(R.id.viewPager);
  viewPager.setAdapter(new HtmlPageAdapter(pageList));
  

可选优化点 #

• 滑动冲突处理：如果HTML页面本身包含横向滑动逻辑，可以通过自定义ViewPager2的onInterceptTouchEvent方法，根据业务场景判断是否拦截触摸事件，避免滑动冲突。
• 自定义切换动画：如果需要实现仿真书籍翻页、淡入淡出等特殊切换效果，可通过viewPager.setPageTransformer()方法传入自定义的PageTransformer实现。
• 内存优化：页面销毁时要主动遍历所有已创建的WebView实例，调用webView.destroy()释放资源，避免内存泄漏。

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