ActionBarにMenuを表示する

Android3.0(Honeycomb)から画面上部のタイトルバーの機能が拡張され、ActionBar(アクションバー)として利用できるようになりました。ActionBarにはメニューを表示したり、Tabを表示したりとタブレットに適したUIを構築できます。今回はMenuの表示、使用上の注意点について紹介します。
Action BarにMenuを表示する際の注意点

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

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

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

ActionBarの設定

1 2 3 4 5 6 7 8

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の表示/非表示を制御できます。

1 2 3 4

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

メニューの追加

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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