アンドロイドのアクションバーエクサンプルチュートリアル

2年 ago

3 minutes

今日はAndroidのActionBarについて調べてみましょう。ActionBarは、ウェブアプリケーションやモバイルアプリケーションにおいて重要なパートの1つです。今日は、ActionBarコンポーネントを使用してAndroidアプリにActionBarを実装する方法を学びます。

アンドロイドのアクションバー

AndroidのActionBarは、Androidのアクティビティ画面の上部に横に表示されるメニューバーです。Android ActionBarには、ユーザーが「メニュー」ボタンをクリックすると表示されるメニューアイテムが含まれています。一般的に、ActionBarは次の4つのコンポーネントで構成されています。

App Icon: App branding logo or icon will be displayed here
View Control: A dedicated space to display Application title. Also provides option to switch between views by adding spinner or tabbed navigation
Action Buttons: Some important actions of the app can be added here
Action Overflow: All unimportant action will be shown as a menu

Android ActionBar の設定を行う

Theme.HoloまたはTheme.Holoから派生したテーマを使用するすべてのアクティビティは、自動的にActionBarを含みます。

アンドロイドのアクションバーコンテキストメニュー

action barにtoolbarアイコンとアクションオーバーフローアイテムを取り入れる一番簡単な方法は、res/menuフォルダ内にあるメニューXMLリソースファイルを作成することです。フォルダ内の生のXMLファイルに以下のようにメニューアイテムを追加することができます：menu_main.xml

<menu 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" tools:context=".MainActivity">
    
    <item
        android:id="@+id/add" android:icon="@android:drawable/ic_menu_add" app:showAsAction="always"   android:title="@string/add"/>
    <item
        android:id="@+id/reset" android:icon="@android:drawable/ic_menu_revert" app:showAsAction="always|withText" android:title="@string/reset"/>
    <item
        android:id="@+id/about" android:icon="@android:drawable/ic_dialog_info" app:showAsAction="never" android:title="@string/about">
    </item>
    <item
        android:id="@+id/exit"  app:showAsAction="never" android:title="@string/exit">
    </item>
</menu>

全てのメニューアイテムには設定が必要な要素が4つあります。

android:id属性は、メニューアイテムのIDを指定します。これはAndroidアプリの他の場所と同様にIDとして機能します。@+id/で始まるandroid:idの値は、R.menu定数コレクションに定数を作成します。
android:title属性の値には、メニューアイテムのタイトルが含まれます。
android:icon属性は、drawableディレクトリ内のアイコンを参照します。
android:showAsAction属性は、指定されたアイテムのアクションバーでの表示方法を示します。以下に示すフラグのいずれかを選択できます：

always：常にアクションバーに表示する
ifRoom：スペースがある場合のみ表示する
never：メニューアイテムはアクションバーにアイコンとして配置されず、メニューボタンをクリックしたときにのみ表示される
withText：alwaysまたはifRoomに追加することで、ツールバーボタンがアイコンとタイトルの両方であることを示すことができる

常には常にツールバーボタンであることを保証するものではありません。100個の常に表示するアイテムを要求した場合、すべてのアイテムにスペースが十分にないかもしれません。ただし、常に表示するアイテムは、スペースの確保においてifRoomアイテムよりも優先されます。

アンドロイドのアクションバーコンテンツにメニューを拡大させる。

メニューXMLファイルで定義されたメニューアイテムを表示するためには、メニューファイルをインフレートする必要があります。私たちは、ActionBarを追加したいアクティビティのonCreateOptionsMenu()メソッド内でそれを行います。以下はコードスニペットです。

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

R.menu.menu_mainパラメータは、メニューXMLファイルを参照するための定数です。メニューパラメータは、メニューアイテムをインフレートしたいメニューです。

Androidのアクションバーのイベントに応答する

これらのアイテムのいずれかをタップした際に、ユーザーの操作を検知するために、以下のようにMainActivityのonOptionsItemSelected()を上書きする必要があります。

@Override
public boolean onOptionsItemSelected(MenuItem item) { switch(item.getItemId()) {
    case R.id.add:
        //add the function to perform here
        return(true);
    case R.id.reset:
        //add the function to perform here
        return(true);
    case R.id.about:
        //add the function to perform here
        return(true);
    case R.id.exit:
        //add the function to perform here
        return(true);
}
    return(super.onOptionsItemSelected(item));
}

では、プロジェクトの各メニューアイテムに基本機能を割り当てましょう。

プロジェクトの構造

AndroidのActionBarの例題のコード

以下のスニペットに示されているように、私たちはMainActivityに4つのメニューアイテムを実装しました。MainActivity.java

package com.scdev.actionbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) { switch(item.getItemId()) {
        case R.id.add:
            count=(TextView)findViewById(R.id.textView);
            count.setText("Add is clicked");
            return(true);
        case R.id.reset:
            count=(TextView)findViewById(R.id.textView);
            count.setText("Nothing is selected");
            return(true);
        case R.id.about:
            Toast.makeText(this, R.string.about_toast, Toast.LENGTH_LONG).show();
            return(true);
        case R.id.exit:
            finish();
            return(true);

    }
        return(super.onOptionsItemSelected(item));
    }
}

各項目にはそれぞれの機能が割り当てられます。選択された項目は、menu_main.xmlファイルで定義されたidに基づいて決定されます。ここでは、最初の2つの項目のTextViewの内容を変更し、3つ目の項目ではトーストを表示し、4つ目の項目ではアプリケーションを終了します。なお、AppCompatActivityは以前のActionBarActivityの非推奨バージョンの代替品です。styles.xmlファイルは次のように定義されています。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

親テーマでは、デフォルトでActionBarを含む、Theme.AppCompatの派生クラスを使用していることがわかります（Theme.AppCompat.Light.NoActionBarクラスを使用しない限り）。したがって、ここで明示的に定義する必要はありません。

アンドロイドのアクションバーのバックポート化

もう一つの方法は、Android 3.0以降に導入されたActionBarのバックポートとは独立して、MainActivityをActionBarSherlockでインポートして拡張することです。

以下の画像は、私たちのプロジェクトが出力した結果を示しています。ActionBarには、事前に定義されたアイコンが含まれていることがわかります。addアイコンがクリックされたため、テキストビューは内容が更新されます。resetがクリックされたため、テキストビューは元の内容に戻ります。aboutがクリックされると、以下に示すようにトースト通知が表示されます。これでAndroidアクションバーの例のチュートリアルは終了です。また、AndroidカスタムActionBarについても読むべきです。以下のリンクからAndroid ActionBarプロジェクトをダウンロードすることができます。

Android アクションバーのサンプルプロジェクトをダウンロードしてください。