android - 将 HTML 内容放入 WebView 中的两列中

Question

我在阅读电子书的应用程序中使用 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)”水平移动页面，内容的水平放置是通过使用 Uday Sravan K 提出的 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 宽度大小的 block ('.getMeasuredWidth()')。 当 html-content 放在一列中时，对于任何页面方向，它在任何模拟器中看起来都不错。但是，当我将 html 放在两列中时，生成的页面的宽度可能与 WebView 的宽度略有不同。当设备的密度不是整数时会发生这种情况。

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

我举个例子，Nexus 7 有 1280x800pxs，7 英寸，tvdpi(Genymotion 模拟器): 在横向模式下，我在 WebView 中加载的网络内容的长度等于 360276px(由 WebView 的“computeHorizo​​ntalScrollRange()”返回)，显示布局的宽度等于 1238px。

注意: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，间隙为 28px(webview 滚动距离为 1266px)。
在这种情况下，相邻页面的边缘变得可见，这个区域随着我翻阅页面而增加。 我试图通过添加 body-tag 'zoom' 属性样式重新加载 html-content 来调整 html-content 的大小，但它给出了意想不到的结果:因此，可能会更改显示字体大小，就好像所有内容都被缩放一样，无法再次获得所需的页面大小。

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

Answer 1

Css Specification中定义元素的维度可以用小数表示，但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;