Android
AndroidStudio

Androidアプリのヘッダを画面によって使い分ける

ヘッダ(〇〇Activityと書いてある青い部分)を画面によって使い分けたい。
 ・テキストを変えたい
 ・ボタンの有無 等を設定したい
→そのためにまずはヘッダの構造を知っておく必要がある。ので簡単にまとめました。

こう分けたい

開発環境

Android Studio 3.0.1

実装方法

スタイルの設定

色とかを設定する部分。ここで作ったスタイルを後でAndroidManifestから指定する。
今回はプロジェクトのデフォルトの状態を使用

styles.xml
<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

AndroidManifestの設定

AndroidManifestから各画面のスタイルを指定する。

AndroidManifest.xml
    <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"
            android:label="MainActivity"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".SubActivity"
            android:label="SubActivity"
            android:theme="@style/AppTheme.NoActionBar">
        </activity>
    </application>

android:label ...ヘッダに表示される文字。
android:theme ...ヘッダの見た目。変えたいときはstyles.xmlから内容を変更する。

今回は、見た目は同じで表記や機能が異なるヘッダを作成したかったので、
android:labelのみ変更。

レイアウトファイル(xml)の内容

アクティビティ用

各Activityに対応するxmlファイルに、ツールバーの項目を加える。
(※この場合は、ヘッダ=ツールバーだと思っていいと思います)

activity_~~~.xml
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>
ヘッダ用

各画面ごとにツールバー用のレイアウトファイルを作成する。
(デフォルトではapp>res>menuに保存)
ヘッダにボタンを追加する際はこちらにitemタグを追加する。

今回はMainActivityにオーバーフローメニュー(右にある3点ボタン)をつけているので、以下のように記述する。

menu_main.xml
<menu 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"
    tools:context="com.example.hoge.fuga.MainActivity">
       <!-- ↑ここでどのActivityと結びついているか指定する -->
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

orderInCategory:ボタンを複数配置する場合、この数値によって並び順を指定する
showAsAction:ボタン表示の状態。オーバーフローメニュー内にボタンをしまう場合はnever。
         常に表示したい場合はalwaysやifRoomを指定する。

Activity.javaファイルの内容

各画面ごとに、onCreateメソッド内でツールバーをセットする。

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ...
    }

また、ヘッダ内のボタン機能を使うするためには
onCreateOptionsMenuメソッドとonOptionsItemSelectedメソッドをオーバーライドして使う。

MainActivity.java
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //ヘッダ用のレイアウトファイルと紐づける
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();
        //各ボタンを押した時の処理
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

onOptionsItemSelected内に処理が多い場合はSwitch文を使うのがおすすめ。

まとめ

  • スタイルを作る ...styles.xml
  • アクティビティごとに、どのスタイルを使うか指定する ...AndroidManufest.xml
  • 画面にツールバーを配置する ...activity_XXX.xml
  • ヘッダ用のレイアウトファイルを作成する ...menu_XXX.xml
  • 各アクティビティにツールバーと処理を実装 ...XXXActivity.java
    • 各アクティビティのonCreate()でツールバーの使用を宣言
    • onCreateOptionsMenu()でヘッダ用レイアウトファイルと紐付ける
    • onOptionsItemSelected()でヘッダ内のボタンの処理を記述