您的位置：首页 > 移动开发 > Android开发

Android webView加载html代码详解

2016-04-27 17:08 537 查看

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

使用WebView加载HTML资源

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

直接上关键代码：
布局：

Xml代码

<?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>

颜色请自行替换。

Java代码

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如下

Html代码

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

<head>

<style>



</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>

图片资源请自行替换

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航