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

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

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


開發準備

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

開啟新專案

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

webview1 - 幫網站建立簡易 App:使用 Android Webview
開啟一個新專案
webview2 - 幫網站建立簡易 App:使用 Android Webview
選擇 Empty Activity

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

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
隱藏標題列的效果

故障排除

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

參考資料

Jerry
Jerry

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

16 則留言

發表回應