TabHost基本用法

转载 2013年12月03日 18:00:06
本文结合源代码和实例来说明TabHost的用法。

      使用TabHost 可以在一个屏幕间进行不同版面的切换,例如android自带的拨号应用,截图:
1.png 

      查看tabhost的源代码,主要实例变量有:
private TabWidget mTabWidget;
    private FrameLayout mTabContent;
    private List<TabSpec> mTabSpecs 
   也就是说我们的tabhost必须有这三个东西,所以我们的.xml文件就会有规定:继续查看源代码:
if (mTabWidget ==
null) {
            throw
new RuntimeException(
                    "Your TabHost must have a TabWidget whose id attribute is 'android.R.id.tabs'");
        }



 mTabContent = (FrameLayout) findViewById(com.android.internal.R.id.tabcontent);
        if (mTabContent ==
null) {
            throw
new RuntimeException(
                    "Your TabHost must have a FrameLayout whose id attribute is 'android.R.id.tabcontent'");
        }
     也就是说我们的.xml文件需要TabWidget和FrameLayout标签。

接下来构建我们自己的tab实例:

      有两种方式可以实现:
      一种是继承TabActivity 类,可以使用android的自己内部定义好的.xml资源文件作容器文件。也就是在我们的代码中使用getTabHost(); , 而相应的后台源码是这样的:
this.setContentView(com.android.internal.R.layout.tab_content);
       在系统的资源文件中可以看见这个layout
3.png 

      有了容器,然后我们就需要我们为每个tab分配内容,当然要可以是如何类型的标签:
      例如我们构建一下.xml文件
  首先tab1.xml 是一个LinearLayout布局

?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
<?xml version="1.0"encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout01"android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="tab1 with linear layout"
android:id="@+id/TextView01"android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>

然后是tab2.xml是一个FrameLayout布局


?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<?xml version="1.0"encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
android:id="@+id/FrameLayout02"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout android:id="@+id/LinearLayout02"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="tab2"
android:id="@+id/TextView01"android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
 
</FrameLayout>
接着要注册这两个FrameLayout为tabhost的Content,也就是接下来的代码:

?
代码片段,双击复制
01
02
03
LayoutInflater inflater_tab1 = LayoutInflater.from(this);
inflater_tab1.inflate(R.layout.tab1, mTabHost.getTabContentView());
inflater_tab1.inflate(R.layout.tab2, mTabHost.getTabContentView());

然后需要构建前面说的tabhost的第三个实例变量对应得内容,源代码中是这样的:
private List<TabSpec> mTabSpecs =
new ArrayList<TabSpec>(2);
初始化是两个tab的空间然后会自动扩展:
好 我们构建我们的tabspec:

?
代码片段,双击复制
01
02
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 11").setContent(R.id.LinearLayout01));
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 11").setContent(R.id.FrameLayout02));

也就是把我们的2个layout作为他的content,当然FrameLayout中可以有其他的布局,来放我的组件。
我们不需要在代码里面设置setContentView();因为getTabHost(); 这个方法调用后就已经设置了,源代码:
  
if (mTabHost ==
null) {
            this.setContentView(com.android.internal.R.layout.tab_content);
        }
也就是把系统的tab_content当做view设置。
运行后如下:
2.bmp 
完整代码:

?
代码片段,双击复制
01
02
03
04
05
06
TabHost mTabHost = getTabHost();
LayoutInflater inflater_tab1 = LayoutInflater.from(this);
inflater_tab1.inflate(R.layout.tab1, mTabHost.getTabContentView());
inflater_tab1.inflate(R.layout.tab2, mTabHost.getTabContentView());
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 11").setContent(R.id.LinearLayout01));
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 11").setContent(R.id.FrameLayout02));

还有一种就是定义我们自己的tabhost:不用继承TabActivity

首先建立我们自己的.xml文件,当然要包含Tabhost,TabWidget,FrameLayout,着3个标签:

?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0"encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
 
</FrameLayout>
</LinearLayout>
</TabHost>


     注意的是:除了tabhost的id可以自定义外,其他的必须使用系统的id,为什么后面说,
       当然我们可以在FrameLayout里面添加view来作为tab的内容只需要在create tabspce时候添加就可以了,我们为了把每个tab的内容分开我们依然使用前面用到的两个tab xml文件
java代码:
      获取TabHost 通过findviewbyid,
setContentView(R.layout.main);   
        TabHost mTabHost = (TabHost)findViewById(R.id.tabhost);
    接下来很重要的一步是要使用TabHost.setup();
     作用是来初始化我们的TabHost容器:
    源代码是这样说的:
<p>Call setup() before adding tabs if loading TabHost using findViewById(). <i><b>However</i></b>: You do
      * not need to call setup() after getTabHost() in {@link android.app.TabActivity TabActivity}.
  也就是说通过findviewbyid,方法获得tabhost必须setup 而通过getTabHost则不用。
  setup干什么呢:源代码
mTabWidget = (TabWidget) findViewById(com.android.internal.R.id.tabs);
        if (mTabWidget ==
null) {
            throw
new RuntimeException(
                    "Your TabHost must have a TabWidget whose id attribute is 'android.R.id.tabs'");
        }

mTabContent = (FrameLayout) findViewById(com.android.internal.R.id.tabcontent);
        if (mTabContent ==
null) {
            throw
new RuntimeException(
                    "Your TabHost must have a FrameLayout whose id attribute is 'android.R.id.tabcontent'");
        }
   他主要是初始化了tabhost的两个实例变量,这里也回答了为什么我们的id必须使用系统定义的id的原因
  接下来工作就和前面相同了:
?
代码片段,双击复制
01
02
03
04
05
LayoutInflater inflater_tab1 = LayoutInflater.from(this);
inflater_tab1.inflate(R.layout.tab1, mTabHost.getTabContentView());
inflater_tab1.inflate(R.layout.tab2, mTabHost.getTabContentView());
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB a").setContent(R.id.LinearLayout01));
mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB b").setContent(R.id.FrameLayout02));

完整代码:
?
代码片段,双击复制
01
02
03
04
05
06
07
08
setContentView(R.layout.main);
TabHost mTabHost = (TabHost)findViewById(R.id.tabhost);
mTabHost.setup();
LayoutInflater inflater_tab1 = LayoutInflater.from(this);
inflater_tab1.inflate(R.layout.tab1, mTabHost.getTabContentView());
inflater_tab1.inflate(R.layout.tab2, mTabHost.getTabContentView());
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB a").setContent(R.id.LinearLayout01));
mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB b").setContent(R.id.FrameLayout02));

运行结果同上。

TabHost用法(2)

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInsta...
  • sun6223508
  • sun6223508
  • 2011年07月14日 23:15
  • 1347

FragmentTabHost使用方法

FragmentTabHost作为Android4.0版本的控件, 已经被项目广泛使用, 5.0版本又推出TabLayout+ViewPager显示多页. 我来讲解如何使用FragmentTabHos...
  • u012515223
  • u012515223
  • 2016年01月10日 08:01
  • 13156

TabHost的使用及原理

TabHost的使用 一、在了解TabHost之前,有以下知识是需要了解的: 1、TabHost的xml文件中,TabHost、TabWidget和显示TabHost的部分(通常用FrameLay...
  • sirenyizhi
  • sirenyizhi
  • 2016年02月16日 22:43
  • 1362

android开发中TabHost使用方法

一、效果图 二、android开发中TabHost使用方法详解  1、定义一个布局文件,将一个RadioGroup放在TabWidget中,然后将TabWidget放在TabHost中,其中TabW...
  • wpwbb510582246
  • wpwbb510582246
  • 2016年10月29日 16:07
  • 775

FragmentTabHost简单用法,以及Fragment生命周期

FragmentTabHost简单用法,及fragment生命周期
  • u014620028
  • u014620028
  • 2016年04月26日 18:50
  • 2284

【Android 应用开发】Android - TabHost 选项卡功能用法详解

TabHost效果图 :  源码下载地址 :         一. TabHost介绍 TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计; 1. T...
  • han1202012
  • han1202012
  • 2014年01月14日 00:01
  • 32558

tabhost基本用法(一)

TabHost基本用法(一) 接下来将会介绍两种TabHost的基本使用,虽然现在已经很少用(被废弃),但是要学习的话还是要认真从最基础的开始研究。 一、TabHost的组成TabHosat组件包...
  • u014150848
  • u014150848
  • 2016年10月31日 22:55
  • 116

tabhost基本用法(三)

TabHost基本用法(三) 前面的两种Tabhost的使用基本很少用了,因为不灵活,代码冗余,自从API11(3.0)后出现了Fragment,故要使用FragmentTabHost。activ...
  • u014150848
  • u014150848
  • 2016年10月31日 23:09
  • 86

tabhost基本用法(二)

TabHost基本用法(二) 这次是使用TabActivity来实现Tabhost的,虽然现在TabActivity已经被废弃了,因为不符合安卓的单一窗口的设置。 1. tab_conten...
  • u014150848
  • u014150848
  • 2016年10月31日 22:57
  • 97

Android零基础入门第70节:ViewPager轻松完成TabHost效果

使用ViewPager轻松替代TabHost,开放性和灵活性更大。
  • cqkxzsxy
  • cqkxzsxy
  • 2017年09月28日 10:30
  • 407
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:TabHost基本用法
举报原因:
原因补充:

(最多只允许输入30个字)