Android webView加载html代码详解

转至:http://xwangly.iteye.com/blog/1846387


最近的项目需要做一个如同微信中的腾讯新闻的功能,如下图所示:

 

直接上关键代码:

布局:

Xml代码    收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns: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.   
  8.     <TextView  
  9.         android:id="@+id/time"  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_centerHorizontal="true"  
  13.         android:layout_gravity="center_horizontal"  
  14.         android:layout_marginTop="10dip"  
  15.         android:background="@drawable/big_corner_time"  
  16.         android:gravity="center"  
  17.         android:paddingBottom="2dip"  
  18.         android:paddingLeft="10dip"  
  19.         android:paddingRight="10dip"  
  20.         android:paddingTop="2dip"  
  21.         android:text="9:32"  
  22.         android:textColor="@android:color/white"  
  23.         android:textSize="18sp" />  
  24.   
  25.     <WebView  
  26.         android:id="@+id/webView1"  
  27.         android:layout_width="wrap_content"  
  28.         android:layout_height="wrap_content"  
  29.         android:layout_below="@+id/time"  
  30.         android:layout_centerHorizontal="true"  
  31.         android:layout_marginTop="8dip"  
  32.         android:background="@color/contact_bg_gray"  
  33.         android:layerType="software" />  
  34.   
  35. </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.   
  12.     mWebView.setBackgroundColor(mContext.getResources().getColor(  
  13.                 R.color.contact_bg_gray));  
  14.         mWebView.setWebViewClient(new WebViewClient() {  
  15.   
  16.             @Override  
  17.             public boolean shouldOverrideUrlLoading(WebView view, String url) {  
  18.                 System.out.println("shouldOverrideUrlLoading:"+url);  
  19.                 //此处可作转向操作  
  20.                 view.loadUrl(url);  
  21.                 return true;  
  22.             }  
  23.             @Override  
  24.             public void onLoadResource(WebView view, String url) {  
  25.                 System.out.println("onLoadResource:"+url);  
  26.             }  
  27.             @Override  
  28.             public WebResourceResponse shouldInterceptRequest(WebView view,  
  29.                     String url) {  
  30.                 System.out.println("shouldInterceptRequest:"+url);  
  31.                 //TODO Here we can replace the url  
  32.                 if (url.endsWith("cj_all_picture.png")) {  
  33. //                    try {  
  34. //                        InputStream is = mContext.getResources().getAssets().open("cj_all_tab_bg.png");  
  35. //                        WebResourceResponse response = new WebResourceResponse("image/gif", "utf-8", is);  
  36. //                        return response;  
  37. //                    } catch (IOException e) {  
  38. //                        // TODO Auto-generated catch block  
  39. //                        e.printStackTrace();  
  40. //                    }  
  41.                 }  
  42.                 return null;  
  43.             }  
  44.         });  
  45.         load(holder.mWebView);  
  46.   
  47.     private void load(WebView mWebView) {  
  48.   
  49.   
  50.         try {  
  51.             String basePath = "/data/data/com.xxx.xx/test";  
  52.             StringBuilder content = new StringBuilder();  
  53.             String path = basePath + "cjsd.html";  
  54.             fis = new FileInputStream(path);  
  55.             byte[] buffer = new byte[1024];  
  56.             int len = 0;  
  57.             while ((len = fis.read(buffer)) != -1) {  
  58.                 content.append(new String(buffer, 0, len, "gbk"));  
  59.             }  
  60.             // System.out.println(content);  
  61.             mWebView.getSettings().setDefaultTextEncodingName("utf-8");  
  62.             String baseUrl = "file://" + basePath;  
  63.             mWebView.loadDataWithBaseURL(baseUrl, content.toString(), "text/html""utf-8",  
  64.                     null);  
  65.         } catch (FileNotFoundException e) {  
  66.             // TODO Auto-generated catch block  
  67.             e.printStackTrace();  
  68.         } catch (IOException e) {  
  69.             // TODO Auto-generated catch block  
  70.             e.printStackTrace();  
  71.         }  
  72.   
  73.   
  74.     }  

 

使用的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.   
  3. <head>  
  4. <style>  
  5. <!--  
  6. body{text-align:center;  
  7.       margin:0 0;  
  8.       padding:0px;  
  9.       }  
  10.         
  11.       
  12.                  
  13.         .contentbg{margin:0 auto;  
  14.                      
  15.                    width:322px;  
  16.                    height:382px;  
  17.                    }  
  18.             .content{  
  19.                      margin:0px auto;  
  20.                      width:291px;  
  21.                      height:369px;  
  22.                      background:#FFFFFF;  
  23.                     border-radius:10px;  
  24.                     border:#c6c6c6 solid 2px;  
  25.                    -moz-box-shadow:0px 2px 3px #999;                  
  26.                    -webkit-box-shadow:0px 2px 3px #999;       
  27.                    box-shadow:0px 2px 4px #999;   
  28.                        
  29.                       
  30.                      }  
  31.                   .content_abg{  
  32.                             margin:0;  
  33.                              width:293px;  
  34.                              height:175px;  
  35.                              padding-top:11px  
  36.                              }   
  37.                           
  38.                       .content_a{background:url(cj_all_picture.png) no-repeat;  
  39.                                   width:267px;  
  40.                                   height:151px;  
  41.                                     
  42.                                   margin-left:13px;  
  43.                                   margin-bottom:14px;  
  44.   
  45.                                   }  
  46.   
  47.                    .content_bbg{  
  48.                             margin:0;  
  49.                              width:293px;  
  50.                              height:196px;  
  51.                                
  52.                             clear:both;  
  53.                              }  
  54.                      .content_b_line{width:291px;  
  55.                                height:1px;  
  56.                                background:#e6e6e6;  
  57.                                   
  58.                                   
  59.                                   
  60.                                 }  
  61.                           
  62.                      .content_b{width:288px;  
  63.                                 height:63px;  
  64.                                 margin:0;  
  65.                                 overflow:hidden;  
  66.                                   
  67.                                   
  68.                                 }  
  69.                            
  70.                              .content_b1{width:200px;  
  71.                                 height:63px;  
  72.                                 margin:0;  
  73.                                 float:left;  
  74.                                 padding-left:13px;  
  75.                                 padding-top:9px;  
  76.                                 color:#000000;  
  77.                                 font-size:14px;  
  78.                                 text-align:left;  
  79.                                 font-family:"微软雅黑";  
  80.                                 line-height:12px;  
  81.                                   
  82.                                   
  83.                                        }          
  84.   
  85.                                  .content_b1 a:link{  
  86.                                 color:#000000;  
  87.                                 text-decoration:none;                 
  88.                                 }  
  89.                                         .content_b1 a:visited{  
  90.                                 color:#000000;  
  91.                                 text-decoration:none;  
  92.                                 }         
  93.   
  94.                                  .content_b1 a:hover{  
  95.                               
  96.                                 color: #000000;               
  97.                                 text-decoration: none;  
  98.   
  99.                                 }  
  100.                                 .content_b1_a{  
  101.                                 color:#4e4e4e;  
  102.                                 font-size:13px;  
  103.                                 text-align:left;  
  104.                                 font-family:"微软雅黑";  
  105.                               
  106.                             }         
  107.                                     
  108.                                  .content_b1_a a:link{  
  109.                                 color:#4e4e4e;  
  110.                                 text-decoration:none;                 
  111.                                 }  
  112.                                         .content_b1_a a:visited{  
  113.                                 color:#4e4e4e;  
  114.                                 text-decoration:none;  
  115.                                 }         
  116.   
  117.                                  .content_b1_a a:hover{  
  118.                               
  119.                                 color: #4e4e4e;               
  120.                                 text-decoration: none;  
  121.   
  122.                                 }  
  123.                                   .content_b2{float:right;  
  124.                                              height:60px;  
  125.                                              width:73px;  
  126.                                              margin:0px;  
  127.                                               
  128.                                                
  129.                                              }  
  130.                                                
  131.                                      .content_b2_a{  
  132.                                              height:51px;  
  133.                                              width:51px;  
  134.                                              margin:6px;  
  135.                                              background: url(cj_all_icon_xgsg.png);  
  136.                                              float:left;  
  137.                                              }  
  138.                                        .content_b2_b{  
  139.                                              height:51px;  
  140.                                              width:51px;  
  141.                                              margin:6px;  
  142.                                              background: url(cj_all_icon_cjkx.png);  
  143.                                              float:left;  
  144.                                              }  
  145.                                        .content_b2_c{  
  146.                                              height:51px;  
  147.                                              width:51px;  
  148.                                              margin:6px;  
  149.                                              background: url(cj_all_icon_cjsd.png);  
  150.                                              float:left;  
  151.                                              }  
  152.                                                
  153.                                 .content_ba{width:288px;  
  154.                                 height:63px;  
  155.                                 margin:0;  
  156.                                 background:#3b94d6;  
  157.                                   
  158.                                 }  
  159.                                      .content_b3{width:215px;  
  160.                                 height:63px;  
  161.                                 margin:0;  
  162.                                 float:left;  
  163.                                 padding-left:13px;  
  164.                                 padding-top:12px;  
  165.                                 color:#000000;  
  166.                                 font-size:19px;  
  167.                                 text-align:left;  
  168.                                 font-family:"微软雅黑";  
  169.                                 line-height:12px;  
  170.                                   
  171.                                   
  172.                             }     
  173.                                  .content_b3 a:link{  
  174.                                 color:#000000;  
  175.                                 text-decoration:none;                 
  176.                                 }  
  177.                                         .content_b3 a:visited{  
  178.                                 color:#000000;  
  179.                                 text-decoration:none;  
  180.                                 }         
  181.   
  182.                                  .content_b3 a:hover{  
  183.                               
  184.                                 color: #FFFFFF;               
  185.                                 text-decoration: none;  
  186.   
  187.                                 }  
  188.                                 .content_b3_a{  
  189.                                 color:#4e4e4e;  
  190.                                 font-size:13px;  
  191.                                 text-align:left;  
  192.                                 font-family:"微软雅黑";  
  193.                             }         
  194.                                     
  195.                                  .content_b3_a a:link{  
  196.                                 color:#4e4e4e;  
  197.                                 text-decoration:none;                 
  198.                                 }  
  199.                                         .content_b3_a a:visited{  
  200.                                 color:#4e4e4e;  
  201.                                 text-decoration:none;  
  202.                                 }         
  203.   
  204.                                  .content_b3_a a:hover{  
  205.                               
  206.                                 color: #FFFFFF;               
  207.                                 text-decoration: none;  
  208.   
  209.                                 }  
  210.                                
  211.   
  212.   
  213.   
  214.   
  215.   
  216. //-->  
  217. </style>  
  218. <title>长江视点</title>  
  219. </head>  
  220. <body>  
  221.   
  222.   
  223.   
  224.   <div class="contentbg">  
  225.    <div class="content">  
  226.      <div class="content_abg">  
  227.      <a href="#"><div class="content_a"></div></a>  
  228.   
  229.             
  230.           <div class="content_bbg">  
  231.                  
  232.                <div class="content_b_line"> </div>  
  233.                      
  234.                 <div class="content_b">  
  235.                   <div class="content_b1"> <a href="#">长江快讯</a><br />  
  236.                       <br />  
  237.                       <span class="content_b1_a"><a href="#">A股500点上涨耗尽多方子弹</a></span> </div>  
  238.                   <div class="content_b2"> <a href="#">  
  239.                     <div class="content_b2_b"> </div>  
  240.                     </a> </div>  
  241.             </div>  
  242.             <div class="content_b_line">  </div>  
  243.                 <div class="content_b">  
  244.                   <div class="content_b1"> <a href="#">长江快讯</a><br />  
  245.                       <br />  
  246.                       <span class="content_b1_a"><a href="#">A股500点上涨耗尽多方子弹</a></span> </div>  
  247.                   <div class="content_b2"> <a href="#">  
  248.                     <div class="content_b2_a"> </div>  
  249.                     </a> </div>  
  250.             </div>  
  251.                   
  252.                 <div class="content_b_line"></div>  
  253.                 <div class="content_b">  
  254.                   <div class="content_b1">  
  255.                   <a href="#">长江快讯</a><br><br>  
  256.                      <span class="content_b1_a"><a href="#">A股500点上涨耗尽多方子弹</a></span>  
  257.                   </div>  
  258.                    <div class="content_b2">  
  259.                     <a href="#"><div class="content_b2_c">  
  260.                     </div> </a>  
  261.                      
  262.                      
  263.                      
  264.                      
  265.                 </div>   
  266.                </div>  
  267.                  
  268.          </div>  
  269.        </div>  
  270.      </div>  
  271.   
  272.   
  273.   
  274. </body>  
  275. </html>  

 图片资源请自行替换


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值