在 Android WebView 中使用水平滚动
Use Horizontal Scroll in Android WebView
我目前正在使用 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
集成。知道如何使用水平滚动吗?
最后,我可以在应用程序中启用水平滚动(没有任何页面转换)。使用此代码水平滚动 -
创建自定义 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 集成以获得不错的效果,这里是 link 整个源代码 - https://drive.google.com/drive/folders/0B8UizUpBrF1YX3UxcW5nLUVQMEk
要获得水平分页,请在加载到 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);
我目前正在使用 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
集成。知道如何使用水平滚动吗?
最后,我可以在应用程序中启用水平滚动(没有任何页面转换)。使用此代码水平滚动 -
创建自定义 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 集成以获得不错的效果,这里是 link 整个源代码 - https://drive.google.com/drive/folders/0B8UizUpBrF1YX3UxcW5nLUVQMEk
要获得水平分页,请在加载到 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);