2010年12月23日 星期四

使用 WebView

最近因為一個案子需要和其他單位合作,
要從我所撰寫的 App 中某個按鍵開啟他們的網頁,
由於是網頁,就要在 Activity 中嵌入一個可以瀏灠網頁的 View
在 Android 上就是使用 WebView 這個類別, Library 在這個位置


import android.webkit.WebView;


因為鮮少單純顯示 html 頁面而不做任何動作,建議加入以下兩行


import android.webkit.WebSettings;
import android.webkit.WebViewClient;


WebSettings 是用來設定 WebView 屬性的類別,通常會這麼做


WebView wv;
wv = (WebView)findViewById(R.id.wv_darling);
WebSettings webSettings = wv.getSettings();


再針對 WebSettings 去做設定,當然直接對 wv.getSettings() 做設定也是可以的,
常會修改的設定例如內部網頁是否支援縮放,及是否顯示縮放控制項


websettings.setSupportZoom(true);
websettings.setBuiltInZoomControls(true);


WebView 預設下是限制 JavaScript 的,
若要啟用需要做此設定,只是好像沒有好多少就是了,


websettings.setJavaScriptEnabled(true);


測試過後發現的確有許多 JavaScript 在 WebView 中是沒任何反應的,
若你希望能透過網頁做更多的事,官方文件建議調用一個瀏灠器是不錯方法,
在 Android Developers 中有提到

If your goal is only to display some HTML as a part of your UI, this is probably fine,... If you actually want a full-blown web browser, then you probably want to invoke the Browser application with a URL Intent rather than show it with a WebView.

以下是個簡單的範例在 Activity 中嵌入滿版的 WebView ,
並且檢查當用戶點選了 http://xxx/ooo.mp4 之類的連結時調用瀏灠器處理此類 URL 並結束自己

Layout - MyPage.xml

<?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"
/>


Java - MyActivity.java

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

public class MyActivity extends Activity
{
  private WebView m_WV;

  public void MyActivity()
  {
  }

  @Override
  public void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.MyPage);
    m_WV = (WebView)findViewById(R.id.webview);
    WebSettings webSettings = m_WV.getSettings();
    webSettings.setJavaScriptEnabled(true);
  }

  @Override
  public void onStart()
  {
    super.onStart();
    String strRbtUrl = "http://ascii.net/ok.jsp";
    m_WV.loadUrl(strRbtUrl);
    m_WV.setWebViewClient(new WebViewClientImpl());
  }

  private final class WebViewClientImpl extends WebViewClient
  {
    public void WebViewClientImpl()
    {
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url)
    {
      if(url.compareTo("about:blank") == 0)
      {
        finish();
      }
      else if(url.endsWith(".mp4"))
      {
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        view.getContext().startActivity(intent);
        finish();
      }
      return false;
    }
  }
}


比較需要注意的是裡面有個繼承自 WebViewClient 的 WebViewClientImpl 類別,
以及在 MyActivity 中的 m_WV.setWebViewClient(new WebViewClientImpl());
這麼做的原因是因為在 WebView 中,用戶無論點選了什麼連結,都會開啟新的瀏覽器,
如果你想要在自己的 WebView 中跳轉頁面,就必須建立一個 WebViewClient
同時若你想要知道接下來將前往哪個連結,也必須透過這個方法,
就像範例中在接獲前往空白頁 (about:blank) 時就結束 Activity
接獲 .mp4 結尾的 URL 就調用瀏灠器並結束 Activity
如此網頁中就可以放置一個連結至空白頁的按鍵,讓用戶除了硬體 Back 鍵之外多一個回去的途徑,
網頁的開發速度相較起來較快上許多,若處理得當,並且網頁畫得像一點,
在連線品質不錯的環境下感覺起來就跟真的 Activity 一樣,
市面上有一些 App 的確也是這樣處理的,開啟後 Invoke Browser 塞一個 URL 並將自己關掉。

官方文件可以參考:WebView 與 WebViewClient

1 則留言:

  1. 受益良多。感謝您。
    希望你能再多寫網誌,台灣願意寫Blog分享Android studio的人實在太少了。

    回覆刪除