tabLayoutでタブを小さくして、icon非表示にして左側に配置する方法

tabLayoutは便利だけど、スマホの小さい画面にはタブが大きすぎるのでタブを小さくして画像も表示させない。さらに縦長に配置できるように左側にタブを配置する方法。タブ用のlayoutとコンテンツ部分がわかれているので画像など好きなように編集できる。同じように今回は2個だけどコンテンツ部分が複数変わる場合はそれ用にlayoutを作って読み込ませても良い。

まずはタブレイアウトの基本的な使い方から。

layout/tabtest.xml

タブとコンテンツ部分とその下にadmobの広告を入れる。コンテンツ部分はリストとテキスト。TabHostの下のLinearLayoutはタブ｜コンテンツと横に並べるためandroid:orientation=”horizontal”としておく。

<?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=”vertical” >

<TabHost
xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@android:id/tabhost”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:minHeight=”450sp” >

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:minHeight=”450sp”
android:orientation=”horizontal” >

<com.test.widget.SideTabWidget
android:id=”@android:id/tabs”
android:layout_width=”60dp”
android:layout_height=”wrap_content” />

<FrameLayout
android:id=”@android:id/tabcontent”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>

<LinearLayout
android:id=”@+id/first_content”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical” >

<ListView
android:id=”@+id/listView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginBottom=”15sp”
android:layout_weight=”1″ />

<TextView
android:id=”@+id/selfrank1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginLeft=”30sp”
android:layout_weight=”2″
android:minHeight=”50sp”
android:textColor=”#000000″ />

</LinearLayout>

<LinearLayout
android:id=”@+id/second_content”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical” >

<ListView
android:id=”@+id/listView2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginBottom=”15sp”
android:layout_weight=”1″ />

<TextView
android:id=”@+id/selfrank2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginLeft=”30sp”
android:layout_weight=”2″
android:minHeight=”50sp” />

</LinearLayout>

</FrameLayout>

</LinearLayout>

</TabHost>

<LinearLayout
android:id=”@+id/adView1″
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_weight=”3″
android:gravity=”bottom”
android:minHeight=”75dp”
android:orientation=”vertical” />

</LinearLayout>

layout/tabvie.xml

タブ部分の表示をiconなしのテキストだけにする。

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:id = “@+id/tabView”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:gravity = “center”>

<TextView
android:id=”@+id/TextView01″
android:text = “test”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:gravity = “center”
android:background = “@drawable/tabcolor”
android:padding = “5dp”/>

</LinearLayout>

src/pakkage/tabtest.java

getTabHost()でlayoutを取得して、newTabSpecで新しいタブを作る。タブのviewにテキストを入れたりして設定し、コンテンツ部分と紐づけ、addTabでlayoutに追加する。今回は2個。その後、コンテンツを入れる。

public class Tabtest extends TabActivity {

public void onCreate( Bundle savedInstanceState ) {

super.onCreate(savedInstanceState);
setContentView(R.layout.tabtest);

//TabHostクラスのインスタンス生成

TabHost tabHost = getTabHost();
//1
TabSpec tab1 = tabHost.newTabSpec(“タブ１”);
View view1 = View.inflate(getApplication(), R.layout.tabview, null);
TextView text1 = (TextView)view1.findViewById(R.id.TextView01);
text1.setText(“タブ１”);
tab1.setIndicator(view1);
tab1.setContent(R.id.first_content);
tabHost.addTab(tab1);

//2
TabSpec tab2 = tabHost.newTabSpec(“タブ２”);
View view2 = View.inflate(getApplication(), R.layout.tabview, null);
TextView text2 = (TextView)view2.findViewById(R.id.TextView01);
text2.setText(“タブ２”);
tab2.setIndicator(view2);
tab2.setContent(R.id.second_content);
tabHost.addTab(tab2);

//最初にカーソルを当てたいタブを指定
tabHost.setCurrentTabByTag(“タブ１”);

setListView(“1”);//タブ１の内容を追加　任意
setListView(“2”);//タブ２の内容を追加　任意

src/pakkage/SideTabWidget.java

TabWidgetを使うと上部にしか表示できないので、TabWidgetを継承したSideTabWidgetというクラスを作る。これはlayout/tabtest.xml（レイアウト）でTabWidgetの代わりにlayout部品として使うことができる。

public class SideTabWidget extends TabWidget {

public SideTabWidget( Context context ) {
super( context );
this.setOrientation( LinearLayout.VERTICAL );
}

public SideTabWidget( Context context, AttributeSet attrs ) {
super( context, attrs );
this.setOrientation( LinearLayout.VERTICAL );
}

public SideTabWidget( Context context, AttributeSet attrs, int defStyle ) {
super( context, attrs, defStyle );
this.setOrientation( LinearLayout.VERTICAL );
}

@Override
public void addView( View child ) {
if( child.getLayoutParams() == null ) {
LayoutParams params = new LayoutParams( ViewGroup.LayoutParams.FILL_PARENT, 0, 1.0f );
params.setMargins( 0, 0, 0, 0 );
child.setLayoutParams( params );
}

super.addView( child );
}
}