WebViewの技

戻るボタンで前のページに戻る

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
  if (event.getAction() == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_BACK) {
       if (webView.canGoBack()) {
           webView.goBack();
   }
       else {
           // 戻れない場合の処理
           // (終了確認ダイアログ表示など)
       }

      return true;
   }

  return super.onKeyDown(keyCode, event);
}


内容の保持

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  // (設定等省略)

  if (savedInstanceState == null) {
       webView.loadUrl("http://www.example.com/");
   }
}
@Override
protected void onSaveInstanceState(Bundle outState) {
  super.onSaveInstanceState(outState);  
   webView.saveState(outState);
}
@Override
protected void onRestoreInstanceState(Bundle savedInstanceState)
{
  super.onRestoreInstanceState(savedInstanceState);
   webview.restoreState(savedInstanceState);
}


読み込みの進捗状況を表示する

レイアウトファイル(res/layout/activity_main.xml)にプログレスバーを配置
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  (中略)
   >

  <ProgressBar
       android:id="@+id/progressBar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:indeterminate="false"
       android:max="100"
       style="?android:attr/progressBarStyleHorizontal"
       />

  <WebView
       android:id="@+id/webView"
       (中略)
       />
</LinearLayout>

MainActivity.java
[注意] サンプルのため、かなり省略して記述しています。
public class MainActivity extends Activity {
  private ProgressBar progressBar;

  @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);

      setContentView(R.layout.activity_main);
       progressBar = (ProgressBar) findViewById(R.id.progressBar);
       webView = (WebView) findViewById(R.id.webView);

      webView.setWebViewClient(new MyWebViewClient());
       webView.setWebChromeClient(new MyWebChromeClient());

      webView.loadUrl("&nolink(http://example.com/)");
   }

  (いろいろ省略)

  private class MyWebViewClient extends WebViewClient {
       @Override
       public void onPageStarted(WebView view, String url, android.graphics.Bitmap favicon) {
           super.onPageStarted(view, url, favicon);
           progressBar.setVisibility(View.VISIBLE);    // 読み込み開始時にプログレスバー表示
       }

      @Override
       public void onPageFinished(WebView view, String url) {
           super.onPageFinished(view, url);
           progressBar.setVisibility(View.GONE);       // 読み込み完了時にプログレスバー非表示
       }
   }
   
   protected class MyWebChromeClient extends WebChromeClient {
       public void onProgressChanged(WebView view, int progress) {
           progressBar.setProgress(progress);          // プログレスバーの進捗を更新
       }
   }
}
プログレスダイアログも使えば、読み込みキャンセルしても問題ない状態になるまで操作をブロックすることが可能であり、
参考サイトでもプログレスバーとプログレスダイアログが併用されています。
しかし、ある程度読み込みが完了した(画像が描画可能になった状態になった)ことを検知するためのPictureListenerが
API Level 12以降非推奨となり、代替方法も提供されていないようなので、上のサンプルではプログレスバーのみ使用しています。


ファイルアップロードを可能にする

画像選択の例です。
private final static int FILECHOOSER_RESULTCODE = 1;
private ValueCallback<Uri> mUploadMessage;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  // (設定等省略)

  webView.setWebViewClient(new MyWebViewClient());
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
  if (requestCode == FILECHOOSER_RESULTCODE) {
       if (null == mUploadMessage) return;

      Uri result = (intent == null | | resultCode != RESULT_OK)  ? null : intent.getData();
       mUploadMessage.onReceiveValue(result);
       mUploadMessage = null;
   }
}
protected class MyWebChromeClient extends WebChromeClient {
  // Android 4.1以上
   public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
       mUploadMessage = uploadMsg;
       Intent i = new Intent(Intent.ACTION_GET_CONTENT);
       i.addCategory(Intent.CATEGORY_OPENABLE);
       i.setType("image/*");
       startActivityForResult(Intent.createChooser(i, "画像選択"), FILECHOOSER_RESULTCODE);
   }

  // Android 3.0以上
   public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
       mUploadMessage = uploadMsg;
       Intent i = new Intent(Intent.ACTION_GET_CONTENT);
       i.addCategory(Intent.CATEGORY_OPENABLE);
       i.setType("image/*");
       startActivityForResult(Intent.createChooser(i, "画像選択"), FILECHOOSER_RESULTCODE);
   }

  // Android 3.0未満
   public void openFileChooser(ValueCallback<Uri> uploadMsg) {
       openFileChooser(uploadMsg, "", "");
   }
}

※openFileChooserは非公開APIであり、Android 4.4では非対応になっているとのこと。

アプリ側でJavaScriptを扱う

webView.loadUrl("javascript:document.getElementById('id').value = '値を書き換えてみる';");


アプリ側からLocalStorageにアクセスする

String databasePath = activity.getApplicationContext().getDir("localstorage", Context.MODE_PRIVATE).getPath();
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);
settings.setDatabasePath(databasePath);

// 保存
webView.loadUrl("javascript:window.localStorage.setItem('キー', '値');");

// 取り出し
webView.loadUrl("javascript:android.getItem(window.localStorage.getItem('キー'));");

// 取り出した値をアプリ側で取得するためのインタフェース
public class JavascriptInterface {
  public void getItem(String key, String val) {
       // 取り出した値をアレコレする
   }
}


JavaScriptのalert関数のメッセージを取得してToast表示する

setWebChromeClient(new WebChromeClient(){
  @Override
   public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
       Toast.makeText(webView.getContext(), message, Toast.LENGTH_LONG).show();  
       return super.onJsAlert(view, url, message, result);
   }
});
  • WebViewではalertを使えないので。


参考資料




コメントを投稿するには画像の文字を半角数字で入力してください。


画像認証

  • 最終更新:2014-03-24 13:08:00

このWIKIを編集するにはパスワード入力が必要です

認証パスワード