（初学）android中TabHost原理详解及实例

最新推荐文章于 2021-06-17 23:24:46 发布
最新推荐文章于 2021-06-17 23:24:46 发布
阅读量735 收藏
点赞数
分类专栏： Android 控件

Tab与TabHost

这就是Tab，而盛放Tab的容器就是TabHost

 如何实现？？
每一个Tab还对应了一个布局，这个就有点好玩了。一个Activity，对应了多个功能布局。
①新建一个Tab项目，注意，不要生成main Activity



这里不要选
②在包里面新建一个类MyTab，继承于TabActivity
其实，TabActivity是Activity的子类

1package zyf.tab.test;
2  
3import android.app.TabActivity;
4  
5public class MyTab extends TabActivity {
6  
7}


③从父类继承OnCreate()入口方法

 

01

package zyf.tab.test;
02import android.app.TabActivity;
03import android.os.Bundle;
04public class MyTab extends TabActivity {
05    @Override
06    protected void onCreate(Bundle savedInstanceState) {
07        // TODO Auto-generated method stub
08        super.onCreate(savedInstanceState);
09    }
10}

④在Manifest.xml文件中注册一下MyTab类（Activity）
 
1<activity android:name=".MyTab">
2    <intent-filter>
3        <action android:name="android.intent.action.MAIN"></action>
4        <category android:name="android.intent.category.LAUNCHER"></category>
5    </intent-filter>
6</activity>

⑤这时候，需要设计一下标签页对应的布局，一般采用FrameLayout作为根布局，每个标签页面对应一个子节点的Layout
 
01<?xml version="1.0" encoding="utf-8"?>
02<!--  这里是根节点布局  -- >
03<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
04    android:layout_width="fill_parent" android:layout_height="fill_parent">
05  
06<!--  第一个Tab 对应的布局  -- >
07    <LinearLayout android:id="@+id/widget_layout_Blue"
08        android:layout_width="fill_parent" android:layout_height="fill_parent"
09        androidrientation="vertical" >
10        <EditText android:id="@+id/widget34" android:layout_width="fill_parent"
11            android:layout_height="wrap_content" android:text="EditText"
12            android:textSize="18sp">
13        </EditText>
14        <Button android:id="@+id/widget30" android:layout_width="wrap_content"
15            android:layout_height="wrap_content" android:text="Button">
16        </Button>
17    </LinearLayout>
18<!--  第二个Tab 对应的布局  -- >
19    <LinearLayout android:id="@+id/widget_layout_red"
20        android:layout_width="fill_parent" android:layout_height="fill_parent"
21        androidrientation="vertical"  >
22        <AnalogClock android:id="@+id/widget36"
23            android:layout_width="wrap_content" android:layout_height="wrap_content">
24        </AnalogClock>
25    </LinearLayout>
26<!--  第三个Tab 对应的布局  -- >
27    <LinearLayout android:id="@+id/widget_layout_green"
28        android:layout_width="fill_parent" android:layout_height="fill_parent"
29        androidrientation="vertical">
30        <RadioGroup android:id="@+id/widget43"
31            android:layout_width="166px" android:layout_height="98px"
32            androidrientation="vertical">
33            <RadioButton android:id="@+id/widget44"
34                android:layout_width="wrap_content" android:layout_height="wrap_content"
35                android:text="RadioButton">
36            </RadioButton>
37            <RadioButton android:id="@+id/widget45"
38                android:layout_width="wrap_content" android:layout_height="wrap_content"
39                android:text="RadioButton">
40            </RadioButton>
41        </RadioGroup>
42    </LinearLayout>
43</FrameLayout>

⑥首先，应该声明TabHost，然后用LayoutInflater过滤出布局来，给TabHost加上含有Tab页面的FrameLayout
 
1private TabHost myTabhost;
2myTabhost=this.getTabHost();//从TabActivity上面获取放置Tab的TabHost
3LayoutInflater.from(this).inflate(R.layout.main, myTabhost.getTabContentView(), true);
4//from(this)从这个TabActivity获取LayoutInflater
5//R.layout.main 存放Tab布局
6//通过TabHost获得存放Tab标签页内容的FrameLayout
7//是否将inflate 拴系到根布局元素上
8myTabhost.setBackgroundColor(Color.argb(150, 22, 70, 150));
9//设置一下TabHost的颜色

⑦接着，在TabHost创建一个标签，然后设置一下标题／图标／标签页布局
 
1myTabhost.addTab(myTabhost.newTabSpec("TT")// 制造一个新的标签TT
2     .setIndicator("KK",getResources().getDrawable(R.drawable.ajjc))
3                        // 设置一下显示的标题为KK，设置一下标签图标为ajjc
4                        .setContent(R.id.widget_layout_red));
5        //设置一下该标签页的布局内容为R.id.widget_layout_red，这是FrameLayout中的一个子Layout

 

⑧标签切换事件处理，setOnTabChangedListener

 
1myTabhost.setOnTabChangedListener(new OnTabChangeListener(){
2            @Override
3            public void onTabChanged(String tabId) {
4                // TODO Auto-generated method stub
5            }           
6        });

⑨各个标签页的动态MENU
先把在XML中设计好的MENU放到一个int数组里
 
1private static final int myMenuResources[] = { R.menu.phonebook_menu,
2            R.menu.addphone_menu, R.menu.chatting_menu, R.menu.userapp_menu };

在setOnTabChangedListener()方法中根据标签的切换情况来设置myMenuSettingTag
 
01@Override
02    public void onTabChanged(String tagString) {
03        // TODO Auto-generated method stub
04        if (tagString.equals("One")) {
05            myMenuSettingTag = 1;
06        }
07        if (tagString.equals("Two")) {
08            myMenuSettingTag = 2;
09        }
10        if (tagString.equals("Three")) {
11            myMenuSettingTag = 3;
12        }
13        if (tagString.equals("Four")) {
14            myMenuSettingTag = 4;
15        }
16        if (myMenu != null) {
17            onCreateOptionsMenu(myMenu);
18        }
19    }

然后onCreateOptionsMenu(Menu menu) 方法中通过MenuInflater过滤器动态加入MENU
 
01   @Override
02    public boolean onCreateOptionsMenu(Menu menu) {
03        // TODO Auto-generated method stub
04        // Hold on to this
05        myMenu = menu;
06        myMenu.clear();//清空MENU菜单
07        // Inflate the currently selected menu XML resource.
08        MenuInflater inflater = getMenuInflater();       
09//从TabActivity这里获取一个MENU过滤器
10        switch (myMenuSettingTag) {
11        case 1:
12            inflater.inflate(myMenuResources[0], menu);
13            //动态加入数组中对应的XML MENU菜单
14            break;
15        case 2:
16            inflater.inflate(myMenuResources[1], menu);
17            break;
18        case 3:
19            inflater.inflate(myMenuResources[2], menu);
20            break;
21        case 4:
22            inflater.inflate(myMenuResources[3], menu);
23            break;
24        default:
25            break;
26        }
27        return super.onCreateOptionsMenu(menu);
28    }

menu 布局
 
1<?xml version="1.0" encoding="utf-8"?>
2<menu
3  xmlns:android="http://schemas.android.com/apk/res/android">
4<group android:id="@+id/group_a"><item android:id="@+id/item_a" android:icon="@drawable/gimp" android:title="Gimp"></item>
5</group>
6</menu>
⑩运行效果





 


实例：

 

效果图如下：

image

其中main.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <!-- 定义第一个标签页的内容 -->

    <LinearLayout
        android:id="@+id/tab01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="女儿国国王 - 2010/12/12"
            android:textSize="11pt" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="东海龙女 - 2010/12/18"
            android:textSize="11pt" />
    </LinearLayout>
    <!-- 定义第二个标签页的内容 -->

    <LinearLayout
        android:id="@+id/tab02"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="白骨精  - 2010/08/12"
            android:textSize="11pt" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="蜘蛛精 - 2010/09/20"
            android:textSize="11pt" />
    </LinearLayout>
    <!-- 定义第三个标签页的内容 -->

    <LinearLayout
        android:id="@+id/tab03"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:textSize="11pt" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="孙悟空 - 2010/09/19"
            android:textSize="11pt" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="猪八戒  - 2010/10/12"
            android:textSize="11pt" />
    </LinearLayout>

</TabHost>

AndroidManifest.xml的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="android.demo"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity android:name=".MyTab" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" >
                </action>

                <category android:name="android.intent.category.LAUNCHER" >
                </category>
            </intent-filter>
        </activity>
    </application>

</manifest>

其中MyTab.java代码如下：

package android.demo;

import android.app.TabActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;

@SuppressWarnings("deprecation")
public class MyTab extends TabActivity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		TabHost tabHost = getTabHost();
		// 设置使用TabHost布局
		LayoutInflater.from(this).inflate(R.layout.main,
				tabHost.getTabContentView(), true);
		// 添加第一个标签页
		tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("已接电话")
				.setContent(R.id.tab01));
		// 添加第二个标签页
		tabHost.addTab(tabHost
				.newTabSpec("tab2")
				// 在标签标题上放置图标
				.setIndicator("呼出电话",
						getResources().getDrawable(R.drawable.ic_launcher))
				.setContent(R.id.tab02));
		// 添加第三个标签页
		tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("未接电话")
				.setContent(R.id.tab03));
	}
}

上面两个例子是我从别处转载来的，讲解的很详细，很适合我们初学者学习，所以自己转载来方便以后看，有不懂的地方请留言，我们一起探讨。

 

丶沐雨
关注
专栏目录
android TabHost
kangkang_style的博客
08-01 389
虽然tabhost已经被官方废弃了，但是用还是能用，其搭配activity或者fragment都能很好的实现页面的切换 使用条件：MainAcitivy必须继承自TabActivity,通过调用getTabHost();方法获取TabHost对象 TabHost常用组件： TabWidget:该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡
Android开发之TabHost选项卡及相关疑难解决方法
01-20
在Android开发中，TabHost是一种常用的组件，用于创建带有多个选项卡的应用界面。尽管Google已经推荐使用FragmentTabHost或者其他的导航模式，如BottomNavigationView，但TabHost对于理解Android的选项卡实现仍然...
android之tabhost讲解
weixin_30764883的博客
02-26 128
Tab标签页是界面设计时经常使用的界面控件，可以实现多个分页之间的快速切换，每个分页可以显示不同的内容Tab标签页的使用 1.首先要设计所有的分页的界面布局2.在分页设计完成后，使用代码建立Tab标签页，并给每个分页添加标识和标题 3.最后确定每个分页所显示的界面布局 每个分页建立一个XML文件，用以编辑和保存分页的界面布局，使用的方法与设计普通用户界面没...
Tab与TabHost
独领fengsao的猫
09-17 539
这就是Tab，而盛放Tab的容器就是TabHost 如何实现？？ 每一个Tab还对应了一个布局，这个就有点好玩了。一个Activity，对应了多个功能布局。 ①新建一个Tab项目，注意，不要生成main Activity 这里不要选 ②在包里面新建一个类MyTab，继承于TabActivity 其实，TabActivity是Activity的子类
TabHost详解
weixin_34216036的博客
05-24 83
这就是Tab，而盛放Tab的容器就是TabHost如何实现？？每一个Tab还对应了一个布局，这个就有点好玩了。一个Activity，对应了多个功能布局。①新建一个Tab项目，注意，不要生成main Activity 这里不要选②在包里面新建一个类MyTab，继承于TabActivity其实，TabActivity是Activity的子类 package zyf.tab.test; ...
Android中的TabHost
热门推荐
xinem的专栏
12-19 1万+
介绍  有时，我们想在一个window中显示多个视图，这时就需要用到Tab容器。在Android里它叫TabHost。 使用TabHost有两种方式： 在相同的activity中使用TabHost导航多个视图使用TabHost导航多个Activity(通过intents) Tab应用的结构 TabHost的Activity的结构如下: 先看个示例： layou
Android Tabhost使用方法详解
01-04
Android 实现tab视图有2种方法，一种是在布局页面中定义<tabhost>标签,另一种就是继承tabactivity.但是我比较喜欢第二种方式，应为如果页面比较复杂的话你的XML文件会写得比较庞大，用第二种方式XML页面相对要简洁得...
Android Tab 控件详解及实例
08-31
"Android Tab 控件详解及实例" Android Tab 控件是 Android 应用程序中常用的控件之一，它允许用户在多个标签页之间切换，从而提供了一个灵活的用户界面。下面我们将详细介绍 Android Tab 控件的使用方法和示例代码...
android 之Tabhost部件详解
03-25
在Android开发中，TabHost是一个非常重要的组件，它允许开发者创建具有多个标签（Tab）的界面，每个标签对应一个不同的活动（Activity）。这篇博客“android 之Tabhost部件详解”深入探讨了如何利用TabHost来构建多...
Android控件之TabHost用法实例分析
01-05
本文实例讲述了Android控件之TabHost用法。分享给大家供大家参考。具体如下： 以下通过TabHost实现android选项卡。 main.xml布局文件： <?xml version=1.0 encoding=utf-8?> <LinearLayout xmlns:android=...
android 的TabHost
04-27
android 最新的TabHost,不是传统的TabHost,继承了FrameActivity.
TabHost详解 博文对应源码（一）
12-04
《TabHost详解》对应源码，博客地址：http://blog.csdn.net/harvic880925/article/details/17120325
android TabHost使用详解
10-28
android TabHost使用详解 TabHost从布局到代码的使用步骤
Android TabHost
aigui1439的博客
05-19 80
Open Declarationvoid android.widget.TabHost.setup() Call setup() before adding tabs if loading TabHost using findViewById(). However: You do not need to call setup() after getTabHost()...
安卓 TabHost
有勇气的牛排博客
06-17 437
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详解与问题解决
在Android开发中，TabHost是一个用于创建多标签界面的组件，尽管谷歌已经不再推荐使用，但对初学者来说，理解其工作原理仍然是有益的。以下是对文中提到的四个问题的详细解答： 1. **无法显示TabHost** 当开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值