【Android】檢測是否處於Wifi環境，利用WebView實現瀏覽器app

標籤：android   瀏覽器   webview   wifi   app   

由於安卓內建的WebView封裝了很多方法，因此瀏覽器app實現起來算是比較簡單的。

唯一的難處就是需要自己在補充載入進度條與一些按鈕，同時判斷使用者輸入的是否是網址，

如所示，

在開啟的時候，如果不是處於Wifi環境給出警告

利用WebView實現了一個簡易的瀏覽器，在使用者沒有輸入網址的時候給出提示，具有前進、後退、重新整理、停止、跳轉的功能。

在載入網頁的時候，有進度條。基本上就是一個簡單的瀏覽器。

製作過程如下：

1、首先在res\values\strings.xml中設定各個組件的字元，app的名稱，如下：

<?xml version="1.0" encoding="utf-8"?><resources>    <string name="app_name">瀏覽器</string>    <string name="action_settings">Settings</string>    <string name="button1">前進</string>    <string name="button2">後退</string>    <string name="button3">重新整理</string>    <string name="button4">停止</string>    <string name="button5">Go!</string></resources>

2、然後修改res\values\styles.xml，在裡面設定一個無標題列的app樣式，app的樣式設定在《【Android】app透明與字型顏色更變、操作功能表》（點擊開啟連結）中已經說過了，這裡不再贅述。

<resources xmlns:android="http://schemas.android.com/apk/res/android">    <style name="NoTitle">        <item name="android:windowNoTitle">true</item>    </style></resources>

3、之後在AndroidManifest.xml申請檢測裝置網路環境與使用網路的許可權，同時修改app的樣式為我們剛剛定義的NoTitle，修改如下：

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.browser"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="8"        android:targetSdkVersion="18" />    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <!-- 要求擷取裝置當前網路狀態 -->    <uses-permission android:name="android.permission.INTERNET" /> <!-- 要求串連網路 -->    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/NoTitle" > <!-- 使用style中的noTitle樣式 -->        <activity            android:name="com.browser.MainActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

4、隨後在res\layout\activity_main.xml修改MainActivity的布局。在裡面放置一個自上而下的垂直線性布局，在其中放置：一個在《【Android】進度條與線程之間的訊息處理》（點擊開啟連結）已經提到過的進度條組件，一個水平的線性布局，裡面的五個按鈕可以用《【Android】利用相對布局布置更新軟體的style為主題對話方塊的Activity，利用layout_weight屬性對錶格布局的行劃分》（點擊開啟連結）實現其等分，從而得到更好的效果，這裡沒有這樣放置，在真機的效果就是所有的按鈕靠左對齊了，一個輸入框供使用者輸入網址，最後就是一個覆蓋整個畫面的瀏覽器組件WebView，代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <ProgressBar        android:id="@+id/progressBar1"        style="?android:attr/progressBarStyleHorizontal"        android:layout_width="match_parent"        android:layout_height="wrap_content" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <Button            android:id="@+id/button1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/button1" />        <Button            android:id="@+id/button2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/button2" />        <Button            android:id="@+id/button3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/button3" />        <Button            android:id="@+id/button4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/button4" />        <Button            android:id="@+id/button5"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/button5" />    </LinearLayout>    <EditText        android:id="@+id/editText1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:inputType="text" />    <WebView        android:id="@+id/webView1"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

5、最後就是MainActivity.java的修改，邏輯非常簡單，擷取各個組件之後，分別設定其實現方法，具體的實現方法在代碼已經標註了。在Java中判斷使用者輸入是否為網址，在《【Java】利用Regex判斷是否為網址》（點擊開啟連結）中已經說過了這裡不再贅述。

package com.browser;import java.util.regex.Pattern;import android.net.ConnectivityManager;import android.net.NetworkInfo;import android.os.Bundle;import android.annotation.SuppressLint;import android.app.Activity;import android.app.AlertDialog;import android.view.KeyEvent;import android.view.View;import android.view.View.OnClickListener;import android.view.View.OnKeyListener;import android.webkit.WebChromeClient;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.Button;import android.widget.EditText;import android.widget.ProgressBar;import android.widget.Toast;public class MainActivity extends Activity {private ProgressBar progressBar1;private Button button1;private Button button2;private Button button3;private Button button4;private Button button5;private EditText editText1;private WebView webView1;@SuppressLint("SetJavaScriptEnabled")@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 判斷是否處於wifi環境ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(CONNECTIVITY_SERVICE);NetworkInfo networkInfo = connectivityManager.getNetworkInfo(ConnectivityManager.TYPE_WIFI);if (!networkInfo.isConnected()) {Toast.makeText(MainActivity.this, "當前不處於Wifi環境，請自行注意你的流量！",Toast.LENGTH_SHORT).show();}// 擷取組件progressBar1 = (ProgressBar) findViewById(R.id.progressBar1);button1 = (Button) findViewById(R.id.button1);button2 = (Button) findViewById(R.id.button2);button3 = (Button) findViewById(R.id.button3);button4 = (Button) findViewById(R.id.button4);button5 = (Button) findViewById(R.id.button5);editText1 = (EditText) findViewById(R.id.editText1);webView1 = (WebView) findViewById(R.id.webView1);// 設定JavaScript可用，並且處理JavaScript的彈出框// 在方法開頭沒有@SuppressLint("SetJavaScriptEnabled")，詞句會出現有可能會出現跨站攻擊XXS的警告webView1.getSettings().setJavaScriptEnabled(true);// 設定載入進度條webView1.setWebChromeClient(new WebChromeClient() {@Overridepublic void onProgressChanged(WebView view, int newProgress) {super.onProgressChanged(view, newProgress);if (newProgress == 100) {progressBar1.setVisibility(View.INVISIBLE);} else {if (View.INVISIBLE == progressBar1.getVisibility()) {progressBar1.setVisibility(View.VISIBLE);}progressBar1.setProgress(newProgress);}}});webView1.setWebViewClient(new WebViewClient());// 不使用內建瀏覽器// 前進按鈕button1.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {webView1.stopLoading();// 停止載入當前網址webView1.goForward();// 調用封裝好的前進方法String url = webView1.getUrl();// 擷取載入之後網頁的UrleditText1.setText(url);// 填充的地址欄}});// 後退按鈕button2.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {webView1.stopLoading();// 停止載入當前網址webView1.goBack();// 調用封裝好的後退方法String url = webView1.getUrl();// 擷取載入之後網頁的UrleditText1.setText(url);// 填充的地址欄}});// 重新整理按鈕button3.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {webView1.stopLoading();webView1.reload();}});// 停止按鈕button4.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {webView1.stopLoading();}});// 輸入的時候按下Enter鍵editText1.setOnKeyListener(new OnKeyListener() {@Overridepublic boolean onKey(View arg0, int keyCode, KeyEvent arg2) {if (keyCode == KeyEvent.KEYCODE_ENTER) {String url = editText1.getText().toString();Pattern pattern = Pattern.compile("^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\\/])+$");if (!pattern.matcher(url).matches()) {url = "http://" + url;}if (pattern.matcher(url).matches()) {webView1.loadUrl(url);} else {new AlertDialog.Builder(MainActivity.this).setMessage("請輸入網址！").setNegativeButton("確定", null).show();}}return false;}});// 轉到按鈕button5.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {String url = editText1.getText().toString();Pattern pattern = Pattern.compile("^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\\/])+$");if (!pattern.matcher(url).matches()) {url = "http://" + url;}if (pattern.matcher(url).matches()) {webView1.loadUrl(url);} else {new AlertDialog.Builder(MainActivity.this).setIcon(R.drawable.ic_launcher).setTitle(R.string.app_name).setMessage("請輸入網址！").setNegativeButton("確定", null).show();}}});}}

至此，整個app的編寫結束，我上傳了一份代碼，大家有興趣可以看看：http://download.csdn.net/detail/yongh701/8902617

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

【Android】檢測是否處於Wifi環境，利用WebView實現瀏覽器app