Android WebView 應(yīng)用界面開(kāi)發(fā)教程
WebView組件本身就是一個(gè)瀏覽器實(shí)現(xiàn),Android5.0增強(qiáng)的WebView基于Chromium M37,直接支持WebRTC、WebAudio、WebGL。開(kāi)發(fā)者可以直接在WebView中使用聚合(Polymer)和Material設(shè)計(jì)。
一.WebView瀏覽網(wǎng)頁(yè)(加載線上URL)
WebView提供了很多方法執(zhí)行瀏覽器操作,常用方法如下:
void goBack():后退
void goForward():前進(jìn)。
void goBackOrForward(int step):step為正表示前進(jìn),step為負(fù)表示后退。
void loadUrl(String url):加載指定URL對(duì)應(yīng)的網(wǎng)頁(yè)。
boolean zoomIn():放大網(wǎng)頁(yè)。
boolean zoomOut():縮小網(wǎng)頁(yè)。
實(shí)例:迷你瀏覽器
該實(shí)例包含兩個(gè)界面,第一個(gè)界面包括輸入網(wǎng)址和打開(kāi)網(wǎng)址,第二個(gè)界面包含一個(gè)WebView,用于顯示第一個(gè)界面輸入的URL對(duì)應(yīng)的界面。程序代碼如下:
第一個(gè)界面
public class MainActivity extends AppCompatActivity { private EditText mEditUrl; private Button mBtnOpen; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mEditUrl = (EditText) findViewById(R.id.edit_url); mBtnOpen = (Button) findViewById(R.id.btn_open); mBtnOpen.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MainActivity.this, WebViewActivity.class); String url = mEditUrl.getText().toString(); intent.putExtra("url", url); startActivity(intent); } }); } }
這個(gè)界面很簡(jiǎn)單,一個(gè)輸入框,一個(gè)按鈕,分別用于輸入網(wǎng)址和打開(kāi)WebView。
第二個(gè)界面
public class WebViewActivity extends AppCompatActivity { private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_web_view); mWebView = (WebView) findViewById(R.id.web_view); Intent intent = getIntent(); String url = intent.getStringExtra("url"); mWebView.loadUrl(url); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.setWebViewClient(new WebViewClient(){ }); } @Override public void onBackPressed() { if (mWebView != null && mWebView.canGoBack()){ mWebView.goBack(); }else { super.onBackPressed(); } } }
這段代碼調(diào)用WebView的loadUrl(String url)方法加載、顯示該URL對(duì)應(yīng)的網(wǎng)頁(yè),并設(shè)置使其支持JavaScript。如果打開(kāi)WebView過(guò)程中跳轉(zhuǎn)到瀏覽器,則通過(guò)設(shè)置WebViewClient來(lái)是其在WebView中顯示。
并重寫(xiě)了onBackPressed()方法,當(dāng)WebView不為空且WebView可以回退時(shí),返回上一個(gè)WebView界面,而不是直接回退到上一個(gè)Activity。
由于該應(yīng)用需要訪問(wèn)互聯(lián)網(wǎng),所以需要在AndroidManifest.xml中配置:
<uses-permission android:name="android.permission.INTERNET"/>
該實(shí)例的效果圖如下:
二.WebView加載HTML代碼
WebView提供了一個(gè)loadData(String data, String mimeType, String encoding)方法,該方法可用于加載并顯示HTML代碼,但該方法會(huì)發(fā)生亂碼。
WebView還提供了一個(gè)loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)方法,該方法是loadData(String data, String mimeType, String encoding)方法的增強(qiáng)版,不會(huì)產(chǎn)生亂碼。該方法的幾個(gè)參數(shù)說(shuō)明:
data:指定要加載的HTML代碼。
mimeType:指定HTML的MIME類(lèi)型,對(duì)于HTML可指定為text/html。
encoding:指定HTML代碼編碼所用的字符集,比如指定為GBK。
WebView加載HTML代碼:
public class MainActivity extends AppCompatActivity { private WebView mShowWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mShowWebView = (WebView) findViewById(R.id.show_web_view); StringBuilder sb = new StringBuilder(); //拼接一段HTML代碼 sb.append("<html>"); sb.append("<head>"); sb.append("<title> 歡迎您 </title>"); sb.append("</head>"); sb.append("<body>"); sb.append("<h2> 歡迎您訪問(wèn)<a href = \"http:www.baicu.com\">" + "百度一下</a></h2>"); sb.append("</body>"); sb.append("</html"); //加載并顯示HTML代碼 mShowWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null); } }
該實(shí)例運(yùn)行效果如下:
三.WebView中的JavaScript調(diào)用Android方法
在WebView中調(diào)用Android方法需要三步:
調(diào)用WebView關(guān)聯(lián)的WebSettings的setJavaScriptEnabled(true)啟用JavaScript調(diào)用功能。
調(diào)用WebView的addJavaScriptInterface(Object object, String name)方法將object對(duì)象暴露給JavaScript對(duì)象。
在JavaScript腳本中通過(guò)剛才暴露的name對(duì)象調(diào)用Android方法。
寫(xiě)一個(gè)在JavaScript中調(diào)用Android方法的實(shí)例,該實(shí)例界面包含一個(gè)WebView組件,用于顯示HTML頁(yè)面。Activity代碼如下:
public class MainActivity extends AppCompatActivity { private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.web_view); //使用file協(xié)議加載本地assets目錄下的HTML頁(yè)面 mWebView.loadUrl("file:///android_asset/test.html"); //獲取WebView的設(shè)置對(duì)象 WebSettings webSettings = mWebView.getSettings(); //開(kāi)啟JavaScript調(diào)用 webSettings.setJavaScriptEnabled(true); //將MyObject對(duì)象暴露給JavaScript對(duì)象 mWebView.addJavascriptInterface(new MyObject(this), "myObj"); } }
在上面代碼中開(kāi)啟了JavaScript調(diào)用Android方法的功能,并將Android應(yīng)用中的MyObject對(duì)象暴露給JavaScript腳本,暴露成JavaScript腳本中名為myObj的對(duì)象。
MyObject代碼如下:
public class MyObject { private Context context; public MyObject(Context context) { this.context = context; } //該方法將會(huì)暴露給JavaScript腳本調(diào)用 @JavascriptInterface public void showToast(String name) { Toast.makeText(context, name + ",您好!", Toast.LENGTH_SHORT).show(); } //該方法將會(huì)暴露給JavaScript腳本調(diào)用 @JavascriptInterface public void showList() { //顯示一個(gè)普通的列表對(duì)話框 new AlertDialog.Builder(context) .setTitle("圖書(shū)列表") .setIcon(R.mipmap.ic_launcher) .setItems(new String[]{"Head First Android", "Head First Java", "Thinking in Java"}, null) .setPositiveButton("確定", null) .create() .show(); } }
MyObject中包含了兩個(gè)方法,showToast()和showList()方法,且這兩個(gè)方法使用了@JavascriptInterface修飾,使得這兩個(gè)方法會(huì)暴露給JavaScript腳本,從而允許JavaScript腳本通過(guò)myObj來(lái)調(diào)用這兩個(gè)方法。HTML頁(yè)面代碼如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Js調(diào)用Android</title> </head> <body> <!-- 注意此處的myObj是Android暴露出來(lái)的對(duì)象--> <input type="button" value="打招呼" onclick="myObj.showToast('Android');"/> <input type="button" value="圖書(shū)列表" onclick="myObj.showList();"/> </body> </html>
當(dāng)用戶點(diǎn)擊頁(yè)面上的兩個(gè)按鈕時(shí),該頁(yè)面的JavaScript腳本會(huì)通過(guò)myObj調(diào)用Android方法。
運(yùn)行該實(shí)例,點(diǎn)擊第一個(gè)按鈕,效果圖如下:
點(diǎn)擊第二個(gè)按鈕,效果圖如下:
以上所述是小編給大家介紹的Android WebView 應(yīng)用界面開(kāi)發(fā)教程,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Android開(kāi)發(fā)之WebView組件的使用解析
- Android開(kāi)發(fā)筆記之探秘WebView
- Android開(kāi)發(fā)中使用WebView控件瀏覽網(wǎng)頁(yè)的方法詳解
- Android應(yīng)用開(kāi)發(fā)中WebView的常用方法筆記整理
- Android開(kāi)發(fā)中WebView的簡(jiǎn)單使用小結(jié)
- Android開(kāi)發(fā)學(xué)習(xí)筆記 淺談WebView
- Android程序開(kāi)發(fā)之WebView使用總結(jié)
- Android開(kāi)發(fā)中WebView的詳細(xì)使用方法和常見(jiàn)操作
相關(guān)文章
Android仿天貓商品拋物線加入購(gòu)物車(chē)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Android仿天貓商品拋物線加入購(gòu)物車(chē)動(dòng)畫(huà),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06Flutter之自定義Dialog實(shí)現(xiàn)版本更新彈窗功能的實(shí)現(xiàn)
這篇文章主要介紹了Flutter之自定義Dialog實(shí)現(xiàn)版本更新彈窗功能的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07Android studio 下JNI編程實(shí)例并生成so庫(kù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android studio 下JNI編程實(shí)例并生成so庫(kù),需要的朋友可以參考下2017-09-09Android PickerView底部選擇框?qū)崿F(xiàn)流程詳解
本次主要介紹Android中底部彈出框的使用,使用兩個(gè)案例來(lái)說(shuō)明,首先是時(shí)間選擇器,然后是自定義底部彈出框的選擇器,以下來(lái)一一說(shuō)明他們的使用方法2022-09-09Android之淘寶商品列表長(zhǎng)按遮罩效果的實(shí)現(xiàn)
這篇文章主要介紹了Android之淘寶商品列表長(zhǎng)按遮罩效果的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05Android 如何修改APK的默認(rèn)名稱(chēng)
這篇文章主要介紹了Android 如何修改APK的默認(rèn)名稱(chēng)的相關(guān)資料,需要的朋友可以參考下2017-02-02Android實(shí)現(xiàn)水波紋擴(kuò)散效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)水波紋擴(kuò)散效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01