※本記事は2021年7月2日に更新しました。
「アプリの画面上のバーにボタンを追加ってどうやるの？」
本記事ではこの疑問にお答えします。
まずは下の動画をご覧ください。
画面右上、アプリ画面上のバーの上にボタンが設置されています。
アプリ画面上のバーをアプリバー（アクションバー）、
ボタンをアクションボタンと呼びます。
今回はこのアクションボタンの追加の仕方について解説します。
前提として、本記事はAndroid Studio 4.2.1を対象に記載します。
また、筆者のAndroid Studioは日本語化しているため、日本語にて解説します。
本記事の使用言語はJavaとなります。
今回はProgate のJavaのレッスンがすべて理解できている、
という前提の上進めていきます。
では早速参りましょう！
前回の記事はこちら
アクションボタンの追加の仕方
アクションボタンの追加の仕方は以下の通りです。
- メニューXMLファイルを用意する
- アクティビティファイルにて、メニューを実装する
- ボタンの動作を定義する
一つ一つ解説していきます。
メニューXMLファイルを用意する
アプリバー上のボタンなどのことをオプションメニューとも呼びます。
このメニューはXMLファイルを用意することで設定可能です。
XMLファイルを入れる、menuフォルダを用意するところから始めます。
menuフォルダの用意
resフォルダの上で右クリック⇒新規⇒Androidリソースディレクトリーを選択してください。
ファイル名を「menu」、リソースタイプを「menu」にしてOKを押してください。
resフォルダにmenuフォルダが作成されます。
ボタンアイコンを用意する
menuフォルダにXMLファイルを用意するのですが、
その前に今回作るボタンのアイコンを用意しておきます。
drawableファイルの上で右クリック⇒新規⇒ベクター・アセットを選択します。
ベクター・アセットの中にはアプリでよく使われるアイコンがたくさん入っています。
下の画像、左赤枠のクリップアートを選択すると右側のアイコンの選択が開きます。
今回はadd commentのアイコンを使います。
（アイコンは好きなもので構いません。
ただ、名前がサンプルコードと異なってしまうので注意です。）
XMLファイルを用意する
menuフォルダの中に、xmlファイルを作成します。
menuフォルダの上で右クリック⇒新規⇒Menuリソース・ファイルを選択してください。
ファイルの名前は『option_menu』としてください。
Menuリソースファイルのソースコードは以下のようになります。
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- アクションボタンを設定 -->
<!-- showAsActionはifRoomでアプリバーにボタンが配置される-->
<!-- ifRoom「空間があれば」-->
<item
android:id="@+id/action_button"
android:icon="@drawable/ic_baseline_add_comment_24"
android:title="@string/button_title"
app:showAsAction="ifRoom"/>
</menu>
オプションメニューの実装では、『menu』 で囲み、『item』で要素を追加する形となります。
android:iconは先ほど保存したiconの保存先を記載します。(名前注意です。)
android:titleはこのアイコンのタイトルです。
今回は使わないので、好きな名前を設定してください。
app:showAsAcrionはこの要素を、
- スペースがあれば最初から表示する (ifRoom)
- 隠して表示する(never)
どちらにするか、という内容です。
今回は最初から表示させたいのでifRoomを記載します。
以上がXMLファイルの用意の仕方となります。
アクティビティファイルにて、メニューを実装する
アクティビティファイルでのメニューの実装方法です。
XMLファイルを用意しただけだと、メニューは画面に表示されません。
アクティビティファイルにて、メニューの実装を命令しなければなりません。
メニューは『onCreateOptionsMenu』をオーバーライドすることで実装されます。
実装文は以下の通りです。
//アプリバーにメニューを作成するメソッド
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//インフレーターを使ってメニューを表示させる
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.option_menu, menu);
return true;
}
MenuはMenuInflater クラスを実装し、iflateすることで実装されます。
『inflate』は『膨らませる』という意味です。
Activityのmenuに用意したレイアウトを『膨らませる』ことで実装するイメージです。
ボタンの動作を定義する
ここまででボタンの表示は可能となります。
ですが、ボタンを押しても何も反応しません。
ボタンを押した際の動作を定義していないからです。
ボタンを押した際の動作は、『onOptionsItemSelected』を
オーバーライドすることで定義されます。
@Override
public boolean onOptionsItemSelected(MenuItem item) {
//テキストビューに文字を表示する様に定義
TextView textView = findViewById(R.id.text_view);
textView.setText(R.string.get_text);
return true;
}
今回はTextViewに文字を表示させる例で記載しています。
以上が、アクションボタンの設定方法となります。
サンプルコード
最後に、今回のサンプルコードを提示します。
今回のアプリはGitHubに公開しています。
下記URLの『SampleOptionMenu』です。
是非参考にしてください。
文字列リソースファイル string.xml
<resources>
<string name="app_name">SampleOptionMenu</string>
<string name="button_title">Comment</string>
<string name="text_view">アクションボタンを押してください</string>
<string name="get_text">コメントボタンが押されました</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">
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
メニュー用XMLファイル option_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- アクションボタンを設定 -->
<!-- showAsActionはifRoomでアプリバーにボタンが配置される-->
<!-- ifRoom「空間があれば」-->
<item
android:id="@+id/action_button"
android:icon="@drawable/ic_baseline_add_comment_24"
android:title="@string/button_title"
app:showAsAction="ifRoom"/>
</menu>
アクティビティファイル MainActivity.java
package com.zerokaraapp.sampleoptionmenu;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
//アプリバーにメニューを作成するメソッド
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//インフレーターを使ってメニューを表示させる
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.option_menu, menu);
return true;
}
//メニューボタンを押したときの反応を定義するメソッド
@Override
public boolean onOptionsItemSelected(MenuItem item) {
//テキストビューに文字を表示する様に定義
TextView textView = findViewById(R.id.text_view);
textView.setText(R.string.get_text);
return true;
}
}
※javaファイルについて、1行目packageの部分は人によって異なります。
コピペする場合は2行目以降をコピペしてください。
ここまで出来たら一度アプリを実行してみましょう。
一番上の動画のアプリのように動作すれば成功です。
まとめ
今回はアプリバーの上のボタン（アクションボタン）の追加の仕方について解説しました。
アプリバーにボタンを多く配置すると、・・・で表される
オーバーフローメニューの中に格納されます。
オーバーフローメニューの実装の仕方については次回の記事にて解説します。
本記事が初心者の方の参考になれば幸いです。
次回の記事はこちら
コメント