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

Question

我使用 WebView 在我的应用程序中显示 html 内容来阅读电子书，但在开发它时我遇到了以下问题。
在 web 视图加载此 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(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 的块大小宽度（'.getMeasuredWidth()'）。当 html-content 放置在一列中时，对于任何页面方向的任何模拟器来说，它看起来都很好。但是，当我将 html 放置在两列中时，生成的页面的宽度可能与 WebView 的宽度略有不同。当设备的密度不是整数时，就会发生这种情况。

在两列的情况下翻转页面是“ myWebView.scrollTo((myWebView的宽度+间隙) * countPages, 0) ”，并且这种不同一点一点地累积，同时一些位移显示为来自页面一侧的伪影。这是因为显示页面的宽度不再与WebView的宽度一致。相邻页面的边缘不应该是可见的，但它进入了显示区域。

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

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

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

Answer 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;