自定义TabWidget

在开发过程中，默认的TabWidget不能满足我们对于UI的要求并且没有足够的属性工我们去修改，这个时候能够自定义TabWidget是非常必要的。自定义TabWidget组要运用的是TabSpec.setIndicator(View view)方法。

main.xml:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:id="@android:id/tabhost"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".Main" >       <RelativeLayout         android:layout_width="match_parent"         android:layout_height="match_parent" >           <TabWidget             android:id="@android:id/tabs"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_alignParentBottom="true" />           <FrameLayout             android:id="@android:id/tabcontent"             android:layout_width="match_parent"             android:layout_height="match_parent" >               <LinearLayout                 android:id="@+id/tabs1"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:orientation="vertical" >                   <TextView                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:text="我是tab1" />             </LinearLayout>               <LinearLayout                 android:id="@+id/tabs2"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:orientation="vertical" >                   <TextView                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:text="我是tab2" />             </LinearLayout>         </FrameLayout>     </RelativeLayout>   </TabHost>

供点击时切换的图片tabmini.xml:

?

1 2 3 4 5 6 7

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">       <item android:drawable="@drawable/check" android:state_selected="true"/>     <item android:drawable="@drawable/uncheck" android:state_selected="false"/>   </selector>

自定义view的布局文件custom.xml:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:orientation="vertical" >       <ImageView         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:src="@drawable/tabmini" />       <TextView         android:id="@+id/tv"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_marginBottom="0sp"         android:gravity="center_horizontal"/>   </LinearLayout>

最后是我们的main.java:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

package com.app.main;   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 Main extends Activity {       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);           TabHost tabHost = (TabHost) this.findViewById(android.R.id.tabhost);           // tabhost如果是以findViewById()这个方法获取的，必须调用setup()方法         tabHost.setup();           View view1 = this.getLayoutInflater().inflate(R.layout.custom, null);           TextView tv1 = (TextView) view1.findViewById(R.id.tv);           tv1.setText("tab1");           View view2 = this.getLayoutInflater().inflate(R.layout.custom, null);           TextView tv2 = (TextView) view2.findViewById(R.id.tv);           tv2.setText("tab2");           TabSpec spec1 = tabHost.newTabSpec("tab1").setIndicator(view1)                 .setContent(R.id.tabs1);           TabSpec spec2 = tabHost.newTabSpec("tab2").setIndicator(view2)                 .setContent(R.id.tabs2);           tabHost.addTab(spec1);           tabHost.addTab(spec2);       }   }

实现的效果：