使用WebView加载HTML资源

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

直接上关键代码：

布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/contact_bg_gray"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dip"
        android:background="@drawable/big_corner_time"
        android:gravity="center"
        android:paddingBottom="2dip"
        android:paddingLeft="10dip"
        android:paddingRight="10dip"
        android:paddingTop="2dip"
        android:text="9:32"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

    <WebView
        android:id="@+id/webView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/time"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dip"
        android:background="@color/contact_bg_gray"
        android:layerType="software" />

</RelativeLayout>

 颜色请自行替换。

        mWebView = (WebView) findViewById(R.id.webView1);
//        holder.mWebView.loadUrl("http://www.baidu.com/");
        WebSettings settings = mWebView.getSettings();
//
        settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
        settings.setAppCacheEnabled(true);
        int width = FAMobileApp.getDeviceWidth() - (int) (16 * FAMobileApp.getDensity());
        int scaleInPercent = width * 100 / 322;
        System.out.println("scaleInPercent:"+scaleInPercent);
        mWebView.setInitialScale(scaleInPercent);

    mWebView.setBackgroundColor(mContext.getResources().getColor(
                R.color.contact_bg_gray));
        mWebView.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                System.out.println("shouldOverrideUrlLoading:"+url);
                //此处可作转向操作
                view.loadUrl(url);
                return true;
            }
            @Override
            public void onLoadResource(WebView view, String url) {
                System.out.println("onLoadResource:"+url);
            }
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view,
                    String url) {
                System.out.println("shouldInterceptRequest:"+url);
                //TODO Here we can replace the url
                if (url.endsWith("cj_all_picture.png")) {
//                    try {
//                        InputStream is = mContext.getResources().getAssets().open("cj_all_tab_bg.png");
//                        WebResourceResponse response = new WebResourceResponse("image/gif", "utf-8", is);
//                        return response;
//                    } catch (IOException e) {
//                        // TODO Auto-generated catch block
//                        e.printStackTrace();
//                    }
                }
                return null;
            }
        });
        load(holder.mWebView);

    private void load(WebView mWebView) {


        try {
            String basePath = "/data/data/com.xxx.xx/test";
            StringBuilder content = new StringBuilder();
            String path = basePath + "cjsd.html";
            fis = new FileInputStream(path);
            byte[] buffer = new byte[1024];
            int len = 0;
            while ((len = fis.read(buffer)) != -1) {
                content.append(new String(buffer, 0, len, "gbk"));
            }
            // System.out.println(content);
            mWebView.getSettings().setDefaultTextEncodingName("utf-8");
            String baseUrl = "file://" + basePath;
            mWebView.loadDataWithBaseURL(baseUrl, content.toString(), "text/html", "utf-8",
                    null);
        } catch (FileNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }


    }

使用的cjsc.html如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<style>
<!--
body{text-align:center;
      margin:0 0;
	  padding:0px;
	  }
	  
	
			   
		.contentbg{margin:0 auto;
		           
				   width:322px;
				   height:382px;
				   }
			.content{
			         margin:0px auto;
					 width:291px;
					 height:369px;
					 background:#FFFFFF;
					border-radius:10px;
					border:#c6c6c6 solid 2px;
				   -moz-box-shadow:0px 2px 3px #999;             	
                   -webkit-box-shadow:0px 2px 3px #999;  	
                   box-shadow:0px 2px 4px #999; 
					 
					
					 }
				  .content_abg{
				            margin:0;
						     width:293px;
							 height:175px;
							 padding-top:11px
							 } 
						
			          .content_a{background:url(cj_all_picture.png) no-repeat;
					              width:267px;
								  height:151px;
								  
								  margin-left:13px;
								  margin-bottom:14px;

								  }

                   .content_bbg{
				            margin:0;
						     width:293px;
							 height:196px;
							 
							clear:both;
							 }
					 .content_b_line{width:291px;
					           height:1px;
							   background:#e6e6e6;
								
								
								
								}
						
                     .content_b{width:288px;
					            height:63px;
                                margin:0;
                                overflow:hidden;
								
								
								}
						 
						     .content_b1{width:200px;
					            height:63px;
								margin:0;
								float:left;
								padding-left:13px;
								padding-top:9px;
								color:#000000;
								font-size:14px;
								text-align:left;
								font-family:"微软雅黑";
								line-height:12px;
								
								
							           }		

                                 .content_b1 a:link{
								color:#000000;
								text-decoration:none;				
								}
								        .content_b1 a:visited{
								color:#000000;
								text-decoration:none;
								}		

                                 .content_b1 a:hover{
							
								color: #000000;				
								text-decoration: none;

								}
                                .content_b1_a{
								color:#4e4e4e;
								font-size:13px;
								text-align:left;
								font-family:"微软雅黑";
							
							}		
                                  
                                 .content_b1_a a:link{
								color:#4e4e4e;
								text-decoration:none;				
								}
								        .content_b1_a a:visited{
								color:#4e4e4e;
								text-decoration:none;
								}		

                                 .content_b1_a a:hover{
							
								color: #4e4e4e;				
								text-decoration: none;

								}
                                  .content_b2{float:right;
								             height:60px;
											 width:73px;
											 margin:0px;
											
											 
											 }
											 
                                     .content_b2_a{
								             height:51px;
											 width:51px;
											 margin:6px;
											 background: url(cj_all_icon_xgsg.png);
											 float:left;
											 }
                                       .content_b2_b{
								             height:51px;
											 width:51px;
											 margin:6px;
											 background: url(cj_all_icon_cjkx.png);
											 float:left;
											 }
                                       .content_b2_c{
								             height:51px;
											 width:51px;
											 margin:6px;
											 background: url(cj_all_icon_cjsd.png);
											 float:left;
											 }
											 
                                .content_ba{width:288px;
					            height:63px;
                                margin:0;
								background:#3b94d6;
								
								}
								     .content_b3{width:215px;
					            height:63px;
								margin:0;
								float:left;
								padding-left:13px;
								padding-top:12px;
								color:#000000;
								font-size:19px;
								text-align:left;
								font-family:"微软雅黑";
								line-height:12px;
								
								
							}	
                                 .content_b3 a:link{
								color:#000000;
								text-decoration:none;				
								}
								        .content_b3 a:visited{
								color:#000000;
								text-decoration:none;
								}		

                                 .content_b3 a:hover{
							
								color: #FFFFFF;				
								text-decoration: none;

								}
                                .content_b3_a{
								color:#4e4e4e;
								font-size:13px;
								text-align:left;
								font-family:"微软雅黑";
							}		
                                  
                                 .content_b3_a a:link{
								color:#4e4e4e;
								text-decoration:none;				
								}
								        .content_b3_a a:visited{
								color:#4e4e4e;
								text-decoration:none;
								}		

                                 .content_b3_a a:hover{
							
								color: #FFFFFF;				
								text-decoration: none;

								}
                             





//-->
</style>
<title>长江视点</title>
</head>
<body>



  <div class="contentbg">
   <div class="content">
     <div class="content_abg">
     <a href="#"><div class="content_a"></div></a>

	      
		  <div class="content_bbg">
	           
			   <div class="content_b_line"> </div>
				   
	            <div class="content_b">
                  <div class="content_b1"> <a href="#">长江快讯</a><br />
                      <br />
                      <span class="content_b1_a"><a href="#">A股500点上涨耗尽多方子弹</a></span> </div>
	              <div class="content_b2"> <a href="#">
                    <div class="content_b2_b"> </div>
	                </a> </div>
            </div>
			<div class="content_b_line">  </div>
	            <div class="content_b">
                  <div class="content_b1"> <a href="#">长江快讯</a><br />
                      <br />
                      <span class="content_b1_a"><a href="#">A股500点上涨耗尽多方子弹</a></span> </div>
	              <div class="content_b2"> <a href="#">
                    <div class="content_b2_a"> </div>
	                </a> </div>
            </div>
	            
	            <div class="content_b_line"></div>
	            <div class="content_b">
	              <div class="content_b1">
				  <a href="#">长江快讯</a><br><br>
                     <span class="content_b1_a"><a href="#">A股500点上涨耗尽多方子弹</a></span>
                  </div>
				   <div class="content_b2">
				    <a href="#"><div class="content_b2_c">
					</div> </a>
				   
				   
				   
				   
	            </div> 
	           </div>
			   
	     </div>
	   </div>
     </div>



</body>
</html>

 图片资源请自行替换