Androidのカスタムアクションバーの例のチュートリアル

このチュートリアルでは、カスタムレイアウトを持つAndroidカスタムアクションバーで構成されたアプリを作成します。このチュートリアルで議論されているActionBarコンポーネントの基本的な理解を持っているものとします。

アンドロイドのカスタム アクション バー

ActionBarをカスタマイズするには、まずres/values/styles.xml内でテーマを設定し、AndroidManifest.xml内のそれぞれのアクティビティクラスに対してテーマを設定する必要があります。以下はそのためのxmlレイアウトです：styles.xml

<resources>
    
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="CustomTheme" parent="Theme.AppCompat.Light">

        <item name="contentInsetStart">0dp</item>
        <item name="contentInsetEnd">0dp</item>
    </style>

</resources>

上記のスニペットから、アクティビティにAppThemeスタイルを使用すると、NoActionBarテーマが明示的に指定されているため、ヌルポインタ例外が発生します。したがって、このプロジェクトではCustomThemeスタイルを使用します。contentInsetStartとcontentInsetEndはパディング値です。なお、pre-3.0のAndroidバージョンとの最大の互換性を提供するため、AppCompatActivityを使用します。

カスタムのアクションバーレイアウト

以下は、MainActivityからActionBarに設定されるビューレイアウトです。custom_action_bar_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >

    <TableRow>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/back"
            android:layout_gravity="center_vertical"
            android:background="@android:color/transparent"
            android:id="@+id/action_bar_back"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:gravity="center_horizontal"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold"
            android:padding="10dp"
            android:layout_alignParentTop="true"
            android:layout_weight="1"
            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/forward"
            android:id="@+id/action_bar_forward"
            android:layout_gravity="center_vertical"
            android:background="@android:color/transparent"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />


    </TableRow>

</TableLayout>

表示レイアウトには、前へと後ろへを表す2つのイメージボタンと中央に配置されたテキストビューが含まれています。

Androidのカスタムアクションバープロジェクトの構造

アンドロイドのカスタムアクションバーコード

以下のように、activity_main.xml は ActionBar に重点を置いているため、空の RelativeLayout です。MainActivity.java は以下に示します。

package com.scdev.customactionbar;

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        getSupportActionBar().setDisplayShowCustomEnabled(true);
        getSupportActionBar().setCustomView(R.layout.custom_action_bar_layout);
        View view =getSupportActionBar().getCustomView();

        ImageButton imageButton= (ImageButton)view.findViewById(R.id.action_bar_back);

        imageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        ImageButton imageButton2= (ImageButton)view.findViewById(R.id.action_bar_forward);

        imageButton2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"Forward Button is clicked",Toast.LENGTH_LONG).show();
            }
        });
    }


}

上記のコードでは、サポートライブラリを使用しています。したがって、getActionBar()の代わりにgetSupportActionBar()を使用しました。ActionBarにカスタムレイアウトを追加するために、getSupportActionBar()に対して次の2つのメソッドを呼び出しました。

• getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
• getSupportActionBar().setDisplayShowCustomEnabled(true);

上記のように、setCustomView（）はcustomViewでActionBarをインフレートするために呼び出されます。ActionBarのボタンのonClickListenersを設定するためには、getCustomView（）を使用してまずCustomViewを取得する必要があります。このチュートリアルでは、戻るボタンをfinish（）を使用してアクティビティを閉じるようにプログラムし、進むボタンをToastで表示するようにしています。注意：AndroidManifest.xmlのapplicationタグ内に以下の行を追加してください。

android:theme="@style/CustomTheme"

以下が、カスタムテーマとレイアウトを備えた当社のAndroidアプリケーションです。注意：両側に固定のマージンがあり、変更できません。そのため、ActionBarをToolBarに置き換える必要があります。後のチュートリアルでそのことについて話し合います。これでAndroidのカスタムアクションバーチュートリアルは終了です。最終的なAndroidのCustomActionBarプロジェクトは、以下のリンクからダウンロードできます。

Androidカスタムアクションバープロジェクトをダウンロードしてください。

参照：Androidドキュメント

Androidドキュメントを参照してください。