サイト移転のお知らせ:http://techbooster.org/に移転しました

ActionBarにMenuを表示する

2月 22, 2011   //   by @mhidaka   //   ユーザインターフェース  //  2 Comments

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」ボタンを押下すると、未表示のメニュー一覧がプルダウンメニューで表示されます

関連する記事:

Sponsored Link

2 Comments

技術書新刊 発売中

アンドロイドアカデミアには、CIやテスト、互換検証など実務に生きるノウハウをあつめています

技術書新刊 発売中

Android Next!はAndroid 7.0に対応したはじめての技術書です!


The Web Explorer 2はCSSの中央寄せやWebAudioなど未来を読み解く一冊です


Revised TypeScript in DefinitelylandはTypeScript 2.0(β)に対応した解説書です。インストールから型定義まで幅広くサポートしています


技術書をかこう!はエンジニアらしい執筆環境を構築、HowTo本です