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

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

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


開發準備

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

開啟新專案

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

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

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

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

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


1. 加入網路權限

在 AndroidManifest.xml 之中加入以下 Permission

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

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


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>

測試結果

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

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


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

參考資料

如果您覺得這篇文章有幫助,歡迎按個讚或分享出去唷:

樂於分享的軟體工程師,曾在新創與大型科技公司實習,獲得黑客松競賽冠軍,擔任資安研討會講者。長期熱衷於資訊安全、雲端服務、網路行銷等領域,希望將科技知識分享給更多人。內容轉載請來信:jlee58tw@gmail.com

10 個回應

  1. Hi 謝謝您的分享~

    將RWD網站輕鬆使用了webview

    只是session 無法紀錄 還得研究

    • Jerry

      不客氣唷 希望有幫助到 😀😀

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

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

    找半天

發表回應