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

Android中WebView的使用简介

2016-10-27 23:11 393 查看

WevView是一个可以显示网页的控件，它采用WebKit渲染引擎来显示网页。由于在实际开发中并未使用过WebView，所以对WebView并未有经验之谈，还有很多没有整理不打算写了，以后实际开发中在整理吧。本文参考慕课网、Android
API。

1、基本用法

首先添加网络访问权限：

<code class="hljs applescript has-numbering"><uses-permissionandroid:<span class="hljs-property">name</span>=<span class="hljs-string">"android.permission.INTERNET"</span>/></code>

布局文件，添加WebView控件：

<code class="hljs xml has-numbering"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
 android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:orientation="horizontal" >

<TextView
 android:id="@+id/tev_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="30dp"
android:text="title" />

<ImageView
 android:id="@+id/img_refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:src="@drawable/icon_refresh_focus" />
</LinearLayout>

<ProgressBar
 android:id="@+id/progressBar"
android:layout_width="match_parent"
android:layout_height="10dp"
style="?android:attr/progressBarStyleHorizontal"
/>

<WebView
 android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />

</LinearLayout>

MainActivity.<a target=_blank href="http://lib.csdn.net/base/javaee" class="replace_word" title="Java EE知识库" target="_blank" style="color:#df3434; font-weight:bold;">Java</a>

</code><pre class="prettyprint" name="code"><code class="hljs java has-numbering">@SuppressLint("JavascriptInterface")
public class MainActivity extends Activity {

TextView tev_title;
ImageView img_refresh;
ProgressBar progressBar;
WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
webView = (WebView) findViewById(R.id.webView);
// 默认使用系统浏览器加载网页
webView.loadUrl("h://www.taobao.com/");
//启用JavaScript
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 使用APP加载网页
view.loadUrl(url);
return true;
}

@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
// 加载本地的错误网页
// 可以改成本地xml
view.loadUrl("file:///android_asset/error.html");
super.onReceivedError(view, errorCode, description, failingUrl);
}

});

webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onReceivedTitle(WebView view, String title) {
// webview添加title
tev_title.setText(title);
super.onReceivedTitle(view, title);
}

@Override
public void onProgressChanged(WebView view, int newProgress) {
//设置进度条
progressBar.setProgress(newProgress);
super.onProgressChanged(view, newProgress);
}

});

img_refresh.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// 刷新webview
webView.reload();
}
});

// webview 下载文件
webView.setDownloadListener(new DownloadListener() {
@Override
public void onDownloadStart(String url, String arg1, String arg2,
String arg3, long arg4) {

System.out.println("onDownloadStart:" + url);

// 根据url下载文件，非系统浏览器
url.endsWith(".apk");
// 下载逻辑...

// 使用系统浏览器下载文件
Uri uri = Uri.parse(url);
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
}
});
}

private void initView() {
webView = (WebView) findViewById(R.id.webView);
tev_title = (TextView) findViewById(R.id.tev_title);
img_refresh = (ImageView) findViewById(R.id.img_refresh);
progressBar = (ProgressBar) findViewById(R.id.progressBar);
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// Check if the key event was the Back button and if there's history
if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
webView.goBack(); //goBack()表示返回WebView的上一页面 
return true;
}
return super.onKeyDown(keyCode, event);
}

}</code>2、与JavaScript互相调用

与JavaScript互相调用，需要创建JavaScript代码和客户端代码之间的接口类进行交互操作。

<code class="hljs java has-numbering"><span class="hljs-javadoc">/**
* 创建您的JavaScript代码和客户端代码之间的接口类
*/</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">JavaScriptInterface</span> {</span>
Context mContext;

<span class="hljs-javadoc">/** Instantiate the interface and set the context */</span>
<span class="hljs-keyword">public</span> <span class="hljs-title">JavaScriptInterface</span>(Context c) {
mContext = c;
}

<span class="hljs-javadoc">/** Show a toast from the web page */</span>
<span class="hljs-annotation">@JavascriptInterface</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">show</span>(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}</code>

MainActivity.java

<code class="hljs java has-numbering"><span class="hljs-comment">// webview与JavaScript的调用（代码混淆的时候 java类需要keep掉，即不能被混淆， 不然调用失败）</span>
webView = (WebView) findViewById(R.id.webView);
btn_androidToJavaScript= (Button) findViewById(R.id.btn_toJs);
<span class="hljs-comment">//启用JavaScript</span>
webView.getSettings().setJavaScriptEnabled(<span class="hljs-keyword">true</span>);
webView.loadUrl(<span class="hljs-string">"file:///android_asset/index.html"</span>);
<span class="hljs-comment">// 设置编码</span>
webView.getSettings().setDefaultTextEncodingName(<span class="hljs-string">"utf-8"</span>);
<span class="hljs-comment">// 添加一个对象, 让JS可以访问该对象的方法, 该对象中也可以调用JS中的方法</span>
webView.addJavascriptInterface(<span class="hljs-keyword">new</span> JavaScriptInterface(<span class="hljs-keyword">this</span>), <span class="hljs-string">"android"</span>);
btn_androidToJavaScript.setOnClickListener(<span class="hljs-keyword">new</span> View.OnClickListener() {

<span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onClick</span>(View arg0) {
<span class="hljs-comment">//调用js的jsShow()2方法</span>
webView.loadUrl(<span class="hljs-string">"javascript:jsShow2()"</span>);
}
});</code>

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>My JSP 'index.jsp' starting page<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">jsShow</span><span class="hljs-params">()</span>{</span>
<span class="hljs-comment">//调用android的show方法</span>
android.show(<span class="hljs-string">"JavaScript to Android!"</span>);
}
<span class="hljs-comment">//将由android调用</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">jsShow2</span><span class="hljs-params">()</span>{</span>
document.getElementById(<span class="hljs-string">"id_a"</span>).innerHTML=<span class="hljs-string">"Android to JavaScript!"</span>;
}

</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>

<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-comment"><!--调用android中的show（）方法 --></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"jsShow()"</span>></span>This is my JSP page! <span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"id_a"</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code>

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

标签： android android应用

相关文章推荐

新的分享

章节导航