Android
 Computer >> コンピューター >  >> プログラミング >> Android

Android WebViewで戻るボタン(バックキー)を有効にする方法を解説

はじめに

Androidアプリ内でWebViewを使ってWebページを表示する場合、デフォルトの状態では端末の戻るボタンを押すと、前のページに戻らずにアプリ自体が終了してしまいます。この記事では、onBackPressed()メソッドをオーバーライドすることで、WebViewの閲覧履歴をたどって前のページへ戻れるようにする実装方法を、ステップごとに詳しく解説します。

実装の手順

ステップ1:新規プロジェクトを作成する

Android Studioを開き、「File」→「New Project」を選択して新しいプロジェクトを作成します。必要な情報をすべて入力し、プロジェクトのセットアップを完了させてください。

ステップ2:レイアウトファイル(activity_main.xml)を編集する

res/layout/activity_main.xml に以下のコードを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:app = "https://schemas.android.com/apk/res-auto"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:gravity = "center"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity"
    android:orientation = "vertical">
    <WebView
       android:id = "@+id/web_view"
       android:layout_width = "match_parent"
       android:layout_height = "match_parent" />
</LinearLayout>

上記のコードでは、Webページ(この例ではFacebook)を表示するためのWebViewを配置しています。LinearLayoutの中にWebViewを1つだけ置くシンプルな構成です。

ステップ3:MainActivity.javaを実装する

src/MainActivity.java に以下のコードを追加します。

package com.example.myapplication;
import android.app.ProgressDialog;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.CookieManager;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity {
    WebView web_view;
    @RequiresApi(api = Build.VERSION_CODES.P)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       final ProgressDialog progressDialog = new ProgressDialog(this);
       progressDialog.setMessage("Loading Data...");
       progressDialog.setCancelable(false);
       web_view = findViewById(R.id.web_view);
       web_view.setVerticalScrollBarEnabled(true);
       web_view.requestFocus();
       web_view.getSettings().setDefaultTextEncodingName("utf-8");
       web_view.getSettings().setJavaScriptEnabled(true);
       web_view.loadUrl("https://touch.facebook.com/");
       web_view.setWebViewClient(new WebViewClient() {
           @Override
           public boolean shouldOverrideUrlLoading(WebView view, String url) {
              view.loadUrl(url);
              return true;
           }
       });
       web_view.setWebChromeClient(new WebChromeClient() {
           public void onProgressChanged(WebView view, int progress) {
              if (progress < 100) {
                 progressDialog.show();
              }
              if (progress == 100) {
                 progressDialog.dismiss();
              }
           }
       });
   }
   @Override
   public void onBackPressed() {
      if(web_view!= null && web_view.canGoBack())
      web_view.goBack();// 前のページが存在する場合はそのページを表示
      else
         super.onBackPressed();// 前のページがない場合はアプリを終了
   }
}

ポイントとなるのは最後の onBackPressed() メソッドです。

  • canGoBack():WebViewに「戻る」履歴(前に表示していたページ)があるかどうかを判定します。
  • goBack():閲覧履歴を1つ前のページへ戻ります。
  • 履歴がない場合(最初のページを表示している状態)は、super.onBackPressed() を呼び出して通常どおりアプリを終了させます。

また、このコードでは読み込み中の進捗状況をユーザーに伝えるため、ProgressDialogを表示する仕組みも組み込んでいます。onProgressChanged()で読み込み率を監視し、100%に達したらダイアログを閉じるようになっています。

ステップ4:AndroidManifest.xmlを編集する

AndroidManifest.xml に以下のコードを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<manifest xmlns:android = "https://schemas.android.com/apk/res/android"
    package = "com.example.myapplication">
    <uses-permission android:name = "android.permission.INTERNET"/>
    <application
       android:allowBackup = "true"
       android:icon = "@mipmap/ic_launcher"
       android:label = "@string/app_name"
       android:roundIcon = "@mipmap/ic_launcher_round"
       android:supportsRtl = "true"
       android:theme = "@style/AppTheme">
       <activity android:name = ".MainActivity">
          <intent-filter>
             <action android:name = "android.intent.action.MAIN" />
             <category android:name = "android.intent.category.LAUNCHER" />
          </intent-filter>
       </activity>
    </application>
</manifest>

ここで重要なのは <uses-permission android:name="android.permission.INTERNET"/> の行です。WebViewで外部のWebサイトを読み込むには、インターネットへのアクセス権限が必要になります。この権限定義を忘れると、ページが表示されないので注意してください。

アプリを実行してみる

それでは、実際にアプリを起動してみましょう。Android端末をパソコンに接続していることを前提とします。Android Studioからアプリを実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーの「Run(実行)」アイコンをクリックします。接続済みのモバイルデバイスを選択すると、端末の画面に以下のようにアプリが表示されます。

Android WebViewで戻るボタン(バックキー)を有効にする方法を解説

まとめ

AndroidのWebViewで戻るボタンを有効にするには、ActivityのonBackPressed()をオーバーライドし、canGoBack()で履歴の有無を確認した上でgoBack()を呼び出すのが基本の実装パターンです。これにより、ブラウザのような自然な「戻る」操作を実現でき、ユーザー体験が大きく向上します。なお、より新しいプロジェクトではandroidxライブラリやOnBackPressedDispatcherを使用する方法も一般的なので、プロジェクトの構成に合わせて適宜読み替えてください。

  1. Androidでボタンを動的に追加する方法をステップ解説

    この記事では、Androidアプリの実行時にJavaコードからボタンを動的に生成・追加する方法を、実際のコード例とともにわかりやすく解説します。XMLレイアウトにあらかじめボタンを配置するのではなく、プログラム内で新しいButtonインスタンスを作成し、画面に反映させる流れを学びましょう。手順1:Android Studioで新規プロジェクトを作成するまずAndroid Studioを起動し、メニューから「File」→「New Project」を選択して新しいプロジェクトを作成します。必要な項目(プロジェクト名、パッケージ名、保存先など)をすべて入力してプロジェクトを完成させてください。手順2

  2. Android System WebViewとは?有効化・無効化の方法とアプリがクラッシュする時の対処法を徹底解説

    スマートフォンで標準アプリを使っていると、アプリ内からWebページを開いた経験があるはずです。例えば、Instagramでリンクをタップすると、アプリを離れることなくそのままアプリ内でWebページが表示されますよね。 この動作は、ChromeブラウザでWebページを開くのと同じ仕組みで実現されています。それを可能にしているのが「Android System WebView」というアプリですが、その存在や役割を意識している人は少ないのが実情です。 Google Playストアでは、プリインストールされたアプリは自動的に最新版へと更新されるため、Android System WebViewを目にす