X

Android 4.0からのActionBar再入門

Android 3.x(Honeycomb)から追加された新UI、ActionBar(アクションバー)はAndroid 4.0.x(ICS:IceCreamSandwich)でも重要なユーザインターフェイスです。
今回はAndroid 4.0(スマートフォン版)に焦点を当てて、ActionBarの使い方を解説します。Android4.0 SDKからアプリケーションのデフォルトテーマが変わっており、ActionBarを標準で利用できます。

ActionBarの有無によるメニュー表示の違い

以下は「?」アイコンをもったヘルプメニューの表示を例に、ActionBarを使った場合、使わなかった場合のスクリーンショットです。UIの印象がずいぶん違うことが見て取れます。複数メニューを表示する場合はSplitActionBarが便利です。

旧メニューデザイン
[?]メニューは画面下に表示
ActionBarを利用
[?]メニューは画面上部に表示
SplitActionBarを利用
メニューは画面下部

詳細な使い方については続きから。

もしActionBarを利用したくないなら

Android4.0以降でActionBarを利用しない場合、テーマを変更すると手軽です。
■AndroidManifest.xml

        <activity
            android:label="@string/app_name"
            android:name=".SpritActionBarActivity"
            android:theme="@android:style/Theme.Black">
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

4行目:テーマ”Theme.Black”を指定しています。

そのほかのシステムテーマについては、システムテーマで統一感を出すの記事で確認できます。

ActionBarにメニューを表示する

ActionBarにメニューを表示するのに特別な方法は必要ありません。いままでどおり、MenuItemを使用してメニューを追加します。(使い勝手が変わらない理由は、MenuItemクラスがActionBarにあわせて拡張されているためです。)

メニュー表示を確認する

メニューアイコンを長押しすることでMenuItemクラスのaddメソッドで設定した説明文が表示されます(サンプルの「?」アイコンでは「Action Button Help Icon」という文言を表示)。
もし、ActionBarに入りきらない複数のメニューがあった場合、Menuキーを押下したとき初めて表示されます。

メニューが1つだけの合
[?]メニューは画面上部に表示
複数メニューがある場合
他のメニューは画面下部に表示

アクションバーにメニューを表示する方法をサンプルコードで確認してみましょう。
■src/SpritActionBarActivity.java

public class SpritActionBarActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) { 省略 }
    ...(省略)...
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // メニューの要素を追加して取得
        MenuItem actionItem = menu.add("Action Button Help Icon");
        // アイコンを設定
        actionItem.setIcon(android.R.drawable.ic_menu_help);

        // SHOW_AS_ACTION_ALWAYS:常に表示
        actionItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);

        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        Toast.makeText(this, "Selected Item: " + item.getTitle(), Toast.LENGTH_SHORT).show();
        return true;
    }
}

11行目:setShowAsActionメソッドでアクションバーに常に表示する設定を行っています。これで「?」アイコンはアクションバーに優先的に表示されます。
setShowAsActionメソッドには”SHOW_AS_ACTION_ALWAYS”定数値以外に、ActionBarにMenuを表示するで紹介されているような定数があります。
最もよく使うのは以下の2つです。

  • MenuItem.SHOW_AS_ACTION_ALWAYS: 常にメニューを表示します
  • MenuItem.SHOW_AS_ACTION_IF_ROOM:空きがあればメニューを表示します

また、スマートフォン端末では画面上部に表示するメニューは2つ程度が推奨されています(表示領域の狭さに起因しています)。

ActionBarを拡張するSplitActionBar

Android 4.0からタブレット/スマートフォンのUIが統合され、使い勝手などはAndroid 3.0(Honeycomb)に合わせられました。スマートフォンでは表示領域に限りがあるため、Android4.0では、ActionBarに改善が施されています。
上下にアクションバーを分割して表示するSplitActionBarを使えば、メニューが多くてもわかりやすい画面構成が可能です。

SplitActionBarを使うためのサンプルコードは以下の通りです。
■AndroidManifest.xml

        <activity
            android:label="@string/app_name"
            android:name=".SpritActionBarActivity"
            android:uiOptions="splitActionBarWhenNarrow">
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

4行目:uiOptions要素にsplitActionBarWhenNarrowを設定します。
(ActivityのonCreateOptionsMenuメソッド内でMenu項目を追加するコードは省略しています。より詳しい解説はアクションバーを上下に表示するをご確認ください。

Tabインターフェイスの利用

ActionBarでは、タブを表示する方法も用意されています。タブを使えば直感的な画面移動が可能です。Android 3.xでは、ActionBarの右側の空き領域にタブが統合されていましたが、Android 4.0ではActionBarの直下に表示されます。

タブを有効にする方法は、ActionBarクラスのsetNavigationModeメソッドでナビゲーションモードを変更(ActionBar.NAVIGATION_MODE_TABSに)します。詳しくはスマートフォン端末で、アクションバーにタブを表示するをご確認ください。
Android4.0では、システム設定画面などでもタブ表示は使われているほか、Google+などGoogle謹製アプリで積極的に利用されています。

以上、お疲れ様でした。
ActionBarに関連する記事は以下のリンクからどうぞ。

mhidaka: Software Engineerだよ。DroidKaigi Organizer / Androidと組込とRe:VIEW。techbooster主宰。mhidaka's writings http://booklog.jp/users/mhidaka 技術書典! http://techbookfest.org