發布日期：2014 年 2 月 28 日
瞭解如何建立新的 Android 專案、新增 Webview、載入遠端網址，以及載入本機 HTML 頁面。
本教學課程假設您是一位開發人員，對 Android 開發環境的經驗有限或完全沒有，但對 Kotlin 有一定程度的經驗。如果您已熟悉 Android 程式設計，建議您參閱 Android 開發人員網站上的「在 WebView 中建立網路應用程式」一文。
安裝 Android Studio
本教學課程使用 Android Studio，這是 Android 的設計與建構 IDE。
建立新的 Android 專案
安裝 Android Studio 後，系統會啟動設定精靈。
建立新專案：
- 按一下「新專案」。
- 按一下「Empty Activity」範本，選取該範本做為專案的範本。範本會建立專案的結構，以及 Android Studio 建構專案所需的檔案。
- 按一下「Next」，開啟「New Project」對話方塊。
- 設定專案。輸入應用程式名稱、套件名稱和目標 SDK。接著，點選 [下一步]。
- 將「Minimum required SDK」設為「API 24：Android 7.0 (Nougat)」。
- 按一下「完成」
Android Studio 會開啟新專案。
專案架構
Android Studio 建立的初始專案含有設定應用程式的固定程式碼。以下列舉幾個較常見的匯入資料夾：
src/main/java：Android Java 原始碼。src/main/res：應用程式使用的資源。src/main/res/drawable：應用程式使用的圖片資源。src/main/res/xml. 定義 UI 元件結構的 XML 版面配置檔案。src/main/res/values：您可能不想在應用程式中硬式編碼的維度、字串和其他值。src/main/AndroidManifest.xml。資訊清單檔案會定義應用程式所包含的內容，例如活動、權限和主題。
新增 WebView
接著，請在主要活動的版面配置中新增 WebView。
如果
src/main/res/xml目錄中的activity_main.xml檔案尚未開啟，請開啟該檔案。(您也可能會看到fragment_main.xml檔案。您可以忽略這項資訊，因為本教學課程不需要這項資訊。)選取
activity_main.xml編輯器底部的「Text」分頁標籤，即可查看 XML 標記。這個檔案會定義主要活動的版面配置，而「Preview」窗格會顯示活動的預覽畫面。空白活動版面配置不包含任何子項。您需要新增 WebView。
在 XML 窗格中，從
FrameLayout元素結尾處移除自關閉斜線，然後新增<WebView>元素和新的結尾標記，如下所示：<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:tools="https://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> tools:ignore="MergeRootFrame"> <WebView android:id="@+id/activity_main_webview" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>如要使用 WebView，您必須在活動中參照該元件。開啟
src/main/java/<PackageName>目錄中主要活動MainActivity.java的 Java 來源檔案。新增粗體顯示的內容。
public class MainActivity extends Activity { private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.activity_main_webview);onCreate方法中的現有程式碼會將活動與版面配置連結。新增的程式碼行會建立新的成員變數mWebView，用於參照網頁檢視畫面。移除下列程式碼：
if (savedInstanceState == null) { getSupportFragmentManager().beginTransaction() .add(R.id.container, new PlaceholderFragment()) .commit(); }WebView 會透過資源 ID 進行識別，而這項 ID 會在版面配置檔案中由這行指定：
android:id="@+id/activity_main_webview"加入程式碼後，您會在編輯器的邊界中看到一些警告訊息。這是因為您尚未匯入 WebView 的正確類別。幸好，Android Studio 可協助您填入缺少的類別。最簡單的方法是按一下並將滑鼠游標懸停在不明的類別名稱上，然後等待模組顯示「快速修正」功能，在本例中，這表示為
WebView類別新增import陳述式。按下 Alt + Enter 鍵 (在 Mac 上為 Option + Enter 鍵) 即可接受快速修正。
有了 WebView，您就可以繼續設定它，並載入一些精彩的網路內容。
啟用 JavaScript
WebView 預設不允許 JavaScript。如要在 WebView 中執行網頁應用程式，您必須在 onCreate 方法中加入以下行程式碼，明確啟用 JavaScript：
// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
載入遠端網址
如果您要從遠端網址載入資料，應用程式就需要權限存取網際網路。您必須在應用程式的資訊清單檔案中新增這項權限。
在
src/res目錄中開啟AndroidManifest.xml檔案。在結束</manifest>標記之前，新增粗體文字行。<?xml version="1.0" encoding="utf-8"?> <manifest ...> ... </application> <uses-permission android:name="android.permission.INTERNET" /> </manifest>下一步是在 WebView 上呼叫
loadUrl方法。在onCreate方法的結尾新增下列程式碼行。mWebView.loadUrl("[https://beta.html5test.com/][8]");接著，請嘗試執行專案。如果沒有方便使用的裝置，您可以前往「Tools」>「Android」>「AVD Manager」，建立模擬器 (AVD 或 Android 虛擬裝置)。
處理導覽
請嘗試變更要載入的網址，並重新執行應用程式。https://www.css-tricks.com/你會發現一些奇怪的現象。
如果您現在使用具有 css-tricks.com 等重新導向的網站執行應用程式，應用程式最終會在裝置的瀏覽器中開啟該網站，而不是在 WebView 中開啟，這可能不是您預期的結果。這是因為 WebView 處理導覽事件的方式。
事件順序如下：
- WebView 會嘗試從遠端伺服器載入原始網址，並取得重新導向至新網址的連結。
- WebView 會檢查系統是否能處理網址的檢視意圖，如果可以，系統會處理網址導覽，否則 WebView 會在內部導覽 (例如，如果使用者未在裝置上安裝瀏覽器)。
- 系統會挑選使用者偏好的應用程式來處理
https://網址通訊協定，也就是使用者的預設瀏覽器。如果您安裝了多個瀏覽器，系統可能會在這時顯示對話方塊。
如果您在 Android 應用程式中使用 WebView 來顯示內容 (例如說明頁面)，這可能正是您想要做的事。不過，對於較複雜的應用程式，您可能需要自行處理導覽連結。
如要處理 WebView 內的導覽，您必須覆寫 WebView 的 WebViewClient，該函式會處理 WebView 產生的各種事件。您可以使用這項方法控制 WebView 處理連結點擊和頁面重新導向的方式。
WebViewClient 的預設實作會在 WebView 中開啟任何網址：
// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());
這確實是個進步，但如果您想只處理網站的連結，同時在瀏覽器中開啟其他網址，該怎麼辦呢？
為此，您需要擴充 WebViewClient 類別並實作 shouldOverrideUrlLoading 方法。每當 WebView 嘗試導覽至不同的網址時，就會呼叫這個方法。如果傳回 false，WebView 會自行開啟網址。(預設實作方法「一律」傳回 false，因此在前述範例中有效)。
建立新類別：
- 在應用程式的套件名稱上按一下滑鼠右鍵，然後依序選取「New」 >「Java Class」
- 輸入
MyAppWebViewClient做為類別名稱，然後按一下「OK」 在新的
MyAppWebViewClient.java檔案中，新增下列程式碼 (變更處以粗體顯示)：public class MyAppWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if(Uri.parse(url).getHost().endsWith("css-tricks.com")) { return false; } Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); view.getContext().startActivity(intent); return true; } }新程式碼會將
MyAppWebViewClient定義為WebViewClient的子類別，並實作shouldOverrideUrlLoading方法。WebView 即將載入網址時，系統會呼叫
shouldOverrideUrlLoading方法。這個實作會檢查網址主機名稱結尾的字串是否為「css-tricks.com」。如果字串存在，方法會傳回 false，這會告知平台「不要」覆寫網址，而是在 WebView 中載入網址。對於任何其他主機名稱，此方法會向系統提出要求，以便開啟網址。方法是建立新的 Android Intent，並使用該意圖啟動新的活動。在方法結尾傳回 true 會防止網址載入至 WebView。
如要使用新的自訂 WebViewClient，請在
MainActivity類別中新增下列行：// Stop local links and redirects from opening in browser instead of WebView mWebView.setWebViewClient(new MyAppWebViewClient());使用者現在可以點選任何 CSS 技巧連結，並停留在應用程式中，但連往外部網站的連結會在瀏覽器中開啟。
處理 Android 返回按鈕
當您開始瀏覽 CSS Tricks 文章時，點選 Android 上的返回按鈕即可退出應用程式。
WebView 方法 canGoBack 會指出頁面堆疊中是否有可彈出的項目。如要偵測按下返回按鈕，並判斷是否應透過 WebView 的瀏覽記錄返回，或是讓平台判斷正確的行為，請將 onBackPressed() 方法新增至 MainActivity：
public class MainActivity extends Activity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
...
}
@Override
public void onBackPressed() {
if(mWebView.canGoBack()) {
mWebView.goBack();
} else {
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
...
}
}
從檔案系統載入 HTML
在可安裝的應用程式中使用 WebView 的一大優點，就是您可以在應用程式中儲存素材資源。這樣一來，WebView 就能直接從本機檔案系統擷取素材資源，讓應用程式可離線運作並縮短載入時間。
如要將檔案 (包括 HTML、JavaScript 和 CSS) 儲存在本機，請將檔案儲存在 assets 目錄中。這是 Android 用於原始檔案的預留目錄。應用程式可能需要存取這個目錄，因為應用程式可能需要縮小或壓縮特定檔案。
在 main (
src/main/assets/www) 中建立assets/www目錄。- 最佳做法是將網頁檔案放在
/assets的子目錄中。
- 最佳做法是將網頁檔案放在
將所有檔案上傳至目錄。
載入適當的檔案：
mWebView.loadUrl("file:///android_asset/www/index.html");更新
shouldOverrideUrlLoading方法，為非本機網頁開啟瀏覽器：public class MyAppWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if(Uri.parse(url).getHost().length() == 0) { return false; } Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); view.getContext().startActivity(intent); return true; } }
您現在已準備好建構出色的 WebView 應用程式。
如要瞭解如何取得合適的視覺效果，請參閱「WebView 中的 Pixel-Perfect UI」。
如果遇到問題，Chrome 開發人員工具就是你的好幫手。如要開始使用，請參閱「Android 的遠端偵錯功能」。