android的webview如何给html分页？

Question

用android的webview打开epub的内容，如何将epub里面一个长长的html制作成分页（即可左右翻页，而不是一直往下划）？并记录页码？

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

1. 了解epub格式
   在开始分页之前，首先需要了解epub格式。EPUB（电子出版物）是一种常见的开放电子书格式，它将内容和样式结合在一个包含多个文件的压缩文件中。EPUB格式的电子书通常包含多个HTML文件。

2. 解析epub文件
   使用第三方库来解析epub文件，将其转换为可在WebView中加载的HTML内容。常用的epub解析库包括Epublib和android-epub-reader等。
   参考链接：Epublib、android-epub-reader

3. 分割长html文件
   通过解析epub文件获取到的HTML内容可能是一个很长的文件，需要将其分割成多个页面。可以通过以下两种方法实现分页：

   • 使用CSS属性分页（CSS Paged Media）：将长HTML内容分割成多个页面，并在WebView中加载分割后的页面。可以使用CSS3的@page、column-count、column-gap等属性来实现分页效果。

     示例CSS样式：

     @page {
        size: auto;
        margin: 0;
        padding: 0;
     }
     body {
        column-count: 2; /* 页面分成两栏 */
        column-gap: 20px; /* 两栏之间的间距 */
     }
     

     在WebView加载HTML内容之前，将上述CSS样式应用到HTML文件中。

   • 手动分割HTML内容：通过处理HTML文本，将其分割成多个页面，并在WebView中加载分割后的页面。
     可以使用正则表达式或字符串处理方法，将HTML内容按照一定的规则（如每页固定行数或字符数）进行分割。

4. 在WebView中加载分页后的内容
   通过WebView加载分割后的HTML页面，并实现左右翻页效果。可以通过以下方法实现：

   • 使用ViewPager：在Activity中使用ViewPager作为容器，每一页都是一个WebView，加载对应的HTML内容。通过切换ViewPager的页面来实现左右翻页效果。

     示例代码：

     // 假设已经将分割后的HTML内容存储在List<String>中，每个String代表一页的HTML内容
     ViewPager viewPager = findViewById(R.id.viewPager);
     PagerAdapter adapter = new PagerAdapter() {
         @Override
         public int getCount() {
             return htmlPages.size();
         }
     
         @Override
         public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
             return view == object;
         }
     
         @NonNull
         @Override
         public Object instantiateItem(@NonNull ViewGroup container, int position) {
             WebView webView = new WebView(container.getContext());
             webView.loadDataWithBaseURL(null, htmlPages.get(position), "text/html", "UTF-8", null);
             container.addView(webView);
             return webView;
         }
     
         @Override
         public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
             container.removeView((WebView) object);
         }
     };
     
     viewPager.setAdapter(adapter);
     

   • 使用自定义WebView实现翻页功能：通过在WebView的onTouchEvent()方法中监听左右滑动手势来实现翻页效果。可以在滑动过程中动态更新WebView加载的HTML内容。

     示例代码：

     // 自定义的WebView类
     public class PagingWebView extends WebView {
         private GestureDetectorCompat gestureDetector;
     
         public PagingWebView(Context context) {
             super(context);
             gestureDetector = new GestureDetectorCompat(context, new GestureListener());
         }
     
         @Override
         public boolean onTouchEvent(MotionEvent event) {
             return gestureDetector.onTouchEvent(event) || super.onTouchEvent(event);
         }
         
         private class GestureListener extends GestureDetector.SimpleOnGestureListener {
             private static final int SWIPE_THRESHOLD = 100;
             private static final int SWIPE_VELOCITY_THRESHOLD = 100;
     
             @Override
             public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                 float deltaX = e2.getX() - e1.getX();
                 if (Math.abs(deltaX) > SWIPE_THRESHOLD && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                     if (deltaX > 0) {
                         // 向右滑动，加载上一页内容
                         loadPreviousPage();
                     } else {
                         // 向左滑动，加载下一页内容
                         loadNextPage();
                     }
                     return true;
                 }
                 return false;
             }
         }
     }
     

5. 记录页码
   为了记录页码，可以在WebView中使用JavaScript与Android进行通信，当页面切换时，通过JavaScript代码获取当前页码，并通过evaluateJavascript()方法将页码传递给Android端。

   示例代码：

   // 在WebView中启用JavaScript
   webView.getSettings().setJavaScriptEnabled(true);
   
   // 注册JavaScript接口，用于与Android进行通信
   webView.addJavascriptInterface(new PageNumberInterface(), "PageNumberInterface");
   
   // 加载HTML页面
   webView.loadUrl("file:///android_asset/epub_page.html");
   
   // JavaScript接口类
   public class PageNumberInterface {
       @JavascriptInterface
       public void onPageNumberChanged(int pageNumber) {
           // 当页面切换时触发，获取到的pageNumber即为当前页码
           Log.d("PageNumber", "Current Page: " + pageNumber);
       }
   }
   
   // 在HTML中监听页面切换事件并调用JavaScript接口
   <script>
       window.onload = function() {
           var currentPage = 1; // 当前页码，根据实际情况初始化
           document.getElementById('pageContainer').addEventListener('pagechanged', function(event) {
               currentPage = event.detail.pageNumber; // 获取切换后页码
               PageNumberInterface.onPageNumberChanged(currentPage); // 调用JavaScript接口通知Android
           });
       };
   </script>
   

通过上述步骤，你可以实现Android WebView对epub内容的分页显示，并记录页码。具体的实现需根据需求和实际情况进行调整和优化。