WebViewのリンクのクリックをアプリケーション側で検出する

WebViewのリンクがクリックされたことをアプリケーションで検出するためのコードを紹介します。また、ページ遷移をキャンセルするコードも併せて紹介します。

プロジェクトの作成

Android アプリケーションプロジェクトを作成します。
[New Android Application]ダイアログボックスが表示されますので、以下を設定します。

Application Name: "WebViewUIDemo"
Project Name: "WebViewUIDemo"
Package Name: "com.iPentec.webuidemo"
Minimum Required SDK: "API 8: Android 2.2 (Froyo)"
Target SDK: "API 17: Android 4.2 (Jelly Bean)"
Compile With: "API 17: Android 4.2 (Jelly Bean)"
Theme: "Holo Light with Dark Action Bar"

UIのデザイン

UIをデザインします。MainActivityのレイアウトXMLファイルを開きデザイナを表示します。WebViewコントロールをフォームに配置します。

AndroidManifest.xmlの編集

外部のHTMLファイルを開くためAndroidManifest.xmlファイルを編集し、"android.permission.INTERNET"のuses permissionを追加します。

クラスの追加

今回のプログラムでは新規作成時に作成されたMainActivityに加えて、もう一つクラスを用いる必要がありますのでクラスを追加します。

Eclipseの"Package Explorer"のプロジェクトノードの"/src/(パッケージ名)"ノードを選択します。右クリックしポップアップメニューを表示します。ポップアップメニューの[New]メニューの[Class]メニューを選択します。

[New Java Class]ダイアログボックスが表示されます。

[Name:]の欄に新規に作成するクラス名を入力します。今回は"CustomWebViewClient"としました。他の項目はデフォルトのままとします。入力ができたら[Finish]ボタンを押します。

クラスが作成されました。"src"ノード内のパッケージ名のノード内に"(クラス名).java"ファイルが追加されます。

コード

HTMLファイル

WebViewで読み込むHTMLファイルです。サーバー等に配置します。

menu.html

<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TestMenu Page</title>
    </head>
    <body>
        <div style="margin-top:8px;margin-bottom:8px;"><a href="appmenu://menu1/">メニュー１</a></div>
        <div style="margin-top:8px;margin-bottom:8px;"><a href="appmenu://menu2/">メニュー２</a></div>
        <div style="margin-top:8px;margin-bottom:8px;"><a href="appmenu://menu3/">メニュー３</a></div>
        <div style="margin-top:8px;margin-bottom:8px;"><a href="appmenu://menu4/">メニュー４</a></div>
        <div style="margin-top:8px;margin-bottom:8px;"><a href="appmenu://menu5/">メニュー５</a></div>
    </body>
</html>

プログラム

以下のコードを記述します。

MainActivity.java

package com.iPentec.webviewuidemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.*;
import android.widget.*;

public class MainActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  
    WebView webView1 = (WebView)findViewById(R.id.webView1);
    CustomWebViewClient wvc = new CustomWebViewClient();
    wvc.owner = this;
    
    webView1.setWebViewClient((WebViewClient)wvc);
    webView1.getSettings().setJavaScriptEnabled(true);
    webView1.loadUrl("http://(メニューファイルを配置したドメイン)/menu.html");
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  }
}

CustomWebViewClient.java

package com.iPentec.webviewuidemo;

import android.webkit.WebView;
import android.widget.Toast;
import android.webkit.*;
import android.app.Activity;

public class CustomWebViewClient extends WebViewClient {
  public Activity owner;
  
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.equals("appmenu://menu1/") == true){
      Toast ts = Toast.makeText(owner, "メニュー1がタップされました。", Toast.LENGTH_LONG);
      ts.show();
    }
    else if (url.equals("appmenu://menu2/") == true){
      Toast ts = Toast.makeText(owner, "メニュー2がタップされました。", Toast.LENGTH_LONG);
      ts.show();
    }
    else if (url.equals("appmenu://menu3/") == true){
      Toast ts = Toast.makeText(owner, "メニュー3がタップされました。", Toast.LENGTH_LONG);
      ts.show();
    }
    else if (url.equals("appmenu://menu4/") == true){
      Toast ts = Toast.makeText(owner, "メニュー4がタップされました。", Toast.LENGTH_LONG);
      ts.show();
    }
    else if (url.equals("appmenu://menu5/") == true){
      Toast ts = Toast.makeText(owner, "メニュー5がタップされました。", Toast.LENGTH_LONG);
      ts.show();
    }
   
    view.stopLoading();
    return false;
  }
}