Tab的学习和使用

最新推荐文章于 2025-07-01 13:43:14 发布

zjy_hll

最新推荐文章于 2025-07-01 13:43:14 发布

阅读量702

点赞数

本文深入解析了Android中TabHost组件的使用方法，包括添加Tab、设置Tab的内容和指示器，以及如何处理Tab的切换事件。还介绍了如何自定义Tab的布局和样式，提供了多个示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

public void setDefaultTab (String tag) 这两个函数很易懂，就是设置默认的Tab

public void setDefaultTab (int index) 通过tab名——tag或者index(从0开始)

protected void onRestoreInstanceState (Bundle state) 这两个函数的介绍可以

protected void onSaveInstanceState (Bundle outState) 参考 Activity的生命周期

onSaveInstanceState的调用遵循一个重要原则，即当系统“未经你许可”时销毁了你的activity，则onSaveInstanceState会被系统调用，这是系统的责任，因为它必须要提供一个机会让你保存你的数据（当然你不保存那就随便你了）。
onRestoreInstanceState方法需要注意的是，onSaveInstanceState方法和 onRestoreInstanceState方法“不一定”是成对的被调用的，onRestoreInstanceState被调用的前提是， activity A“确实”被系统销毁了，而如果仅仅是停留在有这种可能性的情况下，则该方法不会被调用，例如，当正在显示activity A的时候，用户按下HOME键回到主界面，然后用户紧接着又返回到activity A，这种情况下activity A一般不会因为内存的原因被系统销毁，故activity A的onRestoreInstanceState方法不会被执行。
另外，onRestoreInstanceState的bundle参数也会传递到onCreate方法中，你也可以选择在onCreate方法中做数据还原。

TabHost

那么我们要用到的Tab载体是TabHost，需要从TabActivity.getTabHost获取。

现在看看TabHost类，它有3个内嵌类： 1个类TabHost.TabSpec，2个接口TabHost.TabContentFactory和TabHost.OnTabChangeListener。

TabHost类的一些函数：

public void addTab (TabHost.TabSpec tabSpec) 添加tab，参数TabHost.TabSpec通过下面的函数返回得到

public TabHost.TabSpec newTabSpec (String tag) 创建TabHost.TabSpec

public void clearAllTabs () remove所有的Tabs

public int getCurrentTab () 获得当前Tab页

public String getCurrentTabTag () 获得当前Tab页的Tag标签

public View getCurrentTabView () 获得当前Tab页的视图

public View getCurrentView () 获得当前视图

public FrameLayout getTabContentView () 返回Tab content的FrameLayout

public TabWidget getTabWidget ()

public void setCurrentTab (int index) 设置当前的Tab by index

public void setCurrentTabByTag (String tag) 设置当前的Tab by tag

public void setOnTabChangedListener (TabHost.OnTabChangeListener l) 设置TabChanged事件的响应处理

public void setup () 这个函数后面介绍

TabHost.TabSpec

从上面的函数可以知道如何添加tab了，要注意，这里的Tag(标签)，不是Tab按钮上的文字。

而要设置tab的label和content，需要设置TabHost.TabSpec类。引用SDK里面的话——“A tab has a tab indicator, content, and a tag that is used to keep track of it.”，TabHost.TabSpec就是管理这3个东西：

public String getTag ()

public TabHost.TabSpec setContent //Tab页的内容

public TabHost.TabSpec setIndicator//Tab页标签

我理解这里的 Indicator就是Tab上的label，它可以

设置label： setIndicator (CharSequence label)

或者同时 设置label和icon： setIndicator (CharSequence label, Drawable icon)

或者直接 指定某个view： setIndicator (View view)

对于 Content，就是Tab里面的内容，可以

设置View的id： setContent(int viewId)

或者 TabHost.TabContentFactory的createTabContent(String tag)来处理： setContent(TabHost.TabContentFactory contentFactory)

或者用 new Intent来引入其他Activity的内容： setContent(Intent intent)

现在来看官方的Views/Tabs/Content By Id例子：

TabHost

代码

public class Tabs1 extends TabActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super .onCreate(savedInstanceState);

TabHost tabHost = getTabHost();

LayoutInflater.from( this ).inflate(R.layout.tabs1, tabHost.getTabContentView(), true );

tabHost.addTab(tabHost.newTabSpec( "tab1" )

.setIndicator( "tab1" )

.setContent(R.id.view1));

tabHost.addTab(tabHost.newTabSpec( "tab3" )

.setIndicator( "tab2" )

.setContent(R.id.view2));

tabHost.addTab(tabHost.newTabSpec( "tab3" )

.setIndicator( "tab3" )

.setContent(R.id.view3));

}

原来在获取TabHost后，需要用LayoutInflater来得到Layout，LayoutInflater在后面就详细介绍。R.layout.tabs1的内容：

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

android:layout_width= "fill_parent"

android:layout_height= "fill_parent" >

<TextView android:id= "@+id/view1"

android:background= "@drawable/blue"

android:layout_width= "fill_parent"

android:layout_height= "fill_parent"

android:text= "@string/tabs_1_tab_1" />

<TextView android:id= "@+id/view2"

android:background= "@drawable/red"

android:layout_width= "fill_parent"

android:layout_height= "fill_parent"

android:text= "@string/tabs_1_tab_2" />

<TextView android:id= "@+id/view3"

android:background= "@drawable/green"

android:layout_width= "fill_parent"

android:layout_height= "fill_parent"

android:text= "@string/tabs_1_tab_3" />

</FrameLayout>

<! -- strings.xml

<string name= "tabs_1_tab_1" >tab1</string>

<string name= "tabs_1_tab_2" >tab2</string>

<string name= "tabs_1_tab_3" >tab3</string>

-->

原来是用FrameLayout的！

而让Tab1的内容显示tab1且背景为Blue，是setContent(R.id.view1)这里引用了TextView1。现在就基本明白如何添加tab以及如何设置label和content了。

接下来看看Views/Tabs/Content By Factory的例子：

TabHost2

代码

public class Tabs2 extends TabActivity implements TabHost.TabContentFactory {

@Override

protected void onCreate(Bundle savedInstanceState) {

super .onCreate(savedInstanceState);

final TabHost tabHost = getTabHost();

tabHost.addTab(tabHost.newTabSpec( "tab1" )

.setIndicator( "tab1" , getResources().getDrawable(R.drawable.star_big_on))

.setContent( this ));

tabHost.addTab(tabHost.newTabSpec( "tab2" )

.setIndicator( "tab2" )

.setContent( this ));

tabHost.addTab(tabHost.newTabSpec( "tab3" )

.setIndicator( "tab3" )

.setContent( this ));

}

public View createTabContent(String tag) {

final TextView tv = new TextView( this );

tv.setText( "Content for tab with tag " + tag);

return tv;

}

可以看到通过override重写（重新实现）父类TabHost.TabContentFactory中的方法View createTabContent(String tag)来实现不同tab的不同content。同时在setContent的参数设置为相应的TabContentFactory。

原来createTabContent是在每个tab第一次显示时才调用的，随后再次显示该tab就不会再次调用的，我自己用Logcat查看到的！这一点很关键，就是说在createTabContent是在tab没有完全创建前调用的，这意味在 createTabContent里面是不能调用getCurrentTabView等之类的函数的，否则就出错！

至于Views/Tabs/Content By Intent例子，就只是贴出代码，不给截图了：

public class Tabs3 extends TabActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super .onCreate(savedInstanceState);

final TabHost tabHost = getTabHost();

tabHost.addTab(tabHost.newTabSpec( "tab1" )

.setIndicator( "list" )

.setContent( new Intent( this , List1. class )));

tabHost.addTab(tabHost.newTabSpec( "tab2" )

.setIndicator( "photo list" )

.setContent( new Intent( this , List8. class )));

// This tab sets the intent flag so that it is recreated each time

// the tab is clicked.

tabHost.addTab(tabHost.newTabSpec( "tab3" )

.setIndicator( "destroy" )

.setContent( new Intent( this , Controls2. class )

.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));

}

效果：Tab1的内容是List1的Activity，Tab2的是List8的Activity，Tab3的是controls2.Activity。

TabHost.OnTabChangeListener

TabHost.OnTabChangeListener接口只有一个抽象方法onTabChanged(String tagString)，明显地，在 onTabChanged(String tagString)方法里面swtich..case..来判断tagString分别处理就行了。

TabHost.setup()

在此贴出SDK doc里面的相关解释：

public void setup () Since: API Level 1
Call setup() before adding tabs if loading TabHost using findViewById(). However,You do not need to call setup() after getTabHost() in TabActivity. Example:

mTabHost = (TabHost)findViewById(R.id.tabhost);
mTabHost.setup();
mTabHost.addTab(TAB_TAG_1, "Hello, world!", "Tab 1" );

// 我的理解是，如果要用到findViewById来获取TabHost，然后add tabs的话，需要在addTab前call setup();

public void setup (LocalActivityManager activityGroup) Since: API Level 1
If you are using setContent(android.content.Intent), this must be called since the activityGroup is needed to launch the local activity. This is done for you if you extend TabActivity.

Parameters
activityGroup Used to launch activities for tab content.

标签/TabActivity 深度研究

何谓标签印象最深刻的应该是这个

Tab的学习和使用

现在我们将通过一系列的扩展来研究之

写道

1. 自定义TabActivity 使得标签处于屏幕下方
2. 各个标签所用布局既可在 *.xml 中定义也可在 *.java 中定义
3. 更改标签布局

1. 标签页在屏幕下方

写道

一个典型的标签Activity 是由2 部分构成的且其id都有规定即：
* TabWidget 用于展示标签页 id=tabs
* FrameLayout 用于展示隶属于各个标签的具体布局 id=tabcontent

* 基本布局如下：

xml代码

<?xml version= "1.0" encoding= "utf-8" ?>

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

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

android:layout_width= "fill_parent"

android:layout_height= "fill_parent" >

<LinearLayout

android:orientation= "vertical"

android:gravity= "bottom"

android:layout_width= "fill_parent"

android:layout_height= "fill_parent" >

<FrameLayout

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

android:layout_width= "fill_parent"

android:layout_height= "200dip" >

<RelativeLayout

android:id= "@+id/view1"

android:orientation= "vertical"

android:layout_width= "fill_parent"

android:layout_height= "fill_parent"

>

<TextView

android:id= "@+id/text"

android:layout_width= "wrap_content"

android:layout_height= "wrap_content"

android:text= "Hello to Johnny.Griffin!"

android:layout_centerInParent= "true"

android:textStyle= "bold|italic" />

<ImageView

android:layout_width= "fill_parent"

android:layout_height= "fill_parent"

android:src= "@drawable/robot"

android:layout_toLeftOf= "@id/text" />

</RelativeLayout>

<TextView

android:id= "@+id/view2"

android:layout_width= "fill_parent"

android:layout_height= "fill_parent"

android:text= "创新源于模仿！" />

<TextView

android:id= "@+id/view3"

android:layout_width= "fill_parent"

android:layout_height= "fill_parent"

android:text= "欢迎进入 droid 世界！" />

<ImageView

android:id= "@+id/view4"

android:layout_width= "fill_parent"

android:layout_height= "fill_parent"

android:src= "@drawable/robot" />

</FrameLayout>

<TabWidget

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

android:layout_width= "fill_parent"

android:layout_height= "wrap_content" />

</LinearLayout>

</TabHost>

* 得到TabHost tHost 仅在TabActivity中有效

   Java代码
     
 tHost = this.getTabHost();

* 创建4个标签并指定所使用的布局

Java代码

public static final String Tab1 = "Tab1" ;

public static final String Tab2 = "Tab2" ;

public static final String Tab3 = "Tab3" ;

public static final String Tab4 = "Tab4" ;

public static final String Tab5 = "Tab5" ;

tHost.addTab(tHost.newTabSpec(Tab1).setIndicator( "Tab 1" , getResources().getDrawable(R.drawable.icon)).setContent(R.id.view1));

tHost.addTab(tHost.newTabSpec(Tab2).setIndicator( "Tab 2" , getResources().getDrawable(R.drawable.beijing_small)).setContent(R.id.view2));

tHost.addTab(tHost.newTabSpec(Tab3).setIndicator( "Tab 3" ).setContent(R.id.view3));

tHost.addTab(tHost.newTabSpec(Tab4).setIndicator( "Tab 4" ).setContent(R.id.view4));

* 设定监听器用于监听标签间切换事件

tHost.setOnTabChangedListener( new OnTabChangeListener(){

@Override

public void onTabChanged(String tabId) {

// TODO Auto-generated method stub

}

});

* emulator 运行情况：

Tab的学习和使用

2. 在 *.java 中定义标签所需布局

Java代码

public class CustomLayout implements TabHost.TabContentFactory {

Activity activity;

LayoutInflater inflaterHelper;

LinearLayout layout;

public CustomLayout (Activity a) {

activity = a;

inflaterHelper = a.getLayoutInflater();

}

//tag 标记各个标签

public View createTabContent(String tag) {

return addCustomView(tag);

}

public View addCustomView(String id){

layout = new LinearLayout(activity);

layout.setOrientation(LinearLayout.VERTICAL);

if (id.equals(Tab1)){

ImageView iv = new ImageView(activity);

iv.setImageResource(R.drawable.beijing_big);

layout.addView(iv,

new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));

}

else if (id.equals(Tab2)){

EditText edit = new EditText(activity);

layout.addView(edit,

new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));

Button btn = new Button(activity);

btn.setText( "OK" );

btn.setWidth( 100 );

layout.addView(btn,

new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));

RadioGroup rGroup = new RadioGroup(activity);

rGroup.setOrientation(LinearLayout.HORIZONTAL);

RadioButton radio1 = new RadioButton(activity);

radio1.setText( "Radio A" );

rGroup.addView(radio1);

RadioButton radio2 = new RadioButton(activity);

radio2.setText( "Radio B" );

rGroup.addView(radio2);

layout.addView(rGroup,

new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));

}

else if (id.equals(Tab3)){

LinearLayout.LayoutParams param3 =

new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);

layout.addView(inflaterHelper.inflate(R.layout.hello, null ),param3);

}

else if (id.equals(Tab4)){

TextView tv = new TextView(activity);

tv.setText( "HelloTags!" );

tv.setGravity(Gravity.CENTER);

layout.addView(tv);

}

return layout;

}

* 如何使用：

   Java代码
     
 CustomLayout ct = new CustomLayout(this);  
   
 tHost.addTab(tHost.newTabSpec(Tab4).setIndicator("Tab 4").setContent(ct));

* emulator 运行结果:

Tab的学习和使用

3. 改变标签布局

写道

可能很多人对TabActivity 不满意原因之一：其很不美观而不美观的根源就是：标签的问题其图像和文字相互覆盖导致的

那么我们可以自己扩展么？当然

写道

TabWidget 理解：

1. TabWidget 为 horizontal 的 LinearLayout
2. 且其包含的标签又是一个RelativeLayout
3. 每个标签RelativeLayout 里面包含2个View: TextView ImageView

因此我们甚至可以推算出其布局为：

xml代码

<?xml version= "1.0" encoding= "utf-8" ?>

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

android:orientation= "horizontal"

android:layout_width= "fill_parent"

android:layout_height= "fill_parent"

>

<RelativeLayout

android:orientation= "vertical"

android:layout_width= "fill_parent"

android:layout_height= "wrap_content" >

<ImageView />

<TextView />

</RelativeLayout>

<RelativeLayout

android:orientation= "vertical"

android:layout_width= "fill_parent"

android:layout_height= "wrap_content" >

<ImageView />

<TextView />

</RelativeLayout>

<RelativeLayout

android:orientation= "vertical"

android:layout_width= "fill_parent"

android:layout_height= "wrap_content" >

<ImageView />

<TextView />

</RelativeLayout>

<RelativeLayout

android:orientation= "vertical"

android:layout_width= "fill_parent"

android:layout_height= "wrap_content" >

<ImageView />

<TextView />

</RelativeLayout>

</LinearLayout>

* 去掉系统默认的布局即在 setIndicator() 中置空修改如下：

   Java代码
     
 tHost.addTab(tHost.newTabSpec(Tab1).setIndicator("").setContent(ct));

写道

可能有人会说：那我不调用setIndicator() 不久可以了么不行否则会报错

* 自己定义布局并指定显示的内容

Java代码

public View composeLayout(String s, int i){

LinearLayout layout = new LinearLayout( this );

layout.setOrientation(LinearLayout.VERTICAL);

TextView tv = new TextView( this );

tv.setGravity(Gravity.CENTER);

tv.setSingleLine( true );

tv.setText(s);

layout.addView(tv,

new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));

ImageView iv = new ImageView( this );

iv.setImageResource(i);

layout.addView(iv,

new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));

return layout;

}

* 得到 TabWidget 实例 tw

   Java代码
     
 LinearLayout ll=(LinearLayout)tHost.getChildAt(0);   
         tw =(TabWidget)ll.getChildAt(1);

* 得到 TabWidget 内的具体某个Layout 并使用上面的布局 composeLayout()

   Java代码
     
 public void updateWidgetView(int i,String text,int image){  
         RelativeLayout rl =(RelativeLayout)tw.getChildAt(i);  
           
         rl.addView(composeLayout(text,image));  
     }