Mobile Study: 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キーを押下したとき初めて表示されます。


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

アクションバーにメニューを表示する方法をサンプルコードで確認してみましょう。
■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を表示するで紹介されているような定数があります。
最もよく使うのは以下の２つです。

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謹製アプリで積極的に利用されています。

Mobile Study

2012年10月26日金曜日

Android 4.0からのActionBar再入門