1. 程式人生 > >Android webView載入html程式碼詳解

Android webView載入html程式碼詳解

最近的專案需要做一個如同微信中的騰訊新聞的功能,如下圖所示:

直接上關鍵程式碼:

佈局:

Xml程式碼 收藏程式碼
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:background="@color/contact_bg_gray"
  6.     android:orientation="vertical">
  7.     <TextView
  8.         android:id="@+id/time"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:layout_centerHorizontal="true"
  12.         android:layout_gravity="center_horizontal"
  13.         android:layout_marginTop
    ="10dip"
  14.         android:background="@drawable/big_corner_time"
  15.         android:gravity="center"
  16.         android:paddingBottom="2dip"
  17.         android:paddingLeft="10dip"
  18.         android:paddingRight="10dip"
  19.         android:paddingTop="2dip"
  20.         android:text="9:32"
  21.         android:textColor="@android:color/white"
  22.         android:textSize="18sp"/>
  23.     <WebView
  24.         android:id="@+id/webView1"
  25.         android:layout_width="wrap_content"
  26.         android:layout_height="wrap_content"
  27.         android:layout_below="@+id/time"
  28.         android:layout_centerHorizontal="true"
  29.         android:layout_marginTop="8dip"
  30.         android:background="@color/contact_bg_gray"
  31.         android:layerType="software"/>
  32. </RelativeLayout>

 顏色請自行替換。

Java程式碼 收藏程式碼
  1.         mWebView = (WebView) findViewById(R.id.webView1);  
  2. //        holder.mWebView.loadUrl("http://www.baidu.com/");
  3.         WebSettings settings = mWebView.getSettings();  
  4. //
  5.         settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);  
  6.         settings.setAppCacheEnabled(true);  
  7.         int width = FAMobileApp.getDeviceWidth() - (int) (16 * FAMobileApp.getDensity());  
  8.         int scaleInPercent = width * 100 / 322;  
  9.         System.out.println("scaleInPercent:"+scaleInPercent);  
  10.         mWebView.setInitialScale(scaleInPercent);  
  11.     mWebView.setBackgroundColor(mContext.getResources().getColor(  
  12.                 R.color.contact_bg_gray));  
  13.         mWebView.setWebViewClient(new WebViewClient() {  
  14.             @Override
  15.             publicboolean shouldOverrideUrlLoading(WebView view, String url) {  
  16.                 System.out.println("shouldOverrideUrlLoading:"+url);  
  17.                 //此處可作轉向操作
  18.                 view.loadUrl(url);  
  19.                 returntrue;  
  20.             }  
  21.             @Override
  22.             publicvoid onLoadResource(WebView view, String url) {  
  23.                 System.out.println("onLoadResource:"+url);  
  24.             }  
  25.             @Override
  26.             public WebResourceResponse shouldInterceptRequest(WebView view,  
  27.                     String url) {  
  28.                 System.out.println("shouldInterceptRequest:"+url);  
  29.                 //TODO Here we can replace the url
  30.                 if (url.endsWith("cj_all_picture.png")) {  
  31. //                    try {
  32. //                        InputStream is = mContext.getResources().getAssets().open("cj_all_tab_bg.png");
  33. //                        WebResourceResponse response = new WebResourceResponse("image/gif", "utf-8", is);
  34. //                        return response;
  35. //                    } catch (IOException e) {
  36. //                        // TODO Auto-generated catch block
  37. //                        e.printStackTrace();
  38. //                    }
  39.                 }  
  40.                 returnnull;  
  41.             }  
  42.         });  
  43.         load(holder.mWebView);  
  44.     privatevoid load(WebView mWebView) {  
  45.         try {  
  46.             String basePath = "/data/data/com.xxx.xx/test";  
  47.             StringBuilder content = new StringBuilder();  
  48.             String path = basePath + "cjsd.html";  
  49.             fis = new FileInputStream(path);  
  50.             byte[] buffer = newbyte[1024];  
  51.             int len = 0;  
  52.             while ((len = fis.read(buffer)) != -1) {  
  53.                 content.append(new String(buffer, 0, len, "gbk"));  
  54.             }  
  55.             // System.out.println(content);
  56.             mWebView.getSettings().setDefaultTextEncodingName("utf-8");  
  57.             String baseUrl = "file://" + basePath;  
  58.             mWebView.loadDataWithBaseURL(baseUrl, content.toString(), "text/html""utf-8",  
  59.                     null);  
  60.         } catch (FileNotFoundException e) {  
  61.             // TODO Auto-generated catch block
  62.             e.printStackTrace();  
  63.         } catch (IOException e) {  
  64.             // TODO Auto-generated catch block
  65.             e.printStackTrace();  
  66.         }  
  67.     }  

使用的cjsc.html如下

Html程式碼 收藏程式碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <head>
  3. <style>
  4. <!--  
  5. body{text-align:center;  
  6.       margin:0 0;  
  7.       padding:0px;  
  8.       }  
  9.         .contentbg{margin:0 auto;  
  10.                    width:322px;  
  11.                    height:382px;  
  12.                    }  
  13.             .content{  
  14.                      margin:0px auto;  
  15.                      width:291px;  
  16.                      height:369px;  
  17.                      background:#FFFFFF;  
  18.                     border-radius:10px;  
  19.                     border:#c6c6c6 solid 2px;  
  20.                    -moz-box-shadow:0px 2px 3px #999;                  
  21.                    -webkit-box-shadow:0px 2px 3px #999;       
  22.                    box-shadow:0px 2px 4px #999;   
  23.                      }  
  24.                   .content_abg{  
  25.                             margin:0;  
  26.                              width:293px;  
  27.                              height:175px;  
  28.                              padding-top:11px  
  29.                              }   
  30.                       .content_a{background:url(cj_all_picture.png) no-repeat;  
  31.                                   width:267px;  
  32.                                   height:151px;  
  33.                                   margin-left:13px;  
  34.                                   margin-bottom:14px;  
  35.                                   }  
  36.                    .content_bbg{  
  37.                             margin:0;  
  38.                              width:293px;  
  39.                              height:196px;  
  40.                             clear:both;  
  41.                              }  
  42.                      .content_b_line{width:291px;  
  43.                                height:1px;  
  44.                                background:#e6e6e6;  
  45.                                 }  
  46.                      .content_b{width:288px;  
  47.                                 height:63px;  
  48.                                 margin:0;  
  49.                                 overflow:hidden;  
  50.                                 }  
  51.                              .content_b1{width:200px;  
  52.                                 height:63px;  
  53.                                 margin:0;  
  54.                                 float:left;  
  55.                                 padding-left:13px;  
  56.                                 padding-top:9px;  
  57.                                 color:#000000;  
  58.                                 font-size:14px;  
  59.                                 text-align:left;  
  60.                                 font-family:"微軟雅黑";  
  61.                                 line-height:12px;  
  62. 相關推薦

    Android webView載入html程式碼

    最近的專案需要做一個如同微信中的騰訊新聞的功能,如下圖所示: 直接上關鍵程式碼: 佈局: Xml程式碼  <?xmlversion="1.0"encoding="utf-8"?> <RelativeLayoutxmlns:android="htt

    Android webView載入html程式碼 不執行js方法的情況

    頁面中有一個webView顯示後臺返回的富文字資料,富文字資料是一串html程式碼,但是並沒有<html><body>這些標籤,webView不做任何處理,使用 webView.loadData(html, "text/html; charset=U

    Android webview載入html程式碼 上下左右有白邊問題

    直接開始後臺返回一串html程式碼字串 然候客戶端用webview做展示  別的都正常  只是四周會有白邊 網上找的各種方法都不好使 如下圖後來給webview添加了兩個setting表框變窄了 但是還

    Android TextView載入html圖片

           學Android的時候突然想到一個問題:怎麼用TextView控制元件顯示帶有格式的文字,可否使用Html佈局?查了下Android 幫助文件,其提供了android.text.Html類和Html.ImageGetter、Html.TagHandler介

    Android WebView 載入HTML程式碼

    <uses-permission android:name="android.permission.INTERNET" /> <?xml version="1.0" enco

    android 使用webview載入html程式碼亂碼問題

    使用webview.loadData(url,"text/html","UTF-8")方法載入html亂碼,可以嘗試改用:webview.loadDataWithBaseURL(null,url,"text/html","UTF-8",null);方法

    Android WebView載入HTML表單並通過javascript提交

    分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

    android WebView載入html 處理的圖片過寬的工具類 (過寬的控制到100%,正常尺寸的不放大)

    參考 部落格: 小曾同志的專欄: https://blog.csdn.net/u010023795/article/details/53509495 工具類 import org.jsoup.Jsoup; import org.jsoup.nodes.Document; impor

    android webview載入html圖片自適應手機螢幕大小&點選檢視大圖

    我們在開發中,顯示資訊詳情時,一般後臺會給出html文字,在Android端一般採用webview控制元件來展示,但是後臺給出的html文字一般是給電腦端用的,沒有自適配手機,導致手機端圖片顯示過大,需要左右移動來檢視全圖。下面給出幾種實用方法,達到在手機端用webvi

    webview載入html程式碼(包含播發騰訊視訊的分享程式碼

    騰訊視訊下方的分享點選之後會出現三個不同的分享地址,如圖:,第一個好像是基於falsh的,第二個是基於falsh播放的,由於android4.+不再支援falsh外掛,所以這兩種方式都不能使用,第一種會直接白屏,第二種會顯示外掛無法載入,第三種可以正常使用。 webView = (W

    Android WebView載入Html文字不能適配,以及圖片中間有空白的問題

    1.WebView載入Html文字的正確方式 webView.loadData(html, "text/html; charset=utf-8", "utf-8"); 2.但是如果文字中帶圖片的

    Android webview載入html出現空白問題

    wv.loadUrl(“http://xxx.xxx.xxx:1025/api/index.php?m=&c=Api“); wv.setWebChromeClient(new WebChro

    Android webview載入html自適應螢幕

    webView.getSettings().setJavaScriptEnabled(true); webView.getSettings().setCacheMode(WebSettings.LOAD

    Android webview載入Html頁面,傳參到Html並獲取返回值

    1.Android端程式碼 public class MainActivity extends Activity { private static final String LOGTAG = "MainActivity"; @SuppressLint("Ja

    Android webView載入html頁面不顯示(顯示白屏)

    Android webView載入網頁不顯示(顯示白屏) 最近專案上線後發現了一個bug,某些使用者打不開webView載入的靜態網頁,大部分使用者卻是可以,起初以為是手機原因,後來測試發現,只要是

    Android + Appium 自動化測試完整的環境配置及程式碼

    環境的的搭建 參考大神部落格:https://www.cnblogs.com/fnng/p/4540731.html 該部落格有一套詳細的入門教程,奈何時間有點久遠有些東西不能用了,但是參考價值還是有滴。 1.安裝各種SDK jre必須1.8以上  AndroidSDK需要8.0以下的測試,

    Android四大元件之一 廣播接受者入門(附程式碼

    BroadCastReceiver 廣播機制 BroadcastRecevier是Android的四大元件之一。一、廣播的分類: 1.普通廣播        當手機應用程式中一旦觸發了某件事情,那麼就會發送一段廣播,這段廣播時非同步的,能夠被所有的廣播監聽者接收,進行處理。

    AndroidWebView載入Html中的圖片新增點選事件

        基本的思路: (1)WebView來載入HTML。 (2)向HTML中注入JavaScript,利用JavaScript來呼叫Android中的方法(執行一些跳轉的操作等等)。  首先你必須有一個HTML或者是一個地址,或者是存到本地的一個檔案。我這裡使用的是存到本

    Android WebView載入最基本的程式碼

    public class WebViewActivity extends Activity { @BindView(R.id.webview) WebView mWebView; private String url; @Ov

    Android Webview 載入外部html時選擇載入本地的js,css等資原始檔

    在使用WebView載入網頁的時候,有一些固定的資原始檔如js的jquery包,css,圖片等資源會比較大,如果直接從網路載入會導致頁面載入的比較慢,而且會消耗比較多的流量。所以這些檔案應該放在assets裡面同app打包。 要解決這個問題需要用到API 11(HONEYC