用三种不同的方式实现TabHost功能（二）

接着上一篇些

二、利用自定义的Widget实现TabHost功能（可以是自定义view或TextView充当tabItem，以下以TextView为例）

这里我们就不用系统自带的widget，比较有局限，自定义的tabItem比较灵活一些；

主要思路是我们监听每个tabItem（textView）的点击事件，在点击事件中调用tabHost的setCurrentTabbyTag方法来更换activity

1、我们先看看布局文件，与前一篇文章相比，我们可以看到在tabHost标签中，有一个LinearLayout标签式没有多大变化的,

只是在该LinearLayout标签中添加了一个above属性，可以看到，我们要自己设置itmes的位置，灵活性显而易见。

我们将textView放到一个LinearLayout中来实现TabWidget的功能。

<span style="font-size:18px;"><?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:clickable="false"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/tab_title" >

        <TextView
            android:id="@+id/tabhost_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="TabHostTitle"
            android:textColor="@color/white"
            android:textSize="16sp" />
    </RelativeLayout>

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:background="@color/lucency">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <LinearLayout
                android:id="@+id/tab_items_layout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/tabbarback"
                android:layout_alignParentBottom="true"
                android:orientation="horizontal" >
                

                <TextView
                    android:id="@+id/tab_1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:clickable="true"
                    android:drawableTop="@drawable/tab_select_tab1"
                    android:gravity="center"
                    android:text="tab1"
                    android:textSize="14sp"
                    android:textColor="@color/white"
                    android:layout_gravity="center" />
                
                <TextView
                    android:id="@+id/tab_2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:clickable="true"
                    android:drawableTop="@drawable/tab_select_tab2"
                    android:gravity="center"
                    android:text="tab1"
                    android:textSize="14sp"
                    android:textColor="@color/white"
                    android:layout_gravity="center" />
                
                <TextView
                    android:id="@+id/tab_3"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:clickable="true"
                    android:drawableTop="@drawable/tab_select_tab3"
                    android:gravity="center"
                    android:text="tab1"
                    android:textSize="14sp"
                    android:textColor="@color/white"
                    android:layout_gravity="center" />
                
                <TextView
                    android:id="@+id/tab_4"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:clickable="true"
                    android:drawableTop="@drawable/tab_select_tab4"
                    android:gravity="center"
                    android:text="tab1"
                    android:textSize="14sp"
                    android:textColor="@color/white"
                    android:layout_gravity="center" />
                
                <TextView
                    android:id="@+id/tab_5"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:clickable="true"
                    android:drawableTop="@drawable/tab_select_tab5"
                    android:gravity="center"
                    android:text="tab1"
                    android:textSize="14sp"
                    android:textColor="@color/white"
                    android:layout_gravity="center" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@color/lucency"
                android:layout_above="@+id/tab_items_layout"
                android:orientation="vertical" >
                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.0"
                    android:visibility="gone" />
                <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="fill_parent"
                    android:layout_height="0.0dp"
                    android:layout_weight="1.0" />
            </LinearLayout>
        </RelativeLayout>
    </TabHost>
</LinearLayout></span>

2、我们先初始化TabItems

我们可以看到和上一篇不同，此处没有利用layoutInflater方法初始化，而是直接调用了findViewById来初始化tabItem

但是tabHost的初始化时调用了this.getTabHost()方法，因为我们在xml文件中是利用系统自带的id，但相同的是我们

都调用了tabHost的setUp方法，此处再强调一次，一定要注意此处的activity是继承自TabActivity；我们直接创建tabSpac

并添加到tabHost对象中。

<span style="font-size: 20px; white-space: pre;">	</span><span style="font-size:18px;">private void initTabs() {
		tab1 = (TextView) findViewById(R.id.tab_1);
		tab2 = (TextView) findViewById(R.id.tab_2);
		tab3 = (TextView) findViewById(R.id.tab_3);
		tab4 = (TextView) findViewById(R.id.tab_4);
		tab5 = (TextView) findViewById(R.id.tab_5);
		tab1.setOnClickListener(this);
		tab2.setOnClickListener(this);
		tab3.setOnClickListener(this);
		tab4.setOnClickListener(this);
		tab5.setOnClickListener(this);
		setTabIocnAndTextColor();
		/* 获取TabHost */
		mTabHost = this.getTabHost();
		//在加载Activity时 必须调用带参数的setUp方法
		mTabHost.setup(getLocalActivityManager());
		/* 分别设置两个标签页对应的activity页面 */
		mTabHost.addTab(mTabHost.newTabSpec(TAG_TAB1)
				.setIndicator(TAG_TAB1)
				.setContent(new Intent(this, Tab_1.class)));
		mTabHost.addTab(mTabHost.newTabSpec(TAG_TAB2)
				.setIndicator(TAG_TAB2)
				.setContent(new Intent(this, Tab_2.class)));
		mTabHost.addTab(mTabHost.newTabSpec(TAG_TAB3)
				.setIndicator(TAG_TAB3)
				.setContent(new Intent(this, Tab_3.class)));
		mTabHost.addTab(mTabHost.newTabSpec(TAG_TAB4)
				.setIndicator(TAG_TAB4)
				.setContent(new Intent(this, Tab_4.class)));
		mTabHost.addTab(mTabHost.newTabSpec(TAG_TAB5)
				.setIndicator(TAG_TAB5)
				.setContent(new Intent(this, Tab_5.class)));

	}</span>

3、下面我们看看onClick方法，每个case的功能都是一样的

（1）调用setCurrentTabByTag方法切换Activity

（2）调用setCompoundDrawablesWithIntrinsicBounds设置tabItem的图片

（3）调用setTextColor设置文字的颜色

（4）点击了该按钮之后就不容许再次点击了

<span style="white-space:pre">		</span>mTabHost.setCurrentTabByTag(TAG_TAB1);
		tab1.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.tab_before_tab1), null, null);
		tab1.setTextColor(getResources().getColor(R.color.maintopic));
		tab1.setClickable(false);

4、效果图

5、代码地址

打开进去下载页面