【问题标题】: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 而我想要一个 Horizo​​ntalScroll。网上搜了一下,找到了Monocle,但是不知道怎么把MonocleepublibWebView结合起来。关于如何使用水平滚动的任何想法?

【问题讨论】:

    标签: 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);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-01-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-08-15
      • 2019-04-20
      相关资源
      最近更新 更多