幫網站建立簡易 App：使用 Android Webview

隨著智慧型手機普及，任何人都輕易的在隨時隨地都瀏覽網站。開發者通常會使用響應式設計，或建立一個 APP ，方便使用者在手機也能瀏覽。在開發 APP 部分，可以自己動手寫，或利用 Cordova 這類工具來協助開發與發佈 。

可是網站如果已經寫好，卻又沒時間轉換成 APP 的話，該怎麼辦呢？就利用 Android Webview 寫一隻簡單的瀏覽器程式，瀏覽網頁吧！

開發準備

• 下載 Android Studio
• 使用模擬器，或準備你的 Android 手機進行測試

開啟新專案

在 Android Studio 之中開啟一個新專案，選擇 Empty Activity。

開好專案後，你就會看到目錄下有這些檔案。而待會要修改這四個地方：AndroidManifest.xml、activity_main.xml、MainActivity.java、style.xml。

1. 加入網路權限

在 AndroidManifest.xml 之中加入以下 Permission。

<uses-permission android:name="android.permission.INTERNET" />

2. 修改 Layout

開啟 activity_main.xml，把原本的內容清除，放上 Webview 物件，這麼一來 APP 打開就只能瀏覽網頁。

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />

3. 修改主程式

編輯 MainActivity.java 檔案。

• 需要 import webView，WebSettings 與 webViewClient。
• 直接使用 WebView 會開啟瀏覽器瀏覽，想要在 APP 內開網頁要使用 webViewClient。
• 為了讓 JavaScript 能順利執行，需要加入呼叫 setJavaScriptEnabled。

package com.example.jerry.myapp2;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebSettings;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webview = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = webview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        setContentView(webview);
        webview.setWebViewClient(new WebViewClient());
        webview.loadUrl("https://jerrynest.io/");
    }
}

4. 最後一步，移除標題欄

修改 style.xml 檔案，設定為 NoActionBar。

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

測試結果

拿傑瑞窩測試 ，比較一下有無隱藏標題列，右邊就清爽許多囉！

故障排除

測試過程中，若跳出 adb server didn’t ack，有可能是其他程式占據 adb.exe 的 port 5037，kill 掉即可解決。透過下方 Windows 指令，找出使用 port 5037 的程式。

netstat -aon | findstr "5037" | more

例如某程式 PID 為 1234，檢查該程式的名稱

tasklist /FI "PID eq 1234"

可以透過工作管理員或用指令 kill 掉 PID 為 1234 的程式

taskkill /F /PID 1234

參考資料

• Building Web Apps in WebView
• 怎麼使用 android 的 webview
• ADB server didn’t ACK 的錯誤
• Android App 隐藏显示标题栏、状态栏、导航栏