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

スマートフォン端末で、アクションバーにタブを表示する

11月 25, 2011   //   by UpDown-G   //   ユーザインターフェース  //  No Comments

Android3.0から導入されたアクションバーには、タブを表示することができました。
本エントリでは、画面の小さな端末で、アクションバーにタブを表示する方法を紹介します。

#Android3.0でのタブの使用方法は以下の記事をご覧になってください。
ActionBarのタブを使用する

画面の小さな端末では、以下のスクリーンショット2つのActionBarのタブの使い方があります。

本エントリで紹介するメソッドは以下の3つです。

ActionBarクラスのメソッド概要
setNavigationMode()Navigationのモードを選択する。タブ表示を行う場合は、NAVIGATION_MODE_TABS
setDisplayShowHomeEnabled()ActionBarのアイコン表示を設定する
setDisplayOptions()ActionBar持つ、DISPLAY_SHOW_TITLEなどの設定フラグを変更する

それでは、つづきをどうぞ。

タブ表示を行う

ActionBarにタブ表示を行う為に必要なことは、以下の2つです。
・ActionBarクラスのaddTabメソッドを呼び出す。
・ActionBarのNavigarionModeをNAVIGATION_MODE_TABSに切り替える。

以下サンプルコード、9〜11行目でActionBarクラスのaddTabメソッドを呼び出し、タブを追加しています。
続いて、15行目でNavigationModeをNAVIGATION_MODE_TABSに切り替えています。

    public void onCreate(Bundle savedInstanceState) {
        //省略...

        // action bar を取得する
        final ActionBar mActionBar = getActionBar();
        
        // ActionBarにタブを表示する
        // このままでは表示されない
        mActionBar.addTab(mActionBar.newTab().setText("Tab 1").setTabListener(this));
        mActionBar.addTab(mActionBar.newTab().setText("Tab 2").setTabListener(this));
        mActionBar.addTab(mActionBar.newTab().setText("Tab 3").setTabListener(this));
        
        // ActionBarのNavigationModeを設定する
//        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
//        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

これで、以下のスクリーンショットの様に、ActionBarの二段目にタブが表示できます。

タイトルのActionBarを消す

スマートフォン端末はタブレット端末とは違い、画面の表示領域は決して大きくありません。
ActionBarにタブを表示し、さらにSplit Action Barで下部にMENUを表示している場合、ActionBarのみで
画面の大半を使用してしまうことになります。

そのような時には、タイトルを表示するActionBarを消して画面の表示領域を有効活用することができます。
タイトルを表示するActionBarを消す為に必要なことは、以下の2つです。
・ActionBarクラスのsetDisplayShowHomeEnabledメソッドでアイコンを表示しないようにする。
・ActionBarクラスのsetDisplayOptionsメソッドでタイトル名を表示しないようにする。

ActionBarクラスのsetDisplayShowHomeEnabledメソッドはアイコンの表示/非表示を指定するメソッドですが、
スマートフォン端末の場合、以下のスクリーンショットの様な効果があります。

setDisplayShowHomeEnabled(true)のとき

setDisplayShowHomeEnabled(false)のとき

二枚のスクリーンショットの様に、アイコンを非表示状態にすると、ActionBarのタブが上部に繰り上がります。
この状態で、ActionBarクラスのsetDisplayOptionsメソッドを利用し、タイトル名を非表示にすることで、
ActionBarのタブのみを表示することができます。

サンプルコードは以下のとおり。

        // 上部のサンプルコードの続き

        // アイコンを表示しない
        mActionBar.setDisplayShowHomeEnabled(false);
        // SHOW_TITLEのフラグを消すことで、タイトル表示を消す
        mActionBar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);

これで、以下のスクリーンショットのように、ActionBarのタブのみを上部に表示することができました。

関連する記事:

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本です