タブを画面の左側へ表示する

上記のようにタブを左側へ表示するには TabHost か TabWidget をいじれば出来るのかと思いきや、

TabWidget 内がどうしても横に並んでしまい、出来ない。。需要がないのだろうか・・？

出来ないのは自分の頭が悪いだけかもしれないけど、

しかたないので Layout を駆使してそれっぽく作ってしまうことにしました。

まずは main.xml を下記のようにします。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="horizontal">

<!-- タブ表示エリア -->

<LinearLayout android:layout_height="fill_parent"

android:layout_width="wrap_content"

android:id="@+id/tabs"

android:orientation="vertical">

</LinearLayout>

<!-- タブの右側の線を表示するエリア -->

<LinearLayout android:layout_height="fill_parent"

android:layout_width="wrap_content"

android:id="@+id/tab_border"

android:paddingRight="5px"

android:background="#777777">

</LinearLayout>

<!-- タブで選択されたときに表示するコンテンツ１ -->

<LinearLayout android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/contentlayout1"

android:visibility="gone"

android:padding="10px">

<TextView android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="Tab1" />

</LinearLayout>

<!-- タブで選択されたときに表示するコンテンツ２ -->

<LinearLayout android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/contentlayout2"

android:visibility="gone"

android:padding="10px">

<TextView android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="Tab2" />

</LinearLayout>

<!-- タブで選択されたときに表示するコンテンツ３ -->

<LinearLayout android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/contentlayout3"

android:visibility="gone"

android:padding="10px">

<TextView android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="Tab3" />

</LinearLayout>

</LinearLayout>

次に res/drawable-nodpi フォルダを作成し、以下の２ファイルを追加します。

shape_tab_select.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<solid android:color="#aa777777" />

<padding android:left="10px" android:top="10px" android:right="10px" android:bottom="10px" />

<stroke android:width="1px" android:color="#333333" />

<corners android:topLeftRadius="10px"

android:topRightRadius="1px"

android:bottomLeftRadius="1px"

android:bottomRightRadius="10px" />

</shape>

shape_tab_unselect.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<solid android:color="#aaffffff" />

<padding android:left="10px" android:top="10px" android:right="10px" android:bottom="10px" />

<stroke android:width="1px" android:color="#333333" />

<corners android:topLeftRadius="10px"

android:topRightRadius="1px"

android:bottomLeftRadius="1px"

android:bottomRightRadius="10px" />

</shape>

最後にアクティビティを下記のようにしたら・・・はい、出来上がり。

public class SampleLeftTab extends Activity implements OnClickListener {

int selectTabId = 0;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

// タブ表示レイアウトを取得

LinearLayout tabsLayout = (LinearLayout)findViewById(R.id.tabs);

//******************************

// タブ１を設定

//******************************

// タブレイアウトを生成

LinearLayout linearLayoutContents = new LinearLayout(this);

// 画像を追加

ImageView image = new ImageView(this);

image.setImageResource(drawable.ic_btn_speak_now);

linearLayoutContents.addView(image);

// 文字列を追加

TextView text = new TextView(this);

text.setText("speak");

linearLayoutContents.addView(text);

// IDをセット

linearLayoutContents.setId(1);

// 縦表示にセット

linearLayoutContents.setOrientation(LinearLayout.VERTICAL);

// 表示形式を未選択の形式にセット

linearLayoutContents.setBackgroundResource(R.drawable.shape_tab_unselect);

// 表示位置を中央へセット

linearLayoutContents.setGravity(Gravity.CENTER);

// タブをクリック時のリスナーをセット

linearLayoutContents.setOnClickListener(this);

// タブ表示レイアウトへタブを追加

tabsLayout.addView(linearLayoutContents);

//******************************

// タブ２を設定

//******************************

// タブレイアウトを生成

linearLayoutContents = new LinearLayout(this);

// 画像を追加

image = new ImageView(this);

image.setImageResource(drawable.ic_delete);

linearLayoutContents.addView(image);

// 文字列を追加

text = new TextView(this);

text.setText("delete");

linearLayoutContents.addView(text);

// IDをセット

linearLayoutContents.setId(2);

// 縦表示にセット

linearLayoutContents.setOrientation(LinearLayout.VERTICAL);

// 表示形式を未選択の形式にセット

linearLayoutContents.setBackgroundResource(R.drawable.shape_tab_unselect);

// 表示位置を中央へセット

linearLayoutContents.setGravity(Gravity.CENTER);

// タブをクリック時のリスナーをセット

linearLayoutContents.setOnClickListener(this);

// タブ表示レイアウトへタブを追加

tabsLayout.addView(linearLayoutContents);

//******************************

// タブ３を設定

//******************************

// タブレイアウトを生成

linearLayoutContents = new LinearLayout(this);

// 画像を追加

image = new ImageView(this);

image.setImageResource(drawable.ic_dialog_alert);

linearLayoutContents.addView(image);

// 文字列を追加

text = new TextView(this);

text.setText("alert");

linearLayoutContents.addView(text);

// IDをセット

linearLayoutContents.setId(3);

// 縦表示にセット

linearLayoutContents.setOrientation(LinearLayout.VERTICAL);

// 表示形式を未選択の形式にセット

linearLayoutContents.setBackgroundResource(R.drawable.shape_tab_unselect);

// 表示位置を中央へセット

linearLayoutContents.setGravity(Gravity.CENTER);

// タブをクリック時のリスナーをセット

linearLayoutContents.setOnClickListener(this);

// タブ表示レイアウトへタブを追加

tabsLayout.addView(linearLayoutContents);

//******************************

// タブ１を初期選択させる

//******************************

setTab(1);

}

//**********************************************************************

// タブ選択時の処理

// @param int tabId 選択タブID

//**********************************************************************

public void setTab(int tabId) {

// 選択されたタブのレイアウトを取得

LinearLayout linearLayout = (LinearLayout)findViewById(tabId);

// 表示形式を選択中の形式にセット

linearLayout.setBackgroundResource(R.drawable.shape_tab_select);

// 選択されたタブのコンテンツのIDを取得

int resId = getResources().getIdentifier("contentlayout" + String.valueOf(tabId), "id", getPackageName());

// 選択されたタブのコンテンツのレイアウトを取得

LinearLayout linearLayoutContent = (LinearLayout)findViewById(resId);

// 選択されたタブのコンテンツの可視化

linearLayoutContent.setVisibility(LinearLayout.VISIBLE);

// 直前に選択されていたタブが存在する場合

if (selectTabId != 0) {

// 直前に選択されていたタブのレイアウトを取得

linearLayout = (LinearLayout)findViewById(selectTabId);

// 表示形式を未選択の形式にセット

linearLayout.setBackgroundResource(R.drawable.shape_tab_unselect);

// 直前に選択されていたタブのコンテンツのIDを取得

resId = getResources().getIdentifier("contentlayout" + String.valueOf(selectTabId), "id", getPackageName());

// 直前に選択されていたタブのコンテンツのレイアウトを取得

linearLayoutContent = (LinearLayout)findViewById(resId);

// 直前に選択されていたタブのコンテンツを非表示

linearLayoutContent.setVisibility(LinearLayout.GONE);

}

// 選択中のタブIDをセット

selectTabId = tabId;

}

//**********************************************************************

// タブをクリック時の処理

//**********************************************************************

@Override

public void onClick(View v) {

// IDが1,2,3のどれかの場合

if (v.getId() == 1 || v.getId() == 2 || v.getId() == 3) {

// タブ選択処理を実行

setTab(v.getId());

}

}

}

スクロールバーとか実装していないしこのままでは実用レベルではないかもしれないけど、

これをゴチャゴチャいじればそれっぽくなるのではないかと・・・思います。