在 Android WebView 中使用水平滚动答案

【问题标题】：Use Horizontal Scroll in Android WebView在 Android WebView 中使用水平滚动
【发布时间】：2017-12-04 01:18:23
【问题描述】：

我目前正在使用epublib-core 读取epub 并在Android WebView 中使用以下代码显示它们-

webView.loadDataWithBaseURL(baseURL, new String(spineReferences.get(chapter/* <- int*/).getResource().getData()), "text/html", "utf-8", null);

但它使用 Vertical Scroll 而我想要一个 HorizontalScroll。网上搜了一下，找到了Monocle，但是不知道怎么把Monocle和epublib和WebView结合起来。关于如何使用水平滚动的任何想法？

【问题讨论】：

标签： android webview epublib monocle

【解决方案1】：

最后，我可以在应用程序中启用水平滚动（没有任何页面转换）。使用此代码水平滚动 -

创建自定义WebViewClient -

public class CustomWebClient extends WebViewClient {
private Context mContext;

public CustomWebClient(Context context) {
    this.mContext = context;
}

@Override
public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);

    final MyWebView myWebView = (MyWebView) view;

    String varMySheet = "var mySheet = document.styleSheets[0];";

    String addCSSRule = "function addCSSRule(selector, newRule) {"
            + "ruleIndex = mySheet.cssRules.length;"
            + "mySheet.insertRule(selector + '{' + newRule + ';}', ruleIndex);"

            + "}";

    String insertRule1 = "addCSSRule('html', 'padding: 0px; height: "
            + (myWebView.getMeasuredHeight() /  mContext.getResources().getDisplayMetrics().density)
            + "px; -webkit-column-gap: 0px; -webkit-column-width: "
            + myWebView.getMeasuredWidth() + "px;')";

    myWebView.loadUrl("javascript:" + varMySheet);
    myWebView.loadUrl("javascript:" + addCSSRule);
    myWebView.loadUrl("javascript:" + insertRule1);

}
}

编辑 -

我将 epub lib 与 Monocle 集成以获得很好的效果，这里是整个源代码的链接 - https://drive.google.com/drive/folders/0B8UizUpBrF1YX3UxcW5nLUVQMEk

【讨论】：

什么是 MyWebView ？
我的自定义WebView，和原来的WebView差别不大。
+InfinityChaos 此方法有效，但效果不如翻页效果，而且图像也分崩离析
我尝试过加入翻页效果，但效果不是很好，所以我就放弃了这个想法。如果你想使用它，请看这个 - turnjs.com
谢谢，兄弟，它可以工作，但是点击屏幕后它会锁定滑动，添加后没有文本选择功能，我是一个完全使用 javascript 的菜鸟，不想卡在中间所以我说以 android 的方式从头开始做每一件事，感谢您提供的所有帮助，这是我能给的最少的 :)

【解决方案2】：

要获得水平分页，在加载到WebView之前添加css属性到html

String html = getBookContent();  // load epub content to String

int density = getResources().getDisplayMetrics().density;
int width = (int) Math.floor(mWebView.getWidth() / density);
int height = (int) Math.floor(mWebView.getHeight() / density);

String style= "<meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=1\"/>\n" +
     "<style type=\"text/css\">body {height: %heightpx; \n" + 
     "-webkit-column-width: %widthpx; -webkit-column-gap:0;}</style></head>";

html = html.replace("</head>", style);
html = html.replace("%width", String.valueOf(width));
html = html.replace("%height", String.valueOf(height));

 mWebView.loadDataWithBaseURL(baseUrl, html, "text/html", "utf-8", null);

【讨论】：