Android Tab:面板标签控件

在有限的手机屏幕空间内,当要浏览的内容较多,无法在一个屏幕空间内全部显示时,可以使用滚动视图来延长屏幕的空间。

当浏览的内容具有很强的类别性质时,更合适的方法是将不同类别的内容集中到各自的面板中,这时就需要使用面板标签(Tab)组件了。

Tab 组件利用面板标签把不同的面板内容切换到屏幕上,以显示不同类别的内容。

下面通过一个实例来了解一下 Tab 组件的使用方法。在工程 WidgetDemo 的布局文件 main.xml 中添加一个名为 TabDemo 的 Button,用以启动 TabActivity。

在 main.xml 中添加代码如下:

 
  1. <Button
  2. android:id="@+id/button13"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. android:text="TabDemo"/>

单击 Button 并启动 GridViewActivity 的代码如下:

 
  1. Button tabbtn = (Button)this.findViewById(R.id.button13);
  2. tabbtn.setOnClickListener(new View.OnClickListener(){
  3. @Override
  4. public void onClick(View v){
  5. Intent intent;
  6. intent = new Intent(MainActivity.this,TabActivity .class);
  7. startActivity(intent);
  8. }
  9. });

同时在 AndroidManifest.xml 文件中声明该 Activity:

<activity android:name=".TabActivity"/>

TabActivity 的运行效果如图 1 所示。

TabActivity运行结果
图 1  TabActivity 的运行结果


要使用 Tab 必然涉及它的容器 TabHost,TabHost 包括 TabWigget 和 FrameLayout 两部分。TabWidget 就是每个 Tab 的标签,FrameLayout 是 Tab 的内容。

TabActivity 使用的布局文件是 tab.xml。在 tab.xml 中定义了每个 Tab 中要显示的内容,代码如下:

 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/tabhost"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent">
  6.  
  7. <LinearLayout
  8. android:layout_width="fill_parent"
  9. android:layout_height="fill_parent"
  10. android:orientation="vertical">
  11.  
  12. <TabWidget
  13. android:id="@android:id/tabs"
  14. android:layout_width="fill_parent"
  15. android:layout_height="wrap_content" />
  16.  
  17. <FrameLayout
  18. android:id="@android:id/tabcontent"
  19. android:layout_width="fill_parent"
  20. android:layout_height="fill_parent">
  21.  
  22. <TextView
  23. android:id="@+id/tab1"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:text="Tab1页面"
  27. android:textSize="40dp" />
  28.  
  29. <TextView
  30. android:id="@+id/tab2"
  31. android:layout_width="wrap_content"
  32. android:layout_height="wrap_content"
  33. android:text="Tab2页面"
  34. android:textSize="40dp" />
  35.  
  36. <TextView
  37. android:id="@+id/tab3"
  38. android:layout_width="wrap_content"
  39. android:layout_height="wrap_content"
  40. android:text="Tab3页面"
  41. android:textSize="40dp" />
  42. </FrameLayout>
  43. </LinearLayout>
  44. </TabHost>

在 FrameLayout 中我们放置了三个 TextView 组件,分别对应三个 Tab 所显示的内容,当切换不同的 Tab 时会自动显示不同的 TextView 内容。

在主程序 TabActivity 的 OnCreate() 方法中,首先获得 TabHost 的对象,并调用 setup() 方法进行初始化,然后通过 TabHost.TabSpec 增加 Tab 页,通过 setContent() 增加当前 Tab 页显示的内容,通过 setIndicator 增加页的标签,最后设定当前要显示的 Tab 页。

TabActivity 的代码如下:

 
  1. package introduction.android.widgetdemo;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.widget.TabHost;
  6.  
  7. public class TabActivity extends Activity {
  8.  
  9. public void onCreate(Bundle savedInstanceState) {
  10. super.onCreate(savedInstanceState);
  11. setContentView(R.layout.tab);
  12. // 步骤1:获得TabHost的对象,并进行初始化setup()
  13. TabHost tabs = (TabHost) findViewById(R.id.tabhost);
  14. tabs.setup();
  15. //步骤2:获得TabHost.TabSpec增加tab的一页,通过setContent()增加内容,通过setIndicator增加页的标签
  16. /*增加第一个Tab */
  17. TabHost.TabSpec spec = tabs.newTabSpec("Tag1");
  18. //单击Tab要显示的内容
  19. spec.setContent(R.id.tab1);
  20. /* 显示Tabl内容*/
  21. spec.setIndicator("Tab1");
  22. tabs.addTab(spec);
  23. /* 增加第二个Tab*/
  24. spec = tabs.newTabSpec("Tag2");
  25. spec.setContent(R.id.tab2);//单击Tab要显示的内容
  26. /* 显示Tab2内容 */
  27. spec.setIndicator("Tab2");
  28. tabs.addTab(spec);
  29. /*增加第三个Tab */
  30. spec = tabs.newTabSpec("Tag3");
  31. spec.setContent(R.id.tab3);//单击Tab要显示的内容
  32. /* 显示Tab3内容*/
  33. spec.setIndicator("Tab3");
  34. tabs.addTab(spec);
  35. /* 步骤3:可通过setCurrentTab(index)指定显示的页,从0开始计算*/
  36. tabs.setCurrentTab(0);
  37. }
  38. }

除了使用上述方法设置 Tab 页面的显示内容外,还可以使用 setContent(Intent)方法启动某个 Activity,并将该 Activity 的视图作为 Tab 页面的内容。

例如:

 
  1. Intent intent = new Intent().setClass(this,AlbumsActivity .class);
  2. spec = tabHost.newTabSpec("albums")
  3. .setIndicator("Albums",res.getDrawable(R.drawable.ic_tab_albums)).setContent(intent);
  4. tabHost.addTab(spec);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值