TabHost的两种使用方法

Android 实现tab视图有2种方法，一种就是继承tabactivity，一种是在布局页面中定义<tabhost>标签,

第一种：使用系统自带写好的TabHost（及继承自TabActivity类）

其具体步骤如下： （1）使用setContentView()方法显示界面。 （2）TabHost对象获得并设置。 （3）创建并设置TabSpec对象。 （4）向TabHost中添加TabSpec完成标签页的使用。

view
sourceprint?

01.

<?xml
version=

"1.0"

encoding=

"utf-8"

?>

02.

<FrameLayout
xmlns:android=

"http://schemas.android.com/apk/res/android"

03.

android:layout_width=

"fill_parent"

04.

android:layout_height=

"fill_parent"

>

05.

<LinearLayout
android:id=

"@+id/tab1"

06.

android:layout_width=

"fill_parent"

android:layout_height=

"fill_parent"

07.

androidrientation=

"vertical"

>

08.

<TextView
android:id=

"@+id/TextView1"

09.

android:text=

"This
is a tab1"

android:layout_width=

"fill_parent"

10.

android:layout_height=

"wrap_content"

>

11.

</TextView>

12.

</LinearLayout>

13.

<LinearLayout
android:id=

"@+id/tab2"

14.

android:layout_width=

"fill_parent"

android:layout_height=

"fill_parent"

15.

androidrientation=

"vertical"

>

16.

<TextView
android:id=

"@+id/TextView2"

17.

android:text=

"This
is a tab2"

android:layout_width=

"fill_parent"

18.

android:layout_height=

"wrap_content"

>

19.

</TextView>

20.

</LinearLayout>

21.

<LinearLayout
android:id=

"@+id/tab3"

22.

android:layout_width=

"fill_parent"

android:layout_height=

"fill_parent"

23.

androidrientation=

"vertical"

>

24.

<TextView
android:id=

"@+id/TextView3"

25.

android:text=

"This
is a tab3"

android:layout_width=

"fill_parent"

26.

android:layout_height=

"wrap_content"

>

27.

</TextView>

28.

</LinearLayout>

29.

</FrameLayout>

view
sourceprint?

01.

import

android.app.AlertDialog;

02.

import

android.app.Dialog;

03.

import

android.app.TabActivity;

04.

import

android.content.DialogInterface;

05.

import

android.os.Bundle;

06.

import

android.view.LayoutInflater;

07.

import

android.widget.TabHost;

08.

09.

public

class

Test_TabWidget

extends

TabActivity
{

10.

/**
Called when the activity is first created. */

11.

private

TabHost
tabHost;

12.

13.

@Override

14.

public

void

onCreate(Bundle
savedInstanceState){

15.

super

.onCreate(savedInstanceState);

16.

//
setContentView(R.layout.main);

17.

tabHost
=

this

.getTabHost();

18.

LayoutInflater
li = LayoutInflater.from(

this

);

19.

li.inflate(R.layout.main,
tabHost.getTabContentView(),

true

);

20.

tabHost.addTab(tabHost.newTabSpec(

"Tab_1"

).setContent(R.id.tab1)

21.

.setIndicator(

"TAB1"

,

22.

this

.getResources().getDrawable(R.drawable.img1)));

23.

tabHost.addTab(tabHost.newTabSpec(

"Tab_2"

).setContent(R.id.tab2)

24.

.setIndicator(

"TAB2"

,

25.

this

.getResources().getDrawable(R.drawable.img2)));

26.

tabHost.addTab(tabHost.newTabSpec(

"Tab_3"

).setContent(R.id.tab3)

27.

.setIndicator(

"TAB3"

,

28.

this

.getResources().getDrawable(R.drawable.img3)));

29.

tabHost.setCurrentTab(

1

);

30.

//
tabHost.setBackgroundColor(Color.GRAY);

31.

tabHost.setOnTabChangedListener(

new

TabHost.OnTabChangeListener()
{

32.

33.

public

void

onTabChanged(String
tabId){

34.

Dialog
dialog =

new

AlertDialog.Builder(Test_TabWidget.

this

)

35.

.setTitle(

"提示"

).setMessage(

36.

"选中了"

+
tabId +

"选项卡"

).setIcon(R.drawable.icon).setPositiveButton(

"确定"

,

new

DialogInterface.OnClickListener(){

37.

38.

public

void

onClick(DialogInterface
dialog,

39.

int

which)
{

40.

//
TODO Auto-generated method stub

41.

42.

}

43.

44.

}).create();

45.

dialog.show();

46.

47.

}

48.

49.

});

50.

}

51.

}

第二种：就是定义我们自己的tabHost：不用继承TabActivity。

在自定义TabHost时需要注意，创建TabHost时需要以下3个步骤： （1）在xml资源文件中创建TabHost节点，并将id设置为tabhost。 （2）创建TabWidget子节点，并设置id为tabs。 （3）创建FrameLayout子节点，用于显示内容，其id为tabcontent。 与使用TabActivity相比较不难发现，自定义TabHost时不需要继承TabActivity了，只需要简单继承Activity就可以了，这无疑给我们编程提供了更大的自由发挥的空间。因为我们知道继承虽然会给我们的编程带来很大程度的方便，但也同样带来了很多的条条
框框的限制。 让我们着重来看第二步获得TabHost对象，这里的获得TabHost对象的方法与使用TabActivity时又不一样了，具体方法为： m_TabHost = (TabHost)findViewById(android.R.id.tabhost);我们发现得到TabHost的方法是最简单、最常见的findViewById()方法！这里的参数就是android.R.id.tabhost，也就是在xml资源文件中我们实现定义的： android:id="@android:id/tabhost" 需要注意的是，在获得了TabHost之后，我们需要调用：
TabHost.setup()调用了该方法之后，TabHost才设置完成可以正常使用。而在使用TabActvity时则不需这一步，因为在getTabHost()方法中已经完成了设置的工作。

view
sourceprint?

01.

<?xml
version=

"1.0"

encoding=

"utf-8"

?>

02.

<TabHost
xmlns:android=

"http://schemas.android.com/apk/res/android"

03.

android:id=

"@+id/TabHost01"

android:layout_width=

"fill_parent"

04.

android:layout_height=

"fill_parent"

>

05.

<LinearLayout
android:layout_width=

"fill_parent"

06.

android:orientation=

"vertical"

android:layout_height=

"fill_parent"

>

07.

<FrameLayout
android:id=

"@android:id/tabcontent"

//这里的id一定要是"@android:id/tabcontent"

08.

android:layout_width=

"fill_parent"

09.

android:layout_height=

"fill_parent"

>

10.

<LinearLayout
android:id=

"@+id/LinearLayout1"

11.

android:layout_width=

"fill_parent"

12.

android:layout_height=

"wrap_content"

>

13.

<TextView
android:text=

"one"

14.

android:id=

"@+id/TextView01"

android:layout_width=

"wrap_content"

15.

android:layout_height=

"wrap_content"

>

16.

</TextView>

17.

</LinearLayout>

18.

<LinearLayout
android:id=

"@+id/LinearLayout2"

19.

android:layout_width=

"wrap_content"

20.

android:layout_height=

"wrap_content"

>

21.

<TextView
android:text=

"two"

22.

android:id=

"@+id/TextView02"

android:layout_width=

"fill_parent"

23.

android:layout_height=

"wrap_content"

>

24.

</TextView>

25.

</LinearLayout>

26.

<LinearLayout
android:id=

"@+id/LinearLayout3"

27.

android:layout_width=

"wrap_content"

28.

android:layout_height=

"wrap_content"

>

29.

<TextView
android:text=

"three"

30.

android:id=

"@+id/TextView03"

android:layout_width=

"fill_parent"

31.

android:layout_height=

"wrap_content"

>

32.

</TextView>

33.

</LinearLayout>

34.

</FrameLayout>

35.

<TabWidget
android:id=

"@android:id/tabs"

//注意id表述方式，一定要是"@android:id/tabs"

36.

android:layout_width=

"fill_parent"

37.

android:layout_height=

"wrap_content"

/>

38.

</LinearLayout>
</TabHost>

view
sourceprint?

01.

import

android.app.Activity;

02.

import

android.os.Bundle;

03.

import

android.util.Log;

04.

import

android.view.LayoutInflater;

05.

import

android.widget.TabHost;

06.

07.

public

class

Test_TabHost

extends

Activity
{

08.

/**
Called when the activity is first created. */

09.

private

TabHost
tabHost;

10.

11.

@Override

12.

public

void

onCreate(Bundle
savedInstanceState){

13.

super

.onCreate(savedInstanceState);

14.

setContentView(R.layout.main);

15.

try

{

16.

tabHost
=(TabHost)

this

.findViewById(R.id.TabHost01);

17.

tabHost.setup();

18.

19.

tabHost.addTab(tabHost.newTabSpec(

"tab_1"

)

20.

.setContent(R.id.LinearLayout1)

21.

.setIndicator(

"TAB1"

,

this

.getResources().getDrawable(R.drawable.img1)));

22.

tabHost.addTab(tabHost.newTabSpec(

"tab_2"

)

23.

.setContent(R.id.LinearLayout2).setIndicator(

"TAB2"

,

24.

this

.getResources().getDrawable(R.drawable.img2)));

25.

tabHost.addTab(tabHost.newTabSpec(

"tab_3"

)

26.

.setContent(R.id.LinearLayout3).setIndicator(

"TAB3"

,

27.

this

.getResources().getDrawable(R.drawable.img3)));

28.

tabHost.setCurrentTab(

1

);

29.

}

catch

(Exception
ex){

30.

ex.printStackTrace();

31.

Log.d(

"EXCEPTION"

,
ex.getMessage());

32.

}

33.

}

34.

}

PS

1、android中的TabActivity是专门用来放置TabHost组件的，但是很遗憾，非常固定，必须放在顶部，对于单手使用手机的人来说，很不方便。所以研究了一下如何将TabBar放置底部，具体思路是在xml布局文件中，将TabWidget放于FrameLayout的下面（两者是垂直线性的关系），并分配各个组件的权重。另外，如果想去掉Tab中那个丑陋的白线，可以通过设置其Padding实现。

2、让自己的类继承TabActivity，然后通过调用getTabHost()方法得到tabhost对象，然后把自己写好的数据展示的布局文件加载到tabhost中，就可以实现了。最后是通过调用addTab（）方法添加标签的相关属性（如：标签名称，标签图片，标签内容布局）。

而如果通过XML文件配置tabHost则需要注意的是，framelayout,tabwidget标签的id都必须引用系统的id（@android:id/tabcontent,@android:id/tabs），不然会报异常.在程序用使用findViewById()加载tabhost，然后调用tabhost.setup()方法初始化tabhost，后面的步骤则和上面一种一样