将 HTML 内容放入 WebView 内的两列答案

【问题标题】：Placing HTML content into two columns inside WebView将 HTML 内容放入 WebView 内的两列
【发布时间】：2016-08-01 16:20:29
【问题描述】：

我使用 WebView 在我的应用程序中显示 html 内容以阅读电子书，但在开发它时遇到了以下问题。
在 webview 加载此 html 字符串后，我解析电子书并得出 html 字符串中的解析内容。

  myView.setVerticalScrollBarEnabled(false);
  myView.setHorizontalScrollBarEnabled(false);
  myView.getSettings().setDisplayZoomControls(false);

  myView.getSettings().setJavaScriptEnabled(true);
  if (Build.VERSION.SDK_INT >= 11) myView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

  myView.loadDataWithBaseURL("file:///android_asset/Text/", ebookContent, "text/html", "UTF-8", null);

我通过 'myView.scrollTo(width of myView * countPages, 0)' 水平移动页面，并通过 @987654321 提出的使用 html 格式化/添加样式来实现内容的水平放置@。感谢他：

  myView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        final String varMySheet = "var mySheet = document.styleSheets[0];";
        final String varCSSIndex = "var ruleIndex = mySheet.cssRules.length;";

        final float widthPage = view.getMeasuredWidth();
        final float heightPage = view.getMeasuredHeight();
        final float density_ = getResources().getDisplayMetrics().density;
        final float gap = (int) (widthPage * .012f) * 2;

        view.loadUrl("javascript:" + varMySheet);
        view.loadUrl("javascript:" + varCSSIndex);

        if (areThereTwoColumns) {
            view.loadUrl("javascript:(function(){mySheet.insertRule('html { height: " + 
            heightPage / density_ + "px; -webkit-column-count: 2; -webkit-column-gap: " + 
            gap / density_ + "px;" +
            " font-size: " + textSize +
            "; }', ruleIndex)})()");
            } else {
            view.loadUrl("javascript:(function(){mySheet.insertRule('html { height: " +
            heightPage / density_ +
            "px; -webkit-column-gap: 0px; -webkit-column-width: " +
            widthPage / density_ + "px;" + " font-size: " + textSize +
            "; }', ruleIndex)})()");
         }
       }
    });

我将 vebview 中的内容拆分为 webview 的块大小宽度 ('.getMeasuredWidth()')。当 html 内容放在一列中时，它在任何模拟器中看起来都很好，适用于任何页面方向。但是，当我将 html 放在两列中时，生成的页面的宽度可能与 WebView 的宽度略有不同。当设备的密度不是整数时会发生这种情况。

如果两列是 'myWebView.scrollTo((width of myWebView + gap) * countPages, 0)' 则翻转页面，并且这种不同会一点一点地累积，而一些位移会显示为来自页面的一侧。这是因为显示页面的宽度不再与 WebView 的宽度重合。邻居页面的边缘不应该是可见的，但它进入了显示区域。

例如，Nexus 7 有 1280x800pxs，7 英寸，tvdpi（Genymotion 模拟器）：在横向模式下，我在 WebView 中加载的 web 内容的长度等于 360276 像素（由 WebView 的“computeHorizontalScrollRange()”返回），显示布局的宽度等于 1238 像素。

注意：px = (int) (dp * density + .5f)

xml 布局：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   xmlns:tools="http://schemas.android.com/tools"
   tools:context=".MainActivity"
   android:background="@color/colorBackgroundView"
   android:id="@+id/container">

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       android:layout_alignParentTop="true"
       android:layout_marginLeft="16dp"
       android:layout_marginTop="10dp"
       android:layout_marginRight="16dp">

       <com.o....www.android.reader.MyWebView
           android:id="@+id/webView"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_weight="1" />

       <com.o....www.android.reader.PageCountShow
           android:id="@+id/pager"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />
   </LinearLayout>

 </RelativeLayout>

'document.body.scrollWidth' 返回的 HTML 内容等于 270630 像素。密度为 1.33。在这种定向设备中，所有页面都可以准确显示，尽管分数“webview 的整个长度/webview 的布局宽度”不是圆形的。
当放在两列时，它看起来要糟糕得多。 WebView web-content 的长度等于 267453px，html-content 的长度等于 200904px（保留比例），webview 的显示宽度为 1238px，gap 为 28px（webview 滚动距离为 1266px）。
在这种情况下，相邻页面的边缘变得可见，这个区域随着我翻阅页面而增加。我尝试通过添加 body-tag 'zoom' 属性的样式重新加载 html-content 来调整 html-content 的大小，但它给出了意想不到的结果：因此，可能会更改显示字体大小，就好像所有内容都已缩放一样，并且无法再次获得所需的页面大小。

有没有办法在 webview 布局中精确定位 html 页面？也许我应该以其他方式将页面分成两列？

【问题讨论】：

标签： android html css webview

【解决方案1】：

Css 规范定义元素的维度可以用小数表示，但似乎 webkit 只需要整数。
如果 WebView 以如下定义的距离滚动，页面看起来很整齐。

 if (areThereTwoColumns) {
     view.loadUrl("javascript:(function(){mySheet.insertRule('html{ " +
                 "height: " + heightPage / density_ + "px;" +
                 " -webkit-column-width: "+ (widthPage - gap) / 2 / density_ + "px; " +
                 "-webkit-column-gap: " + gap / density_ + "px;" +
                 " font-size: " + textSize + ";}', ruleIndex)})()");
    // distance of scrolling:
    scrollDistance = 2 * ((int)((widthPage - gap) / 2 / density_)  * density_  +
                        (int)(gap / density_) * density_ );

 } else { ......  }


 // myView.scrollTo((int)(scrollDistance * countPages), 0) etc

我不确定找到的解决方案是最好的，但它对我有用。如果有人提出更好的建议，我将不胜感激。

它仅适用于 SDK 16 (tvdpi)：

 areThereTwoColumns = areThereTwoColumns && getApplicationContext()
       .getResources().getConfiguration()
          .orientation == Configuration.ORIENTATION_LANDSCAPE; 
 // ............omitted
 if (Build.VERSION.SDK_INT == 16 && getResources().getDisplayMetrics()
                              .densityDpi == DisplayMetrics.DENSITY_TV)
   {
      scrollDistance = 2 * ((int)((widthPage - gap) / 2 / density_ +.5f)  * density_ +
                            (int)(gap / density_+.5f) * density_ );
   }
 // .............omitted

，在其他情况下，必须使用其他任何东西，因为即使在一列的情况下，显示页面也会失真（tvdpi！）样例：

int countGates = Math.round((float)myView.computeHorizontalScrollRange() / (widthPage + ((areThereTwoColumns)?gap:0)));
scrollDistance = (float) lengthMyView / countGates;

【讨论】：