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

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

可是網站如果已經寫好,卻又沒時間轉換成 APP 的話,該怎麼辦呢?就利用 Android Webview 寫一隻簡單的瀏覽器程式,瀏覽網頁吧![2017/05/26 更新]


開發準備

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

開啟新專案

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

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

請支持《傑瑞窩在這》原創文章。原文標題:幫網站建立簡易 App:使用 Android Webview,原文網址:https://jerrynest.io/app-android-webview/


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>

測試結果

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


Trouble shooting

測試過程中,若跳出 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

參考資料

樂於分享、盡情玩耍的全端工程師。長期關注資訊安全、雲端運算與網路行銷等議題,曾獲得玉山黑客松金牌,擔任過軟體測試實習生、技術文案寫手。

6 個回應

  1. 沒提import的完整內容是下面:

    import android.webkit.WebView;
    import android.webkit.WebViewClient;

    找半天

  2. 以下設定沒說清楚加在AndroidManifest.xml 的哪裡??!!

發表迴響