隨著智慧型手機普及,任何人都輕易的在隨時隨地都瀏覽網站。所以開發者通常會使用響應式設計,或建立一個app,方便使用者在手機也能瀏覽。然而,在開發app部分,可以自己動手寫,或利用Cordova這類工具開發並協助發佈app。可是網站如果已經寫好,卻又沒時間轉換成app的話,該怎麼辦呢?就利用android的webview寫一隻簡單的瀏覽器程式,瀏覽網頁吧!當然,網頁要先做好響應設計XD


開發環境

利用Google推出的 Android Studio,連接Android手機進行測試

修改專案的四個地方:AndroidManifest.xml、activity.xml(Layout)、MainActivity(JAVA)、style.xml


1. AndroidManifest.xml

加入網路權限

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

2. 修改Layout檔案activity.xml

將padding改為0dp (預設是16dp),並加入WebView物件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp"
    android:paddingBottom="0dp" tools:context=".HiTicket">

    <WebView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/webView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

3. 修改MainActivity檔案

  • 用到WebView 相關物件,需要import WebView 與 WebViewClient。
  • 使用WebView 就會載入畫面了,可是如果透過轉址進入,會開啟預設的瀏覽器瀏覽,所以要使用WebViewClient。
  • 這裡加入一些設定,讓app可以全螢幕顯示。
    WebView mWebView = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_hi_ticket);
        mWebView = (WebView)findViewById(R.id.webView);
        mWebView.setWebViewClient(mWebViewClient);
        mWebView.setInitialScale(1);
        mWebView.getSettings().setLoadWithOverviewMode(true);
        mWebView.getSettings().setUseWideViewPort(true);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("http://google.com.tw");
    }

    WebViewClient mWebViewClient = new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    };

4. 修改style.xml檔案

設定NoActionBar,隱藏標題欄

<resources>

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
</style>

</resources>

實際結果

這是手機上的截圖。網站使用bootstrap做layout,畫面自動響應。

web

與沒做全螢幕與無隱藏標題列做對照。可以看到版面跑掉,甚至看不見網頁內容。

Screenshot_2016-01-18-20-40-40


Troubleshooting

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

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