戻るボタンを追加しよう ~ Android Studioの使い方解説【サンプルコード付き】~

Android アプリ開発基礎 〜 java〜

※本記事は2021年7月2日に更新しました。

「アプリバーの戻るボタンってどうやって追加するの?」

今回はそんな疑問にお答えします。

まずはこちらの動画をご覧ください。

画面2に『←』のボタンが追加され、押すと最初の画面に戻ります。
今回はこの戻るボタンをアプリバーに追加する方法を解説します。

前提として、本記事はAndroid Studio 4.2.1を対象に記載します。
また、筆者のAndroid Studioは日本語化しているため、日本語にて解説します。

本記事の使用言語はJavaとなります。
今回はProgate のJavaのレッスンがすべて理解できている、
という前提の上進めていきます。

では早速参りましょう!

前回の記事はこちら

戻るボタンの追加

戻るボタンの追加は次の手順で行います。

  • アプリバーへ戻るボタンの追加
  • 戻るボタンを押したときの動作を定義

一つ一つ解説していきます。

アプリバーへ戻るボタンの追加

アプリバーへの戻るボタンの追加は、以下の2文で行います。

//アクションバーのオブジェクトを取得
ActionBar actionBar = getSupportActionBar();
//アクションバーに「戻るボタン」を追加
Objects.requireNonNull(actionBar).setDisplayHomeAsUpEnabled(true);

アクションバー(アプリバー)を取得し、
アプリバーのsetDisplayHomeAsUpEnabledをtrueにすることで、
戻るボタンが追加されます。

他のボタンと違い、XMLファイルは必要ありません。

戻るボタンを押したときの動作を定義

戻るボタンを押したときの動作の定義です。
onOptionsItemSelectedメソッドをオーバーライドすることで、動作を定義します。

動作自体は画面2のアクティビティの終了なのでfinish()を命令するだけです。

ただ、他のボタンが追加された場合に判別をつけなければならないため、
今回のコードではswitchを使った条件分岐文で記載します。

動作の定義文は以下の通りです。

@Override
public boolean onOptionsItemSelected(MenuItem menuButton){
    //戻り値の変数を定義。trueを初期値として代入
    boolean result = true;
    //選択されたメニューボタンのIDを取得(今回は戻るボタンのみのため条件分岐不要だが、追加したときを想定し記載)
    int buttonId = menuButton.getItemId();
    //IDで条件分岐(戻るボタンが押されたときの命令以外省略可)
    switch(buttonId){
        //戻るボタンが押されたとき
        case android.R.id.home:
            //画面を終了させる
            finish();
            break;
        //それ以外の時
        default:
            result = super.onOptionsItemSelected(menuButton);
            break;
    }
    return result;
}

押されたボタンのIDによって、条件分岐を行います。
戻るボタンのIDは、『android.R.id.home』となります。

以上が戻るボタンの追加の仕方となります。

サンプルコード

今回のサンプルコードを記載します。

画面2つを行き来するアプリのため、
レイアウトファイル、アクティビティファイルがそれぞれ2組となります。

画面移動に関してはこちらの記事で解説しています。

今回のアプリはGitHubに公開しています。
下記URLの『SampleBackButton』です。
是非参考にしてください。

GitHub - Umigishi-Aoi/SampleBackButton: Android Studioでの戻るボタンの使い方です。このプロジェクトは自分のAndroid Studio の勉強の中で作られたものです。この解説は、 https://zerokara-app.com/666/ にあります。How to use back button in Android Studio. This project is created in studying how to use Android Studio. This Commentary is in https://zerokara-app.com/666/
Android Studioでの戻るボタンの使い方です。このプロジェクトは自分のAndroid Studio の勉強の中で作られたものです。この解説は、 にあります。How to use back button in Android Studio. This project is created in studyin...

以下、サンプルコードです。

文字列リソースファイル string.xml

<resources>
    <string name="app_name">SampleBackButton</string>
    <string name="button">画面2へ移動</string>
    <string name="text_view">画面2</string>
</resources>

メイン画面レイアウトファイル activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

画面2レイアウトファイル activity_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_view"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

メイン画面アクティビティファイル MainActivity.java

package com.zerokaraapp.samplebackbutton;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //レイアウトからボタンを取得
        Button button = findViewById(R.id.button);
        //ボタンリスナをセット (引数の中でリスナオブジェクトを取得)
        button.setOnClickListener(new ButtonClickListener());
    }

   //ボタンリスナクラス
    private class ButtonClickListener implements View

            .OnClickListener{
       //クリックしたときの動作を提示
        @Override
        public void onClick(View view){
            //MainActivityからMainActivity2への移動用インテントを用意
            Intent intent = new Intent(MainActivity.this,MainActivity2.class);
            //MainActivityからMainActivity2への移動を開始
            startActivity(intent);
        }
    }
}

画面2アクティビティファイル MainActivity2.java

package com.zerokaraapp.samplebackbutton;

import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.MenuItem;

import java.util.Objects;

public class MainActivity2 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        //アクションバーのオブジェクトを取得
        ActionBar actionBar = getSupportActionBar();
        //アクションバーに「戻るボタン」を追加
        Objects.requireNonNull(actionBar).setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem menuButton){
        //戻り値の変数を定義。trueを初期値として代入
        boolean result = true;
        //選択されたメニューボタンのIDを取得(今回は戻るボタンのみのため条件分岐不要だが、追加したときを想定し記載)
        int buttonId = menuButton.getItemId();
        //IDで条件分岐(戻るボタンが押されたときの命令以外省略可)
        switch(buttonId){
            //戻るボタンが押されたとき
            case android.R.id.home:
                //画面を終了させる
                finish();
                break;
            //それ以外の時
            default:
                result = super.onOptionsItemSelected(menuButton);
                break;
        }
        return result;
    }
}

※javaファイルについて、1行目packageの部分は人によって異なります。
コピペする場合は2行目以降をコピペしてください。

ここまで出来たら一度アプリを実行してみましょう。
一番上の動画のアプリのように動作すれば成功です。

まとめ

今回はアプリバーに実装する戻るボタンの追加の仕方について解説しました。

ユーザーが直感的に何が起こるかわかるボタンのため、
実装する価値はあるかと思います。
ぜひ使ってみてください。

本記事が初心者の方の参考になれば幸いです。

次回の記事はこちら

コメント

タイトルとURLをコピーしました