Android TabHost

最新推荐文章于 2021-06-17 23:24:46 发布
最新推荐文章于 2021-06-17 23:24:46 发布
阅读量613 收藏
点赞数
分类专栏： android 文章标签： android tabhost

转载至：http://blog.csdn.net/dawanganban/article/details/9916461


Tab标签页是界面设计时经常使用的界面控件，可以实现多个分页之间的快速切换，每个分页可以显示不同的内容
Tab标签页的使用
      1.首先要设计所有的分页的界面布局
      2.在分页设计完成后，使用代码建立Tab标签页，并给每个分页添加标识和标题
      3.最后确定每个分页所显示的界面布局
      每个分页建立一个XML文件，用以编辑和保存分页的界面布局，使用的方法与设计普通用户界面没有什么区别

使用Tab标签页的一般步骤
首先要设计所有的分页的界面布局
Activity继承TabActivity
调用TabActivity的getTabHost()方法获得TabHost对象
通过TabHost创建Tab

 

所谓的tabhost提供选项卡（Tab页）的窗口视图容器.此对象包含两个子对象： 一个是使用户可以选择指定标签页的标签的集合；另一个是用于显示标签页内容的 FrameLayout. 选项卡中的个别元素一般通过其容器对象来控制，而不是直接设置子元素本身的值.

先演示一个简单的例子，只有一个Activity，但要注意的是继承tabActivity这个类

第一步：在布局文件中main.xml敲入代码。注意这里用了FrameLayout，主要特点是可以覆盖其他内容，只显示当前的

View Code 
 1 <?xml version="1.0" encoding="utf-8"?>
 2 
 3 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:id="@+id/FrameLayout01" 
 5     android:layout_width="wrap_content" 
 6     android:layout_height="wrap_content">
 7     
 8     <TextView 
 9     android:id="@+id/TextView01" 
10     android:layout_width="wrap_content" 
11     android:layout_height="wrap_content" 
12     android:text="所有通话记录"></TextView>
13     
14     <TextView 
15     android:id="@+id/TextView02" 
16     android:layout_width="wrap_content" 
17     android:layout_height="wrap_content" 
18     android:text="已接来电"></TextView>
19     
20     <TextView 
21     android:id="@+id/TextView03" 
22     android:layout_width="wrap_content" 
23     android:layout_height="wrap_content" 
24     android:text="未接来电"></TextView>
25     
26 </FrameLayout>
复制代码

第二步：编写layouttab01Activity.java这个文件，比较简单。

View Code 
 1 package cn.edu.zwu.tel;
 2 
 3 import android.app.TabActivity;
 4 import android.os.Bundle;
 5 import android.view.LayoutInflater;
 6 import android.widget.TabHost;
 7 import android.widget.Toast;
 8 import android.widget.TabHost.OnTabChangeListener;
 9 
10 
11 public class LayoutTab01Activity extends TabActivity {
12     @Override
13     public void onCreate(Bundle savedInstanceState) {
14         super.onCreate(savedInstanceState);
15         
16         TabHost th = getTabHost();
17         //声明TabHost，然后用LayoutInflater过滤出布局来，给TabHost加上含有Tab页面的FrameLayout
18 //from(this)从这个TabActivity获取LayoutInflater　　
19 //R.layout.main 存放Tab布局
20 //通过TabHost获得存放Tab标签页内容的FrameLayout　　
21 //是否将inflate 拴系到根布局元素上
22         LayoutInflater.from(this).inflate(R.layout.main, th.getTabContentView(), true); 
23         //通过TabHost获得存放Tab标签页内容的FrameLayout，
24 //newTabSpecd的作用是获取一个新的 TabHost.TabSpec，并关联到当前 TabHost
25 //setIndicator的作用是指定标签和图标作为选项卡的指示符.
26 //setContent的作用是指定用于显示选项卡内容的视图 ID.
27         th.addTab(th.newTabSpec("all").setIndicator("所有通话记录", getResources().getDrawable(R.drawable.call_forward)).setContent(R.id.TextView01));
28         th.addTab(th.newTabSpec("ok").setIndicator("已接来电",getResources().getDrawable(R.drawable.phone_call)).setContent(R.id.TextView02));
29         th.addTab(th.newTabSpec("cancel").setIndicator("未接来电",getResources().getDrawable(R.drawable.call_bluetooth)).setContent(R.id.TextView03));
30         //setOnTabChangeListener的作业是注册一个回调函数，当任何一个选项卡的选中状态发生改变时调用.  
31         th.setOnTabChangedListener(
32                 new OnTabChangeListener() {
33                     @Override
34                     public void onTabChanged(String tabId) {
35                         Toast.makeText(LayoutTab01Activity.this, tabId, Toast.LENGTH_LONG).show();
36                     }
37                 }
38             );       
39     }
40 }
复制代码

 

演示效果图：

 

第二种方法：没有用到FrameLayout这个布局，而直接用了listview，创建选项卡内容的回调函数creatTabContent（）实现的

第一步：编写main.xml文件，具体代码如下

View Code 
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:text="@string/hello" />
11 
12 </LinearLayout>
复制代码

第二步;编写layoutTabActivity.java文件，具体解释都注释在代码里

View Code 
 1 package cn.edu.zwu.tel;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 import android.app.TabActivity;
 6 import android.os.Bundle;
 7 import android.view.View;
 8 import android.widget.ArrayAdapter;
 9 import android.widget.ListView;
10 import android.widget.TabHost;
11 
12 //TabContentFactory的意思是当某一选项卡被选中时生成选项卡的内容.
13 //如果你的选项卡的内容按某些条件来生成， 请使用该接口.例如：不显示既存的视图而是启动活动.
14 public class LayoutTab02Activity extends TabActivity implements TabHost.TabContentFactory  {
15 
16 @Override
17   public void onCreate(Bundle savedInstanceState) 
18   {
19         super.onCreate(savedInstanceState);
20         TabHost th = getTabHost();
21          //newTabSpecd的作用是获取一个新的 TabHost.TabSpec，并关联到当前 TabHost
22 //setIndicator的作用是指定标签和图标作为选项卡的指示符.
23 //setContent的作用是指定用于显示选项卡内容的视图 ID.
24         th.addTab(th.newTabSpec("all").setIndicator("所有通话记录").setContent(this));
25         th.addTab(th.newTabSpec("ok").setIndicator("已接来电").setContent(this));
26         th.addTab(th.newTabSpec("cancel").setIndicator("未接来电").setContent(this));
27     }
28 //创建选项卡内容的回调函数.        
29   public View createTabContent(String tag) 
30   {
31         ListView lv = new ListView(this);
32         List<String> list = new ArrayList<String>();
33         list.add(tag);
34         if(tag.equals("all"))
35         {
36             list.add("tom");
37             list.add("kite");
38             list.add("rose");
39         }else if(tag.equals("ok"))
40         {
41             list.add("tom");
42             list.add("kite");
43         }else
44         {
45             list.add("rose");
46         }
47         
48         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
49                 android.R.layout.simple_list_item_checked, list);
50         lv.setAdapter(adapter);
51         return lv;
52     }
53   }
复制代码

效果图：




TabHost两种实现方式


第一种：继承TabActivity，从TabActivity中用getTabHost()方法获取TabHost。只要定义具体Tab内容布局就行了. 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.      android:id="@+id/FrameLayout01"   
  4.      android:layout_width="wrap_content"   
  5.      android:layout_height="wrap_content">  
  6.        
  7.      <TextView   
  8.      android:id="@+id/TextView01"   
  9.      android:layout_width="wrap_content"   
  10.      android:layout_height="wrap_content"   
  11.      android:text="所有通话记录"></TextView>  
  12.        
  13.      <TextView   
  14.      android:id="@+id/TextView02"   
  15.      android:layout_width="wrap_content"   
  16.      android:layout_height="wrap_content"   
  17.      android:text="已接来电"></TextView>  
  18.        
  19.      <TextView   
  20.      android:id="@+id/TextView03"   
  21.      android:layout_width="wrap_content"   
  22.      android:layout_height="wrap_content"   
  23.      android:text="未接来电"></TextView>  
  24.        
  25.  </FrameLayout>  

  1.  package com.example.testtabhost;  
  2.   
  3. import android.app.TabActivity;  
  4. import android.os.Bundle;  
  5. import android.view.LayoutInflater;  
  6. import android.widget.TabHost;  
  7. import android.widget.Toast;  
  8. import android.widget.TabHost.OnTabChangeListener;  
  9.   
  10. public class MainActivity extends TabActivity {  
  11.      @Override  
  12.      public void onCreate(Bundle savedInstanceState) {  
  13.          super.onCreate(savedInstanceState);  
  14.            
  15.          TabHost th = getTabHost();  
  16.          //声明TabHost，然后用LayoutInflater过滤出布局来，给TabHost加上含有Tab页面的FrameLayout  
  17.          //from(this)从这个TabActivity获取LayoutInflater　　  
  18.          //R.layout.main 存放Tab布局  
  19.          //通过TabHost获得存放Tab标签页内容的FrameLayout　　  
  20.          //是否将inflate 拴系到根布局元素上  
  21.          LayoutInflater.from(this).inflate(R.layout.activity_main, th.getTabContentView(), true);   
  22.          //通过TabHost获得存放Tab标签页内容的FrameLayout，  
  23.          //newTabSpecd的作用是获取一个新的 TabHost.TabSpec，并关联到当前 TabHost  
  24.          //setIndicator的作用是指定标签和图标作为选项卡的指示符.  
  25.          //setContent的作用是指定用于显示选项卡内容的视图 ID.  
  26.          th.addTab(th.newTabSpec("all").setIndicator("所有通话记录", getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.TextView01));  
  27.          th.addTab(th.newTabSpec("ok").setIndicator("已接来电",getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.TextView02));  
  28.          th.addTab(th.newTabSpec("cancel").setIndicator("未接来电",getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.TextView03));  
  29.          //setOnTabChangeListener的作业是注册一个回调函数，当任何一个选项卡的选中状态发生改变时调用.    
  30.          th.setOnTabChangedListener(  
  31.             new OnTabChangeListener() {  
  32.                  @Override  
  33.                  public void onTabChanged(String tabId) {  
  34.                      Toast.makeText(MainActivity.this, tabId, Toast.LENGTH_LONG).show();  
  35.                  }  
  36.              }  
  37.          );         
  38.      }  
  39. }  


第二种：不用继承TabActivity，在布局文件中定义TabHost即可，但是TabWidget的id必须是 
@android:id/tabs，FrameLayout的id必须是@android:id/tabcontent。TabHost的id可以自定义. 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     android:id="@+id/hometabs"  
  4.     android:orientation="vertical"  
  5.     android:layout_width="fill_parent"    
  6.     android:layout_height="fill_parent">   
  7.     <TabHost android:id="@+id/tabhost"  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content">  
  10.         <LinearLayout  
  11.             android:orientation="vertical"  
  12.             android:layout_width="fill_parent"  
  13.             android:layout_height="fill_parent">  
  14.               
  15.             <TabWidget android:id="@android:id/tabs"   
  16.               android:orientation="horizontal"  
  17.               android:layout_width="wrap_content"  
  18.               android:layout_height="wrap_content">  
  19.             </TabWidget>  
  20.            
  21.              <FrameLayout android:id="@android:id/tabcontent"  
  22.                   android:layout_width="wrap_content"  
  23.                   android:layout_height="wrap_content">  
  24.                     <TextView android:id="@+id/view1"  
  25.                         android:layout_width="fill_parent"  
  26.                         android:layout_height="fill_parent"/>  
  27.                     <TextView android:id="@+id/view2"  
  28.                         android:layout_width="fill_parent"  
  29.                         android:layout_height="fill_parent"/>  
  30.                     <TextView android:id="@+id/view3"  
  31.                         android:layout_width="fill_parent"  
  32.                         android:layout_height="fill_parent"/>  
  33.              </FrameLayout>  
  34.            
  35.          </LinearLayout>  
  36.     </TabHost>  
  37. </LinearLayout>  

  1. package com.example.testtabhost2;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.util.Log;  
  6. import android.widget.TabHost;  
  7. import android.widget.TabWidget;  
  8.   
  9. public class MainActivity extends Activity {  
  10.   
  11.     private static final String TAG = "MainActivity";  
  12.   
  13.     protected void onCreate(Bundle savedInstanceState) {  
  14.         super.onCreate(savedInstanceState);  
  15.         setContentView(R.layout.activity_main);  
  16.           
  17.         TabHost tabHost = (TabHost) findViewById(R.id.tabhost);  
  18.         tabHost.setup();  
  19.         TabWidget tabWidget = tabHost.getTabWidget();  
  20.           
  21.         tabHost.addTab(tabHost.newTabSpec("tab1")  
  22.                 .setIndicator("tab1", getResources().getDrawable(R.drawable.ic_launcher))  
  23.                 .setContent(R.id.view1));  
  24.           
  25.         tabHost.addTab(tabHost.newTabSpec("tab3")  
  26.                 .setIndicator("tab3")  
  27.                 .setContent(R.id.view3));  
  28.           
  29.         tabHost.addTab(tabHost.newTabSpec("tab2")  
  30.                 .setIndicator("tab2")  
  31.                 .setContent(R.id.view2));  
  32.           
  33.         final int tabs = tabWidget.getChildCount();  
  34.         Log.i(TAG, "***tabWidget.getChildCount() : " + tabs);  
  35.           
  36.         final int tabWidth = 90;  
  37.         final int tabHeight = 45;  
  38.           
  39.         for (int i = 0; i < tabs; i++) {  
  40.         /*  final View view = tabWidget.getChildAt(i); 
  41.             view.getLayoutParams().width = tabWidth; 
  42.             view.getLayoutParams().height = tabHeight; 
  43.             final TextView tv = (TextView) view.findViewById(android.R.id.title); 
  44.             tv.setTextColor(this.getResources().getColorStateList(android.R.color.black)); 
  45.             MarginLayoutParams tvMLP = (MarginLayoutParams)tv.getLayoutParams(); 
  46.             tvMLP.bottomMargin = 8;*/  
  47.         }  
  48.     }  
  49.   
  50. }  


星星Yeah
关注
专栏目录
android TabHost
kangkang_style的博客
08-01 394
虽然tabhost已经被官方废弃了，但是用还是能用，其搭配activity或者fragment都能很好的实现页面的切换 使用条件：MainAcitivy必须继承自TabActivity,通过调用getTabHost();方法获取TabHost对象 TabHost常用组件： TabWidget:该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡
android 的TabHost
04-27
android 最新的TabHost,不是传统的TabHost,继承了FrameActivity.
android之tabhost讲解
weixin_30764883的博客
02-26 134
Tab标签页是界面设计时经常使用的界面控件，可以实现多个分页之间的快速切换，每个分页可以显示不同的内容Tab标签页的使用 1.首先要设计所有的分页的界面布局2.在分页设计完成后，使用代码建立Tab标签页，并给每个分页添加标识和标题 3.最后确定每个分页所显示的界面布局 每个分页建立一个XML文件，用以编辑和保存分页的界面布局，使用的方法与设计普通用户界面没...
Android中的TabHost
热门推荐
xinem的专栏
12-19 1万+
介绍  有时，我们想在一个window中显示多个视图，这时就需要用到Tab容器。在Android里它叫TabHost。 使用TabHost有两种方式： 在相同的activity中使用TabHost导航多个视图使用TabHost导航多个Activity(通过intents) Tab应用的结构 TabHost的Activity的结构如下: 先看个示例： layou
Android TabHost选项卡标签图标始终不出现的解决方法
01-05
本文实例分析了Android TabHost选项卡标签图标始终不出现的解决方法。分享给大家供大家参考，具体如下： 在学习Android TabHost布局过程中，很多教程告诉我，这样来显示选项卡标签的图标和文字： TapSpec spec1 = ...
Android Tabhost使用方法详解
01-04
Android 实现tab视图有2种方法，一种是在布局页面中定义<tabhost>标签,另一种就是继承tabactivity.但是我比较喜欢第二种方式，应为如果页面比较复杂的话你的XML文件会写得比较庞大，用第二种方式XML页面相对要简洁得...
android tabhost
05-17
android tabhost android tabhost
android TabHost简单使用
04-21
在Android开发中，TabHost是一个非常实用的组件，它允许我们创建带有多个选项卡的应用界面，每个选项卡可以展示不同的内容或活动。本篇文章将详细介绍如何在Android项目中使用TabHost，以及它的工作原理。 首先，...
安卓 TabHost
有勇气的牛排博客
06-17 440
MainActivity.java import android.app.Activity; import android.app.ActivityGroup; import android.content.Intent; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.TabHost; public class MainActivity ...
Android：TabHost实现Tab切换
写呀写呀写代码
12-02 594
TabHost是整个Tab的容器，包含TabWidget和FrameLayout两个部分，TabWidget是每个Tab的表情，FrameLayout是Tab内容。 实现方式有两种： 1、继承TabActivity 2、继承Activity类 >>两个方法实例下载 方法一：继承TabActivity 从TabActivity中用getTabHost()方法获取T
Android tabhost
Java学习的专栏
02-16 1119
http://wayfarer.javaeye.com/blog/4735171. 最简单的TabHost，Tab来自于layout下的元素 （只从1个Layout中取数据）1）tab_demo.xmlXml代码  xml version="1.0" encoding="utf-8"?>   FrameLayout xmlns:andro
Android-TabHost.rar_android_android tabhost_tabhost_tabhost andr
09-22
在Android应用开发中，TabHost是一个非常重要的组件，它用于创建多标签的用户界面，使得用户可以在不同的功能之间轻松切换。TabHost与TabWidget和FrameLayout一起工作，为每个标签提供一个视图容器。本教程将深入...
android tabHost
05-04
tabHost底部标签 title的设置
Android:TabHost
欧阳天涵的专栏
09-08 753
转自移动开发者社区 前言 　　本章内容是 android.widget.TabHost，译为"选项卡容器"，版本为Android 2.3 r1，翻译来自"madgoat"，欢迎大家访问他的博客：http://madgoat.cn/，再次感谢"madgoat" ！期待你
Android之TabHost
weixin_34414196的博客
08-07 128
想要制作出拥有多个Tab相互切换的界面，需要用到几个主要的组件：1. android.app.TabActivity;2. android.widget.TabHost;3. android.view.LayoutInflater;4. android.widget.TabWidget5. android.widget.FrameLayout本文描述了制作Tabs界面的三种常...
安卓TabHost页面
chuie3161的博客
06-23 88
<?xml version="1.0" encoding="UTF-8"?> <!-- TabHost组件id值不可变--> <TabHost xmlns:android="http://schemas.android.com/apk/res/android"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值