Android webView加载html代码详解

最新推荐文章于 2024-07-18 14:25:13 发布
最新推荐文章于 2024-07-18 14:25:13 发布
阅读量9.9k 收藏 2
点赞数 12
分类专栏： Android>>基础

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


使用WebView加载HTML资源

 

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

 

直接上关键代码：

布局：

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>  

 图片资源请自行替换


业余选手
关注
专栏目录
android webview加载html代码
pxcz110112的博客
06-12 6797
商城项目里，商品详情是后台给的html代码，需要加载到页面上 //在内置浏览器打开页面 mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { vi...
android webview加载进度条,Android Webview添加网页加载进度条实例详解
weixin_39641334的博客
05-26 1071
最近在android项目中使用webview嵌套了一个抽奖活动网页，活动上线，运行良好(改了N次需求和突发bug)，还好这种模式的活动，只需要修改网页，不需要重新打包发布市场，这也是这种模式开发的优势之一。后来据产品哥反馈说加载网页无进度提示，好吧，这个当时真没考虑这么多，这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点...1、首先自定义一个WebView控件/*** 带进度条的...
详解Android WebView加载html片段
01-04
这里我先简单描述一下需求：服务器返回的是html页面的一部分带有标签的内容。 解决的思路是：将服务器返回的内容片段拼凑成一个完整的页面。 下面直接上核心代码： 这里是WebView一些配置 WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setDomStorageEnabled(true); settings.setUseWideViewPort(true); settings.setLoadWithOverviewMode(true); webView.s
Android WebView加载html 代码
yangjunjin的博客
05-28 429
private void setWebString(WebView webView, String content) { StringBuilder sb = new StringBuilder(); sb.append("<html>"); sb.append("<head>"); sb.append("<title>欢迎您</title>"); sb.append("...
Android使用webView加载html页面的详细步骤
最新发布
chinaherolts2008的博客
07-18 111
Android WebView是Android开发中提供的一种用于显示网页内容的组件,它可以加载网页的url链接,也可以加载本地的html文件,下面这篇文章主要给大家介绍了关于Android使用webView加载html页面的相关资料,需要的朋友可以参考下。到此这篇关于Android使用webView加载html页面的文章就介绍到这了,更多相关Android用webView加载html页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持。下载sdk:腾讯浏览服务-SDK下载。
Android webview加载html代码
bloom的专栏
07-25 1480
在开发过程中展示一些文字和图片，不需要交互的东西通常后台会返回html代码，我们只要用webview加载代码就可以了，但是获取到后有许多特殊符号是没法识别的，需要我们把代码中的特殊符号替换掉才能加载成功。 常见的特殊符号如下，如果没有的好可以百度一下，好多 具体的代码如下： WebSettings ws = webView.getSettings(); ws.setUs...
Android WebView加载html
mds0517的博客
06-15 440
加载本地html支持html里加载assert下的文件，支持java调用html里的js方法。activity_w1.xml创建。创建html文件和图片目录。book.html内容。1.加载网页html。2.加载本地html。创建assert目录。
Android Webview添加网页加载进度条实例详解
09-02
然而，为了让用户有更好的体验，通常我们需要在Webview加载网页的过程中显示加载进度条，以便用户知道网页的加载状态。本文将详细介绍如何在Android Webview中添加网页加载进度条的实例。 首先，我们需要创建一个...
详解Android Webview加载网页时发送HTTP头信息
08-30
Android Webview 加载网页时发送 HTTP 头信息详解 Android Webview 是 Android 系统中一个非常重要的组件，用于显示网页内容。在加载网页时，Webview 会自动发送 HTTP 头信息，这些头信息对于服务器端程序的控制和...
Android WebView 加载HTML代码
SongYuLong
08-24 3422
<uses-permission android:name="android.permission.INTERNET" /><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schem
Android 中的 WebView实现Html5标签使用
12-13
案列主要介绍WebView加载带有HTML5的视频标签的网页，点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边，防止WebView内存泄漏等。
使用WebView加载本地html操作本地数据
08-04
本程序使用webview控件，加载本地写的Html文件，操作本地数据。包含js调用java方法，以及java调用js方法，实现数据的传递。
安卓如何使用WebView组件加载HTML代码
koterror的专栏
08-06 1083
下面通过一个具体的实例来说明如何使用WebView组件加载HTML代码。      例14.8在Eclips中创建Android项目，名称为14.8,实现应用Web View组件加载使用HTML代码添加的帮助信息。      （1）修改新建项目的res\Iayout目录下的布局文件main.xml，将默认添加的TextView组件删除，然后添加一个WebView组件，关键代码如下：
Android 使用webView加载html页面
qq_19688207的博客
04-19 2212
AndroidManifest.xml配置权限。Application.java设置初始化。放置在libs文件夹，引用。
webview显示html代码（可用于新闻浏览界面）
许佳佳的博客
10-04 7951
  近期在制作校园app的新闻界面，自然也要设计到新闻浏览的一个问题，还是先展示一下效果：     使用WebView来做新闻的显示特别简单，只需要从该网站获取到新闻的html代码用String存储，随后使用WebView显示便可以了。   当然，对于要求比较高的同学来讲，还是可以通过部分获取内容的方式来实现此界面的。但是此方法涉及了较多的数据处理以及xml设计等，本人在审美方面实...
android 编写html代码,Android应用开发Android WebView 加载HTML代码
weixin_39568597的博客
05-26 222
本文将带你了解Android应用开发Android WebView 加载HTML代码，希望本文对大家学Android有所帮助。Android WebView 加载HTML代码package shortcut.song.com.myapplication;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;...
用WebView 装载 HTML 代码
daozhongyang的专栏
07-19 3415
WebView 不仅可以通过 URL 装载网页，也可以直接装载 HTML 代码，WebView 类有两个方法可以装载 HTML 代码，如下： loadData() 方法的参数定义如下： data : HTML代码 mimeType: Mime类型， 一般为 text/html encoding: HTML代码的编码， 例如： GBK, uft-8loadDataWithBaseU
android如何展示html代码,android中用webview展示Html代码
weixin_39628864的博客
05-26 479
WebView中提供了public voidloadDataWithBaseURL (StringbaseUrl,Stringdata,StringmimeType,Stringencoding, StringhistoryUrl);方法可以用来加载String中存放的html代码。baseUrl为默认的html代码，data为要加载的html代码，mimeType为文本类型，en...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值