android Tabhost部件(一)

转载 2015年07月07日 17:49:18


 本文结合源代码和实例来说明TabHost的用法。

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




查看tabhost的源代码,主要实例变量有:

1
2
3
private TabWidget mTabWidget;
private FrameLayout mTabContent;
private List<TabSpec> mTabSpecs

 也就是说我们的tabhost必须有这三个东西,所以我们的.xml文件就会有规定:继续查看源代码:

1
2
3
4
5
6
7
8
9
10
11
12
if (mTabWidget == null) {
            thrownew 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) {
            thrownew RuntimeException(
                    "Your TabHost must have a FrameLayout whose id attribute is 'android.R.id.tabcontent'");
 }

 也就是说我们的.xml文件需要TabWidget和FrameLayout标签。

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

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

1
this.setContentView(com.android.internal.R.layout.tab_content);

 在系统的资源文件中可以看见这个layout


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

1
2
3
4
5
6
7
8
9
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布局

1
2
3
4
5
6
7
8
9
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,也就是接下来的代码:

1
2
3
LayoutInflater inflater_tab1 = LayoutInflater.from(this);   
inflater_tab1.inflate(R.layout.tab1, mTabHost.getTabContentView());  
inflater_tab1.inflate(R.layout.tab2, mTabHost.getTabContentView());

然后需要构建前面说的tabhost的第三个实例变量对应得内容,源代码中是这样的:

1
private List<TabSpec> mTabSpecs =new ArrayList<TabSpec>(2);

初始化是两个tab的空间然后会自动扩展:
好 我们构建我们的tabspec:

1
2
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(); 这个方法调用后就已经设置了,源代码:

1
2
3
if (mTabHost == null) {
            this.setContentView(com.android.internal.R.layout.tab_content);
}

也就是把系统的tab_content当做view设置。
运行后如下:

完整代码:

1
2
3
4
5
6
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个标签:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0"encoding="utf-8"?>  
    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,

1
2
setContentView(R.layout.main);   
TabHost mTabHost = (TabHost)findViewById(R.id.tabhost);

 接下来很重要的一步是要使用TabHost.setup();
作用是来初始化我们的TabHost容器:
源代码是这样说的:

1
2
Call setup() before adding tabsif loading TabHost using findViewById(). However  Youdo
      * not need to call setup() after getTabHost()in {@link android.app.TabActivity TabActivity}.

 也就是说通过findviewbyid,方法获得tabhost必须setup 而通过getTabHost则不用。
setup干什么呢:源代码

1
2
3
4
5
6
7
8
9
10
11
mTabWidget = (TabWidget) findViewById(com.android.internal.R.id.tabs);
        if(mTabWidget == null) {
            thrownew 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) {
            thrownew RuntimeException(
                    "Your TabHost must have a FrameLayout whose id attribute is 'android.R.id.tabcontent'");
        }

他主要是初始化了tabhost的两个实例变量,这里也回答了为什么我们的id必须使用系统定义的id的原因
接下来工作就和前面相同了:

1
2
3
4
5
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));

 完整代码:









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));




使用自定义的tab,我们必须要注意已下两点。
1)继承ActivityGroup
2)在onCreate 方法中 需要调用host.setup(this.getLocalActivityManager()); 
否者会出现以下异常。

Did you forget to call 'public void setup(LocalActivityManager activityGroup),

原因是主要是没有继承ActivityGroup和获得ActivityManager。





Android中TabHost部件使用

其效果图: 下面就是创建 Activity类 来实现 其功能: public class MainActivity extends TabActivity { public TabH...
  • chrp99
  • chrp99
  • 2013年06月21日 22:34
  • 2139

Android之TabHost布局 两种方式

Android布局之TabHost 中的两种实现方式,一种是继承TabActivity,从TabActivity中用getTabHost()方法获取TabHost。另一种是不继承TabActivity...
  • u013184970
  • u013184970
  • 2015年09月09日 16:03
  • 1189

TabHost的使用(三):动态添加Tab

package com.example.androidtest; import android.os.Bundle; import android.app.Activity; import andr...
  • wuli2496
  • wuli2496
  • 2014年04月17日 21:20
  • 865

android开发中TabHost使用方法

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

android Tabhost部件(四)--其他类似TabHost实现

http://blog.csdn.net/yangyu20121224/article/category/1431917/1 FragmentTabHost切换Fragment时避免UI重新加...
  • yan8024
  • yan8024
  • 2015年07月09日 14:12
  • 542

使用TabHost和ViewPager实现页面切换

在android的开发过程中经常会遇到页面切换的问题,其中一个解决办法是使用fragment加Handler来实现,不过有些情况下这种方法并不是最好的选择。比如,你需要滑动切换页面的时候。这时使用Ta...
  • wode_dream
  • wode_dream
  • 2015年01月04日 10:54
  • 5429

Android - TabHost 选项卡功能用法详解

一、实例         二.、TabHost介绍 TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计; 1. TabHost常用组件 T...
  • wpwbb510582246
  • wpwbb510582246
  • 2016年09月17日 10:11
  • 8226

tabhost动态修改图片和文字

package com.example.tabhost; import android.app.Activity; import android.app.LocalActivityManager; ...
  • aicpzl
  • aicpzl
  • 2017年02月08日 15:45
  • 464

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

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

【Android基础篇】TabHost实现底部导航栏

在App应用中,导航栏往往是用于解决功能分块的最佳控件,而底部导航栏更是导航栏中最常用的,因为它位于屏幕底部,用户操作起来会很方便。下面介绍一下使用Android控件TabHost实现底部导航栏的方法...
  • zgljl2012
  • zgljl2012
  • 2015年04月08日 13:55
  • 1655
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android Tabhost部件(一)
举报原因:
原因补充:

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