1谍倦、關(guān)于WebView的使用：
- 與JS交互
- 撥打電話、發(fā)送短信泪勒、發(fā)送郵件
- 上傳圖片(版本兼容)
- 進度條設(shè)置
- 字體大小設(shè)置
- 返回網(wǎng)頁上一層昼蛀、顯示網(wǎng)頁標題
- 全屏播放網(wǎng)絡(luò)視頻
首頁
2、文章說明
WebView的使用已經(jīng)是老生常談了圆存，看到很多文章說了用法叼旋，但我很少看到全的或者是項目中可以直接使用的，都是看了很多后沦辙，自己把功能都集合在一起夫植。這里是一份比較全面的WebView項目應(yīng)用篇，其中已經(jīng)解決了應(yīng)用時出現(xiàn)的很多bug油讯，希望能對大家有幫助详民。
3、項目地址
4陌兑、內(nèi)容詳細介紹
4.1 電話短信郵件
電話短信郵件&與JS交互測試.png
給WebView設(shè)置WebViewClient：
webView.setWebViewClient(new MyWebViewClient(this));
其中MyWebViewClient內(nèi)容：
/**
* 監(jiān)聽網(wǎng)頁鏈接:
* - 優(yōu)酷視頻直接跳到自帶瀏覽器
* - 根據(jù)標識:打電話沈跨、發(fā)短信、發(fā)郵件
* - 進度條的顯示
* - 加載完成后兔综，添加javascript監(jiān)聽
*/
public class MyWebViewClient extends WebViewClient {
private IWebPageView iWebPageView;
private WebViewActivity activity;
public MyWebViewClient(IWebPageView iWebPageView) {
this.iWebPageView = iWebPageView;
activity = (WebViewActivity) iWebPageView;
}
@SuppressWarnings("deprecation")
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 優(yōu)酷視頻跳轉(zhuǎn)瀏覽器播放
if (url.startsWith("http://v.youku.com/")) {
Intent intent = new Intent();
intent.setAction("android.intent.action.VIEW");
intent.addCategory("android.intent.category.DEFAULT");
intent.addCategory("android.intent.category.BROWSABLE");
Uri content_url = Uri.parse(url);
intent.setData(content_url);
activity.startActivity(intent);
return true;
// 電話谒出、短信、郵箱
} else if (url.startsWith(WebView.SCHEME_TEL) || url.startsWith("sms:") || url.startsWith(WebView.SCHEME_MAILTO)) {
try {
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setData(Uri.parse(url));
activity.startActivity(intent);
} catch (ActivityNotFoundException ignored) {
}
return true;
}
iWebPageView.startProgress();
view.loadUrl(url);
return false;
}
@Override
public void onPageFinished(WebView view, String url) {
if (activity.progress90) {
iWebPageView.hindProgressBar();
} else {
activity.pageFinish = true;
}
if (!CheckNetwork.isNetworkConnected(activity)) {
iWebPageView.hindProgressBar();
}
// html加載完成之后邻奠，添加監(jiān)聽圖片的點擊js函數(shù)
iWebPageView.addImageClickListener();
super.onPageFinished(view, url);
}
// 視頻全屏播放按返回頁面被放大的問題
@Override
public void onScaleChanged(WebView view, float oldScale, float newScale) {
super.onScaleChanged(view, oldScale, newScale);
if(newScale - oldScale > 7) {
view.setInitialScale((int)(oldScale / newScale * 100)); //異常放大笤喳，縮回去。
}
}
}
因為有很多配置碌宴，這里把各個功能模塊通過接口IWebPageView分離了出來杀狡，這樣邏輯更清晰。
4.2 與JS交互
相信大家已經(jīng)看到了上面"----點擊了圖片"的Toast贰镣，這里需要先給WebView設(shè)置JavascriptInterface：
webView.addJavascriptInterface(new ImageClickInterface(this), "injectedObject");
其中ImageClickInterface相關(guān)代碼：
public class ImageClickInterface {
private Context context;
public ImageClickInterface(Context context) {
this.context = context;
}
@JavascriptInterface
public void imageClick(String imgUrl, String hasLink) {
Toast.makeText(context, "----點擊了圖片", Toast.LENGTH_SHORT).show();
// 查看大圖
// Intent intent = new Intent(context, ViewBigImageActivity.class);
// intent.putStringArrayListExtra("imgUrl",imgUrl);
// context.startActivity(intent);
// Log.e("----點擊了圖片 url: ", "" + imgUrl);
}
}
加入監(jiān)聽：
public void addImageClickListener() {
// 這段js函數(shù)的功能就是呜象，遍歷所有的img節(jié)點膳凝，
// 并添加onclick函數(shù)，函數(shù)的功能是在圖片點擊的時候調(diào)用本地java接口并傳遞對應(yīng)src和has_link里的值過去
webView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\");" +
"for(var i=0;i<objs.length;i++)" +
"{" +
"objs[i].onclick=function(){window.injectedObject.imageClick(this.getAttribute(\"src\"),this.getAttribute(\"has_link\"));}" +
"}" +
"})()");
}
我們來看一下網(wǎng)頁對應(yīng)的源碼：
<img src="[./callsms_files/753b877c-c098-43e9-85cc-6df5bbdaaafe](./callsms_files/753b877c-c098-43e9-85cc-6df5bbdaaafe)" style="width: 100%">
大家可能覺得有點怪異..因為這是保存的本地網(wǎng)頁恭陡，如是線上的話蹬音，是這樣：
<img src='[http://7xk154.com1.z0.glb.clouddn.com/article/753b877c-c098-43e9-85cc-6df5bbdaaafe](http://7xk154.com1.z0.glb.clouddn.com/article/753b877c-c098-43e9-85cc-6df5bbdaaafe)' style='width: 100%'>
這里傳遞過去的是一個圖片url的值，沒有的屬性傳過去的則是null休玩。這樣我們就可以對其進行具體的操作了著淆。
4.3 字體大小設(shè)置
/** 設(shè)置字體默認縮放大小(改變網(wǎng)頁字體大小,setTextSize api14被棄用)*/
ws.setTextZoom(100);
其中
100為默認縮放比，通過設(shè)置縮放比來控制字體大小拴疤。
4.4 上傳圖片(版本兼容) & 全屏播放網(wǎng)絡(luò)視頻 & 顯示網(wǎng)頁標題
這里因為篇幅原因永部，里面的代碼很多，就不貼出來了呐矾，大家可以點擊MyWebChromeClient.java苔埋，查看具體代碼。
上傳圖片.png
4.5 返回網(wǎng)頁上一層
返回網(wǎng)頁上一層及退出全屏等操作：
@Overridepublic
boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
//全屏播放退出全屏
if (webChromeClient.inCustomView()) {
hideCustomView();
return true;
//返回網(wǎng)頁上一頁
} else if (webView.canGoBack()) {
webView.goBack();
return true;
//退出網(wǎng)頁
} else {
webView.loadUrl("about:blank");
finish();
}
}
return false;
}
4.6 進度條設(shè)置
這里用的是先加載到90%再加載到100%, 具體為什么相信大家都懂吧...
// 進度條 假裝加載到90%
public void startProgress90() {
for (int i = 0; i < 900; i++) {
final int progress = i + 1;
mProgressBar.postDelayed(new Runnable() {
@Override
public void run() {
mProgressBar.setProgress(progress);
if (progress == 900) {
progress90 = true;
if (pageFinish) {
startProgress90to100();
}
}
}
}, (i + 1) * 2);
}
}
再加載到100%:
// 加載到90%后再加載到100%
public void progressChanged(int newProgress) {
if (progress90) {
int progress = newProgress * 100;
if (progress > 900) {
mProgressBar.setProgress(progress);
if (progress == 1000) {
mProgressBar.setVisibility(View.GONE);
}
}
}
}
5蜒犯、推薦閱讀
如很多細節(jié)不知緣由的查看這里
- https://developer.android.com/reference/android/webkit/WebSettings.html
- http://www.reibang.com/p/32d48ca7d0e0
- http://www.apkfuns.com/android-webview%E4%B8%8Ejavascript%E4%BA%A4%E4%BA%92.html
6组橄、所遇問題
- WebView加載網(wǎng)頁不顯示圖片解決辦法
- webview: 視頻全屏播放按返回頁面被放大的問題
- Failed to init browser shader disk cache.
- EGL_BAD_DISPLAY
- Unknown frame routing id: 3
- 找不到assets目錄下資源：注意assets在哪層文件夾下！與AndroidManifest.xml同級
- 視頻播放寬度比webview設(shè)置的寬度大罚随，超過屏幕：設(shè)置ws.setLoadWithOverviewMode(false);
- onDestroy時的清除資源操作
End
最后再附一遍項目地址??：WebViewStudy
