タブのデザインを変更する。

次にタブのデザインを変更します。

今回の基本で利用しているには「tabを利用してのviewを作成する。」のファイルです。

tab

デザインを変更する為に利用するのは、

tab.setIndicator(“tab”);

の関数で引数に文字を代入した時や、画像を代入をした場合には、デフォルトのタブのデザインに代入をしたタブが作成されますが、引数にviewクラスをいれる事で、viewを表示する事ができます。

ここで、viewクラスを継承したクラスを作成したものを、引数に用いて利用をしたのですが、どうもstateがselected（選ばれてる状態）の取得がうまくできなかったので、

整理できない底辺プログラマのメモブログさんを参照させていただきました。

ここで、view用のレイアウトファイルを用いました。

tablayoutfile.xml

<?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:background="@drawable/rectcolor"/>
</LinearLayout>

また、backgroundは以下に設定をする事で、stateにあわせて色の変更が可能です。

rectcolor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
 <item android:state_selected="true" >
 <color android:color="#555555" />  
 </item>
 <item android:state_selected="false" >   
 <color android:color="#222222" />  
 </item> 
</selector>

stateにあわせて色の変更ができるようなのですが、pressedのstateを用いたのですが、反応がありませんでした（pressedはボタンだと反応するらしいのですが）設定するクラスによって、有効なstateも違うようです。

以上でほぼ完成です。尚、タブのサイズは要素によって変わってしまうので、固定で表示できるようにmain.xmlでtabwidgetに値を指定してます。

他のソースは以下です。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/layout_root"
 android:layout_width="fill_parent" android:layout_height="fill_parent"
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical">
 <TabHost 
 android:id="@+id/tabhost" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent">
 <LinearLayout 
 android:id="@+id/linearLayout1" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:orientation="vertical">
 
 <FrameLayout 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:layout_weight="1"
 android:id="@android:id/tabcontent">
 <LinearLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@+id/contentlayout1">
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="layout1が表示されています。" />
 </LinearLayout>
 <LinearLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@+id/contentlayout2">
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="layout2が表示されています。" />
 </LinearLayout>
 </FrameLayout>
 <TabWidget 
 android:layout_width="fill_parent" 
 android:layout_height="60px" 
 android:id="@android:id/tabs"></TabWidget>
 </LinearLayout>
 </TabHost>
</LinearLayout>

TabMake.java

package in.andante.tabmake;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class TabMake extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);

 TabHost host = (TabHost)findViewById(R.id.tabhost);
 host.setup();
 TabSpec tab1 = host.newTabSpec("tab1");
 View view1 = View.inflate(getApplication(), R.layout.tablayoutfile, null);  
 TextView text = (TextView)view1.findViewById(R.id.TextView01);  
 text.setText("tab1");  
 tab1.setIndicator(view1); 
 tab1.setContent(R.id.contentlayout1);
 host.addTab(tab1);

 TabSpec tab2 = host.newTabSpec("tab2");
 View view2 = View.inflate(getApplication(), R.layout.tablayoutfile, null);  
 TextView text2 = (TextView)view2.findViewById(R.id.TextView01);  
 text2.setText("tab2");  
 tab2.setIndicator(view2); 
 tab2.setContent(R.id.contentlayout2);
 host.addTab(tab2);
 }
}

以上です。