Android开发学习笔记——TabHost实例

转载自 http://blog.csdn.net/smoooothly/article/details/8705745

现在几乎所有信息的App都会用到tabHost这个布局。tabHost是FrameLayout的一个子类。它实现的功能就是用一个tab标签来控制全局，使用户可以在不同的tab之间跳转。

笔者的一个体会就是每次要新写这个东西总是忘东忘西，所以这次一定要把tabHost实现过程中需要注意的事项总结出来。

一、tabHost布局

首先说说tabhost在xml文件中的布局。tabHost的xml布局文件有三个需要注意的点，可以总结为"3个ID"。这3个ID分别是"@android:id/tabhost", "@android:id/tabcontent", "@android:id/tabs". 可见这三个ID实际是调用了android系统里的ID，而不是我们平常自定义的ID（对于自定义的ID我们通常这样写，@+id/consumedID）。这三个ID分别代表了三个东西，tabhost即tabhost布局，tabcontent即标签页的内容，tabs即标签。下面我们以3个ID为线索，写一个tabHost的xml文件

第一步，"tabhost"。即建立tabhost布局。如下，标红部分体现出了第一个ID。

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@android:id/tabhost"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:fitsSystemWindows="true" >

</TabHost>

第二步，主界面

在tabHost布局中，我们要把主界面的布局加进去。这个布局主要决定了，标签在屏幕上方还是下方，标签和内容的位置关系等。比如，我们可以用一个简单的LinearLayout来表示主界面由内容、标签两部分组成，且内容在标签上方。

第三步，"tabcontent"。即在主界面中定义标签页内容的位置。标红部分体现出了第二个ID。

<FrameLayout

android:id="@android:id/tabcontent"

           android:layout_width="match_parent"

android:layout_height="0dip"

           android:layout_weight="1"

android:foregroundGravity="bottom|fill_horizontal" >

       </FrameLayout>

这一部分有几个属性值得大家注意。我们发现大多数的tabHost都是在屏幕的上方或者是下方。这个属性就是由android:forgroundGravity控制的（蓝字部分）。在tabHost中，标签属于内容的前景，所以我们在内容里把它的前景设置为bottom，那么标签就会出现在屏幕下方，而不是默认的屏幕上方。同时，还有一个属性需要注意（绿字部分），由于我们并不会把标签页的内容真正的写在这里，所以这里只是标记了一个位置，所以我们需要将tabcontent的weight属性置为1，而layout_height属性置为0dip。否则就会出现标签没有显示在屏幕上的情况。

第四步，"tabs"。即定义标签的属性。标红部分体现出了第三个ID。

<TabWidget

 android:id="@android:id/tabs"

           android:layout_height="48dp">

       </TabWidget>

有一个专门的标签为tabs服务，那就是TabWidget。

所以，理解并记住了这三个ID，以及比较重要的几个属性，我们就可以顺利的将tabhost的xml布局文件写出。

activity_main.xml完整代码：

[html]view plaincopy

<!-- tabhost -->

<TabHostxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true">

<!-- 主界面 -->

<LinearLayout

android:orientation="vertical">

<!-- tabcontent -->

android:layout_weight="1"

android:foregroundGravity="bottom|fill_horizontal">

</FrameLayout>

<!-- tabs -->

android:id="@android:id/tabs"

android:layout_height="48dp">

</TabWidget>

</LinearLayout>

二、标签布局及一些准备工作

在我们开始在Activity使用这个布局文件之前，我们还需要做几个准备工作：1.几个需要在tabHost中切换的界面（Activity+xml）。2.每个标签的图标（如需要）以及文字（如需要），以及背景（最好写成selector）。3.标签样式的布局文件。

由于安卓系统自带的标签样式是非常朴素的，所以我们大多数情况下都需要自己定义标签样式。这个样式很随意，可以定义成上面图片下面文字，可以只有图片或者只有文字。（design.android上有一句话值得大家参考，“图片总是比文字有力量”大概这个意思）。我举一个只有文字的例子，因为比较简单：

main_tab_indicator.xml

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:clickable="true"

android:focusable="true"

android:gravity="center_vertical|center_horizontal"

<TextView

android:id="@+id/main_tab_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:paddingLeft="15dp"

android:paddingRight="15dp"/>

这段代码没有什么难度，只需要设计出你想要的样子就可以了。

然后我们给标签的背景颜色做一个selector，因为大多数情况下，标签在被聚焦或者没被聚焦的时候，需要有一个明确的样式上的不同。

main_tab_selector.xml

<selectorxmlns:android="http://schemas.android.com/apk/res/android">

<itemandroid:drawable="@color/tab_pressed"android:state_pressed="true"/>

<itemandroid:drawable="@color/tab_pressed"android:state_checked="true"/>

<itemandroid:drawable="@color/tab_pressed"android:state_selected="true"/>

<itemandroid:drawable="@color/tab_pressed"android:state_focused="true"/>

<itemandroid:drawable="@color/tab"/>

</selector>

注意，这与按钮的selector不同，因为按钮的seletor通常只需要处理被按和没有被按两种情况，但我们的标签还有一些其他的情况需要考虑，如被选中或者被聚焦。

这些都做好之后，文件结构应该是这样的：

三、在activity中加载tabhost

这些准备工作都结束之后，我们可以开始在Activity文件中使用所有的这些。注意使用tabHost的Activity需要继承TabActivity。

在Activity中主要要包含以下几个函数模块：

1.tabHost与xml文件关联

2.tabHost的标签与xml文件关联（在以下代码中的getTabView()函数）

3.tabHost的标签添加（initTabHost()函数）

下面可以结合代码和注释完整的看下：

[java]view plaincopy

package com.telecom.auxiliaryclass.controller;  

import android.app.TabActivity;  

import android.content.Intent;  

import android.os.Bundle;  

import android.view.LayoutInflater;  

import android.view.View;  

import android.widget.TabHost;  

import android.widget.TextView;  

import com.telecom.auxiliaryclass.R;  

publicclass MainActivity extends TabActivity  

{  

//定义TabHost类型变量

publicstatic TabHost tabHost = null;  

//为方便写循环，将tabHost的几个界面和标签文字均存成数组

publicstatic String[] activityNames = {"LectureActivity", "BrandActivity",  

"CategoryActivity", "SearchActivity", "PersonalActivity"};  

publicstatic Class[] activities = {LectureActivity.class, BrandActivity.class,  

           CategoryActivity.class, SearchActivity.class, PersonalActivity.class};  

publicstaticint[] tabStrings = {R.string.main_lecture, R.string.main_brand,  

           R.string.main_category, R.string.main_search, R.string.main_personal};  

@Override

protectedvoid onCreate(Bundle savedInstanceState)  

   {  

super.onCreate(savedInstanceState);  

//加载布局文件

       setContentView(R.layout.activity_main);  

       initialTabHost();  

   }  

/**

    * 初始化tabHost

    */

privatevoid initialTabHost()  

//直接关联@android:id/tabhost

       tabHost = getTabHost();  

//tabSpec用于设置标签属性，包括标签的样式和动作

       TabHost.TabSpec tabSpec;  

       Intent intent;  

//对5个标签分别进行设置，并加入到tabHost中

for (int i = 0; i < 5; i++)  

       {  

//新建一个tabSpec，newTabSpec的参数为标签的名称

           tabSpec = tabHost.newTabSpec(activityNames[i]);  

//对tabSpec的样式进行设置

           tabSpec.setIndicator(getTabView(i));  

//对tabSpec的动作进行设置

           intent = new Intent(this, activities[i]);  

           tabSpec.setContent(intent);  

//添加这个tabSpec

           tabHost.addTab(tabSpec);  

       }  

    * 返回一个标签的View

    * @param tag 标签index

    * @return

private View getTabView(int tag)  

       View v;  

       LayoutInflater li = getLayoutInflater();  

//加载标签的xml布局文件

       v = li.inflate(R.layout.main_tab_indicator, null);  

//设置标签布局

       TextView tv = (TextView) v.findViewById(R.id.main_tab_text);  

       tv.setText(tabStrings[tag]);  

       v.setBackgroundResource(R.drawable.main_tab_selector);  

return v;  

}  

OK了，当这些都做完，一个tabHost的框架就搭建起来了，我们可以看一下效果图：

好了，这就是一个最简单的tabHost实现，当然最难也差不多这样了，各位coder可以将它设计的更加绚丽。祝大家coding愉快！