Geek Answers Handbook

Placing HTML content in two columns inside a WebView

I use WebView to display html content in my e-book reader, but as I developed it, I ran into the following problem.
I parse the e-book and end the parsed content in the html line after the webview loads this html line.

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

I moved the pages horizontally via 'myView.scrollTo (width myView * countPages, 0)', and the content horizontal placement is achieved by using the format / style adding html, proposed Uday K Sravan . Thanks to him:

  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(( myWebView + gap) * countPages, 0)", , , , WebView. , .

, , Nexus 7 1280x800pxs, 7 , tvdpi ( Genymotion): - WebView 360276px ( "computeHorizontalScrollRange()" WebView), 1238px.

note: 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>

Html-, 'document.body.scrollWidth' 270630px. 1,33. , " webview/ webview" .
. - WebView 267453px, html- 200904px ( ), webview 1238px, - 28px ( webview 1266px).
, , . html-, html-, body-tag 'zoom', : , , , .

html- -? , ?

+4
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;
0

More articles:


All Articles