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のタブのみを上部に表示することができました。