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