2013/04/11

怎麼使用 android 的 webview

怎麼使用 android 的 webview, 很簡單, 不過這邊我一樣紀錄一下如何使用.


模擬器: android os 版本 2.3.3
SDK: android-17

以下是我的 Layout 檔案.
且記得在 AndroidManifest.xml 裡面加上網路權限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

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

    <WebView 
        android:id="@+id/webview"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_alignParentTop="true" />

</RelativeLayout>


我的 MainActivity 裡面內容如下:
public class MainActivity extends Activity {

 WebView mWebView = null;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  mWebView = (WebView)findViewById(R.id.webview);
  
  mWebView.loadUrl("http://tw.yahoo.com");
 }
}

這樣基本上就會載入畫面了, 可是如果實際測試, 會發現會使用外部的瀏覽器開啟.
原因是因為當載入時, yahoo 判斷是 Mobile 所以轉址, 而這轉址的動作我們並沒有處理, 所以就會開啟預設的瀏覽器瀏覽.
解決方式如下 :
public class MainActivity extends Activity {

 WebView mWebView = null;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  mWebView = (WebView)findViewById(R.id.webview);
  
  mWebView.setWebViewClient(mWebViewClient);
  mWebView.loadUrl("http://tw.yahoo.com");
 }
 
 
 WebViewClient mWebViewClient = new WebViewClient() {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
   view.loadUrl(url);
   return true;
  }
 };
}
顯示結果如下 :




如果想要載入放置在 asset 的 html 檔, 則可改為以下, 這樣就可以了
mWebView.loadUrl("file:///android_asset/example.html");
顯示結果 :



如果想要在 Activity 的 Title 顯示此網頁的 Title 呢 ?
以下是我用來測試的 html 檔案

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>這個會顯示在 Activity 的 TITLE </title>
<meta name="viewport" content="user-scalable=yes,target-densityDpi=device-dpi,width=device-width" />
</head>

<body>
This is an example of how to use webview.<br/>
這個是 webview 的範例
</body>
</html>


只要加上下面的程式碼
WebChromeClient mWebChromeClient = new WebChromeClient() {

@Override
public void onReceivedTitle(WebView view, String title) {
if ((title != null) && (title.trim().length() != 0)) {
setTitle(title);
}
}
};

另外在 webview 的地方
mWebView.setWebChromeClient(mWebChromeClient);

顯示結果 :



範例原始碼: WebViewExample_1.zip