Android选项卡TabHost功能和用法

1、选项卡TabHost介绍
TabHost可以方便地在窗口上放置多个标签页，每个标签页相当于获得了一个与外部容器大小相同的组件摆放区域
TabHost是一个简单的容器，提供如下两种方法来创建选项卡
newTabSpec(String tag):创建选项卡
addTab(TabHost.TabSpec tabSpec):添加选项卡
使用TabHost有三种方法

2、方法1，继承TabActivity
主布局文件不需要定义TabHost组件，这里用三个垂直的LinearLayout作为标签页，每个标签页里面有两个TextView组件，main_tab.xml代码如下：

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@android:id/tabcontent"android:layout_width="match_parent"android:layout_height="match_parent"><!-- 定义第一个标签页的内容 --><LinearLayoutandroid:id="@+id/tab01"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第一个标签页的第1个TextView组件"android:textSize="8pt" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第一个标签页的第2个TextView组件"android:textSize="8pt" /></LinearLayout><!-- 定义第二个标签页的内容 --><LinearLayoutandroid:id="@+id/tab02"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第二个标签页的第1个TextView组件"android:textSize="8pt" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第二个标签页的第2个TextView组件"android:textSize="8pt" /></LinearLayout><!-- 定义第三个标签页的内容 --><LinearLayoutandroid:id="@+id/tab03"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第三个标签页的第1个TextView组件"android:textSize="8pt" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第三个标签页的第2个TextView组件"android:textSize="8pt" /></LinearLayout>
</FrameLayout>

在Java代码中将Activity继承TabActivity，具体代码如下：


package com.example.tabhosttest;import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.Toast;public class MainActivity extends TabActivity
{@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);//setContentView(R.layout.main_tab);// 获取该Activity里面的TabHost组件TabHost tabHost = getTabHost();LayoutInflater.from(this).inflate(R.layout.main_tab,  tabHost.getTabContentView(), true);// 创建第一个Tab页/*TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1").setIndicator("标签页一") // 设置标题.setContent(R.id.tab01); //设置内容// 添加第一个标签页tabHost.addTab(tab1);TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2").setIndicator("标签页二").setContent(R.id.tab02);// 添加第二个标签页tabHost.addTab(tab2);TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3").setIndicator("标签页三").setContent(R.id.tab03);// 添加第三个标签页tabHost.addTab(tab3);*//* 以上创建和添加标签页也可以用如下代码实现 */tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("标签页一").setContent(R.id.tab01));tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("标签页二").setContent(R.id.tab02));tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("标签页三").setContent(R.id.tab03));//标签切换事件处理，setOnTabChangedListener  tabHost.setOnTabChangedListener(new OnTabChangeListener(){    @Override  // tabId是newTabSpec参数设置的tab页名，并不是layout里面的标识符idpublic void onTabChanged(String tabId) {  if (tabId.equals("tab1")) {   //第一个标签  Toast.makeText(MainActivity.this, "点击标签页一", Toast.LENGTH_SHORT).show();}  if (tabId.equals("tab2")) {   //第二个标签  Toast.makeText(MainActivity.this, "点击标签页二", Toast.LENGTH_SHORT).show();}  if (tabId.equals("tab3")) {   //第三个标签  Toast.makeText(MainActivity.this, "点击标签页三", Toast.LENGTH_SHORT).show();}  }              }); }
}

这里有两个地方注意一下，第一没有使用setContentView，而是用inflate方法；第二在设置标签页改变监听器时，onTabChanged的参数tabId是使用newTabSpec方法的参数设置的标签页名称，而不是布局文件中标签页的标识符Id；第三为了测试方便使用了Toast，
关于inflate和Toast，下面再学习，先简单了解一下
LayoutInflater的作用是将xml布局文件实例话，Toast是在屏幕上显示提示信息
点击第二个标签页之后，显示效果如下图9-2-1所示：

图 9-2-1

3、方法2，在布局文件中使用TabHost，不用继承TabActivity
使用findViewById获取TabHost组件
1 在界面布局中定义TabHost组件，并为该组件定义选项卡内容
2 使用findViewById获取TabHost组件
3 通过TabHost对象的方法来创建和添加选项卡
布局文件为activity_main.xml如下：

<TabHostxmlns:android="http://schemas.android.com/apk/res/android"android:id="@android:id/tabhost"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"><LinearLayout android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><!-- TabWidget组件id值不可变--><TabWidget android:id="@android:id/tabs"android:layout_width="match_parent"android:layout_height="wrap_content"></TabWidget><!-- FrameLayout布局，id值不可变--><FrameLayout android:id="@android:id/tabcontent"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_above="@android:id/tabs"><!-- 第一个tab的布局 -->  <LinearLayout  android:id="@+id/tab1"  android:layout_width="match_parent"  android:layout_height="match_parent" >  <TextView  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="第一个tab的布局" />  </LinearLayout>  <!-- 第二个tab的布局 -->  <LinearLayout  android:id="@+id/tab2"  android:layout_width="match_parent"  android:layout_height="match_parent" >  <TextView  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="第二个tab的布局" />  </LinearLayout>  </FrameLayout>     </LinearLayout>
</TabHost>

java代码如下：

package com.example.tabhost;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

TabHost tab = (TabHost) findViewById(android.R.id.tabhost);

//初始化TabHost容器
tab.setup();
//在TabHost创建标签，然后设置：标题／图标／标签页布局
tab.addTab(tab.newTabSpec("tab1").setIndicator("本地音乐" , null).setContent(R.id.tab1));
tab.addTab(tab.newTabSpec("tab2").setIndicator("网络音乐" , null).setContent(R.id.tab2));

}

}

这段非转载代码，用的和作者不是一个xml，效果图如下：

4、方法3基本和方法2类似，不用继承TabActivity，只是Tab的内容分开到单独的xml文件，每个标签页都需要inflate一次，和方法2最大的区别就是标签页分开到不同的xml文件中
tab1对应的tab1.xml：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/tab01"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第一个标签页的第1个TextView组件"android:textSize="8pt" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第一个标签页的第2个TextView组件"android:textSize="8pt" />
</LinearLayout>

tab2对应的tab2.xml：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/tab02"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第二个标签页的第1个TextView组件"android:textSize="8pt" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第二个标签页的第2个TextView组件"android:textSize="8pt" />
</LinearLayout>

tab3对应的tab3.xml：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/tab03"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第三个标签页的第1个TextView组件"android:textSize="8pt" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第三个标签页的第2个TextView组件"android:textSize="8pt" />
</LinearLayout>

主布局文件main.xml：

<?xml version="1.0" encoding="utf-8"?>
<TabHostxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/tabhost"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TabWidgetandroid:id="@android:id/tabs"android:layout_width="match_parent"android:layout_height="wrap_content"/><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="match_parent"android:layout_height="match_parent"></FrameLayout></LinearLayout>
</TabHost>

Java代码如下：


package com.example.tabhosttest;import android.app.Activity;
import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.Toast;public class MainActivity extends Activity
{@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);// 方法2、3使用：setContentView(R.layout.main);// 获取该Activity里面的TabHost组件// 方法1使用：// TabHost tabHost = getTabHost();// 方法1使用：// LayoutInflater.from(this).inflate(R.layout.main_tab, tabHost.getTabContentView(), true);// 方法2、3使用TabHost tabHost = (TabHost)findViewById(R.id.tabhost);tabHost.setup();// 方法3使用，动态载入xml，不需要ActivityLayoutInflater.from(this).inflate(R.layout.tab1, tabHost.getTabContentView());LayoutInflater.from(this).inflate(R.layout.tab2, tabHost.getTabContentView());LayoutInflater.from(this).inflate(R.layout.tab3, tabHost.getTabContentView());// 创建第一个Tab页/*TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1").setIndicator("标签页一") // 设置标题.setContent(R.id.tab01); //设置内容// 添加第一个标签页tabHost.addTab(tab1);TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2").setIndicator("标签页二").setContent(R.id.tab02);// 添加第二个标签页tabHost.addTab(tab2);TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3").setIndicator("标签页三").setContent(R.id.tab03);// 添加第三个标签页tabHost.addTab(tab3);*//* 以上创建和添加标签页也可以用如下代码实现 */tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("标签页一").setContent(R.id.tab01));tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("标签页二").setContent(R.id.tab02));tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("标签页三").setContent(R.id.tab03));//标签切换事件处理，setOnTabChangedListener  tabHost.setOnTabChangedListener(new OnTabChangeListener(){    @Override  // tabId是newTabSpec第一个参数设置的tab页名，并不是layout里面的标识符idpublic void onTabChanged(String tabId) {  if (tabId.equals("tab1")) {   //第一个标签  Toast.makeText(MainActivity.this, "点击标签页一", Toast.LENGTH_SHORT).show();}  if (tabId.equals("tab2")) {   //第二个标签  Toast.makeText(MainActivity.this, "点击标签页二", Toast.LENGTH_SHORT).show();}  if (tabId.equals("tab3")) {   //第三个标签  Toast.makeText(MainActivity.this, "点击标签页三", Toast.LENGTH_SHORT).show();}  }              }); }
}

Android选项卡TabHost功能和用法相关推荐

TabHOST 选项卡的功能和用法
TabHOST 选项卡的功能和用法 tabhost可以方便的在窗口放置多个标签页,,每个标签页相当于一个和外部容器一样大小的组件摆放区域,通过这种方式,就可以在一个容器中放置更多组件 <?xml ...
TabHost选项卡的功能和用法
TabHost可以很方便地在窗口上放置多个标签页,每个标签页相当于获得了一个外部容器相同大小的组件摆放区域 TabHost的主要组件是: TabWiget:代表一个选项卡标签条 TabSpec:代表选 ...
android 选项卡TabHost
选项卡主要有TabHost.TabWiget和 FramentLayout3个组件组成,用于实现一个多标签的用户界面,通过他可以将一个复杂的对话分隔成若干个标签页,实现对信息的分类显示和管理.使用给组 ...
android switcher控件,Android ViewSwitcher 的功能与用法
ViewSwitcher 代表了视图切换组件, 本身继承了FrameLayout ,可以将多个View叠在一起 ,每次只显示一个组件.当程序控制从一个View切换到另个View时,ViewSwitch ...
android学习--TabHost选项卡组件
TabHost是一种非常有用的组件,TabHost能够非常方便地在窗体上放置多个标签页,每一个标签页获得了一个与外部容器同样大小的组件摆放区域.在手机系统的应用类似"未接电话".& ...
Android学习笔记 2.5.3 实例——使用SimpleAdapter创建ListView 2.5.4 自动完成文本框(AutoCompleteTextView)的功能与用法
Android学习笔记疯狂Android讲义文章目录 Android学习笔记疯狂Android讲义第2章 Android 应用的界面编程 2.5 第4组 UI组件:AdapterView及其子 ...
Android手机状态栏通知（Notification）的功能与用法
1.Notification 是显示在手机状态栏的通知--手机状态栏位于手机屏幕的最上方那里一般显示了手机当前网络状态.电池状态.时间等. 2.Notification 代表的是一种具有全局效果 ...
数值选择器（NumberPicker）的功能与用法
数值选择器用于让用户输入数值,用户既可以通过键盘输入数值,也可以通过拖动来选择数值.使用该组件常用如下三个方法. setMinValue(int minVal):设置该组件支持的最小值. set ...
【笔记】与Android选项卡一周
果然,还是项目驱动的学习方式比较有趣呢. 这周的学习全部围绕着选项卡,也就是tab. 用到了好多知识点,都不知道从哪里开始啦(≧o≦*). 选项卡的制作有很多方法.选项菜单可以用普通的TextView ...
android preference tab,Android SharedPreference - TabHost问题
我正在开发Android应用程序,它有两个不同的tabhost:Main和Child. 在主tabhost我有5个不同的标签,最后一个打开新的活动,我有登录页面.我想创建一个布尔类型isLoggedI ...

Android选项卡TabHost功能和用法

Android选项卡TabHost功能和用法相关推荐

最新文章

热门文章