TechBooster

Android3.0(Honeycomb)から画面上部のタイトルバーの機能が拡張され、ActionBar(アクションバー)として利用できるようになりました。ActionBarにはメニューを表示したり、Tabを表示したりとタブレットに適したUIを構築できます。今回はMenuの表示、使用上の注意点について紹介します。
fragmentとActionBarを組み合わせたより高度な使い方については、Fragmentを使ってMenuを動的に作成するを参照してください。

Action BarにMenuを表示する際の注意点

• タブレットデバイスではメニューボタンを押してから個別要素（詳細な選択肢）を表示するUIが多い。Action Barにメニューを出しすぎない点に注意。
• ActionBar上へ、一度に出るメニュー項目は最大2つが目安
• 2つ以上の場合は、Moreボタンによってまとめる(プラットフォーム側で自動でまとめてくれる)

※現在公開されているHoneycombのSDKはプレビュー版の為、正式版では実装が異なる可能性があります。

サンプルコードは続きから。

ActionBarの設定

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //setContentViewより前にWindowにActionBar表示を設定
        getWindow().requestFeature(Window.FEATURE_ACTION_BAR);

        setContentView(R.layout.main);
    }

Window#requestFeatureメソッドはsetContentViewメソッドより前に実行する必要があります。HoneycombではWindowの設定項目が3つ追加されました。

• android.view.Window.FEATURE_ACTION_BAR
  • 通常のスタイル(Theme.WithActionBar)ではデフォルトで有効になっています。 アクションバーではメニューを表示できます。
• android.view.Window.FEATURE_ACTION_BAR_OVERLAY
  • ActionBarは常時、画面の上部に表示されています。FEATURE_ACTION_BAR_OVERLAYフラグを有効にすると、スクロールの際にActionBarを半透明にしてコンテンツの表示範囲を広くとれます。
• android.view.Window.FEATURE_ACTION_MODE_OVERLAY
  • ActionBarのようなUIを表示するスペースがない場合、このFEATURE_ACTION_MODE_OVERLAYフラグが有効になっていると、コンテンツの上に、ActionBarをオーバーレイ表示することを許可します。

Activityのテーマを使っても、ActionBarの表示/非表示を制御できます。

        getWindow().requestFeature(Window.FEATURE_ACTION_MODE_OVERLAY);
        setTheme(android.R.style.Theme_Black_NoTitleBar);		//タイトルバー(アクションバー)なし
        //setTheme(android.R.style.Theme.WithActionBar);		//アクションバーあり
        setContentView(R.layout.main);

メニューの追加

    @Override
	public boolean onCreateOptionsMenu(Menu menu) {
	    // メニューの要素を追加
	    menu.add("Normal item");

	    // メニューの要素を追加して取得
	    MenuItem actionItem = menu.add("Action Button");

	    // SHOW_AS_ACTION_IF_ROOM:余裕があれば表示
	    actionItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

	    // アイコンを設定
	    actionItem.setIcon(android.R.drawable.ic_menu_share);

	    return true;
	}

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

10行目 MenuItem#setShowAsActionメソッドで、ActionBar上での表示モードを設定しています。Honeycombでは以下の4つの項目があります。

• MenuItem.SHOW_AS_ACTION_ALWAYS
  • 常にActionBar上に表示されます。過剰な表示はごちゃごちゃした印象を与え、UIの品質を低下させるため必要性を考慮し、利用してください。Googleによると経験的に常に表示されるメニューは2つ以下が望ましいとしています。
• MenuItem.SHOW_AS_ACTION_IF_ROOM
  • ActionBar上にアイコンを配置する隙間があれば、表示。多くのボタンがバー上に溢れることを防ぎます。表示しきれなかった項目は「more」ボタンにまとめられます。
• MenuItem.SHOW_AS_ACTION_NEVER
  • ActionBar上に表示しません。
• MenuItem.SHOW_AS_ACTION_WITH_TEXT
  • アイコンとテキストラベルを一緒に表示します

また、Honeycombのデフォルト設定では、ActionBar上にMenuの要素を個別に並べて表示することはありません。
タブレットデバイスではメニューボタンを押してから個別要素（詳細な選択肢）を表示する、一連の流れをメニューの標準的なメニュー動作としているからです。

Honeycombでは、xlargeスクリーン以上のタブレットデバイスを念頭に、バーに「more」ボタンが表示されます。ActionBarの右端の「more」ボタンを押下すると、未表示のメニュー一覧がプルダウンメニューで表示されます