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

来源：互联网发布：php定义json对象数组编辑：程序博客网时间：2024/06/05 20:55

接着上一篇些

二、利用自定义的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、代码地址

打开进去下载页面

0 0