2012年10月26日金曜日

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
?
1
2
3
4
5
6
7
8
9
10
<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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
?
1
2
3
4
5
6
7
8
9
10
<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謹製アプリで積極的に利用されています。

0 件のコメント:

コメントを投稿