タブを画面の左側へ表示する
上記のようにタブを左側へ表示するには 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>
<!-- タブで選択されたときに表示するコンテンツ1 -->
<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>
<!-- タブで選択されたときに表示するコンテンツ2 -->
<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>
<!-- タブで選択されたときに表示するコンテンツ3 -->
<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 フォルダを作成し、以下の2ファイルを追加します。
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);
//******************************
// タブ1を設定
//******************************
// タブレイアウトを生成
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);
//******************************
// タブ2を設定
//******************************
// タブレイアウトを生成
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);
//******************************
// タブ3を設定
//******************************
// タブレイアウトを生成
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);
//******************************
// タブ1を初期選択させる
//******************************
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());
}
}
}
スクロールバーとか実装していないしこのままでは実用レベルではないかもしれないけど、
これをゴチャゴチャいじればそれっぽくなるのではないかと・・・思います。