2016-04-11 62 views
4

我使用WebView在我的應用程序中顯示html內容以閱讀電子書但開發它我遇到了以下問題。
我解析電子書並在html字符串中結束解析的內容,在webview加載此html-string之後。
將HTML內容放置到WebView內部的兩列中

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)」和內容的水平放置,通過使用HTML格式實現/添加樣式提出了通過Uday Sravan K 。感謝對他說:

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內容的塊( ').getMeasuredWidth(' )的WebView的大小寬度。 當html內容放置在一列中時,對於任何頁面方向,它都可以很好地模擬任何模擬器。但是,當我將html放在兩列中時,生成的頁面的寬度可能與寬度WebView略有不同。當設備的密度不是整數時會發生這種情況。在殼體的兩列

翻頁是「myWebView.scrollTo((myWebView +間隙)的寬度* countPages,0)」和一點一點此不同累加而一些位移變得從側面示出了一個作爲僞像的頁面。這是因爲顯示頁面的寬度不再與WebView的寬度一致。鄰居頁面的邊緣不應該是可見的,但它會進入顯示的區域。

予採取,例如,的Nexus 7具有1280x800pxs,7英寸,tvdpi(Genymotion仿真器): 在橫向模式我在web視圖web的內容加載已長度等於360276px(由 'computeHorizo​​ntalScrollRange()' 的返回WebView)並顯示佈局的寬度等於1238px。

注: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網頁內容的長度等於267453px,html-content有一個等於200904px(保留的比例),顯示webview的寬度爲1238px,差距爲28px(webview滾動的距離爲1266px)。
在這種情況下,鄰居頁面的邊緣變得可見,這個區域隨着翻頁而增加。 我試圖通過重新加載html內容來調整html內容的大小,添加了body-tag'zoom'屬性的樣式,但它會產生意想不到的結果:因此,可能會更改顯示字體大小,就好像所有內容都已縮放,並且不能再次獲得期望的頁面大小。

有沒有一種方法來精確定位webview佈局內的html頁面?也許我應該用其他方式將頁面分成兩列?

回答

0

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;