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