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

アクションバーを上下に表示する

11月 22, 2011   //   by UpDown-G   //   アプリケーション, ユーザインターフェース  //  No Comments

アクションバーはAndroid3.0(Honeycomb)で導入された、タイトルバーにMENUやタブ、検索ウィジェットなど、
表示中の画面で操作できることを可視化するための領域です。

Android4.0(ICS)のバージョンアップでは、タブレット端末、携帯端末のどちらにも対応するため、
アクションバーの表示方法が拡張されました。

以下二つのスクリーンショットの様に、
画面解像度の広いタブレット端末の場合は上部にMenuItemを表示し、解像度の狭い携帯端末の場合には下部にMenuItemを表示するよう、アクションバーを上下に分ける事ができます。
本エントリでは、アクションバーを画面下部にも表示する方法を紹介します。

TechBoosterで過去紹介した、ActionBarに関連する記事はこちらです。
使用方法のおさらいなどにご利用くださいませ。

ActionBarにMENUを表示する
ActionBarのタブを利用する
ActionBarに共有履歴を表示する
ActionProviderを使用してMenuItemの処理を共通化する

詳細な使用方法は、つづきをどうぞ。

Split Action Barを使用する

上部で紹介した、下部のActionBarにMenuItemを表示するActionBarはSplit Action Barと呼ばれます。
Split Action Barの使用方法は、AndoridManifestに以下のフラグを指定するだけです。

android:uiOptionsapplication要素、またはactivity要素に指定する
"none"特に指定を行わないデフォルトの状態
"splitActionBarWhenNarrow"画面の小さなデバイスを使用している場合、Split Action Barを使用する

具体的な実装コードは以下を参照してください。
10行目にて、splitActionBarWheNarrowを指定しています。

    <uses-sdk android:minSdkVersion="14" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <!-- andorid:uiOptions="splitActionBarWhenNarrow"を指定する。 -->
        <activity
            android:label="@string/app_name"
            android:name=".ActionBarSampleActivity"
            android:uiOptions="splitActionBarWhenNarrow">
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

android:uiOptions=”splitActionBarWhenNarrow”のフラグを指定しておけば、
タブレット端末かスマートフォン端末かの判別は自動でされます。
Split Action Barを利用すると、下部にMenuItemが表示されるため、ユーザに解りやすいUIを提供できると思います。
ただし、スマートフォン端末の場合には画面表示領域が限られていますので、ご利用は計画的に!

関連する記事:

Sponsored Link

Comments are closed.

技術書新刊 発売中

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

技術書新刊 発売中

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


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


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


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