使用TabHost实现卡片选项菜单实例

痛定思痛。 2022-09-17 10:19 111阅读 0赞

TabHost是一个装载选项卡窗口的容器，实现分模块显示的效果。像新浪微博客户端、微信客户端都是使用tabehost组件来开发的。

TabHost的组成：

|---TabWidget：实现标签栏，可供用户选择的标签集合;

|---FrameLayout：实现显示内容的帧布局.

TabHost有两种实现方式：

一、在布局文件中定义TabHost

1、在配置文件中使用TabHost标签定义布局;

2、TabHost 的id 定义为：tabhost;

3、TabWidget 的id 定义为：tabs;

4、FrameLayout 的id 定义为：tabcontent.

二、继承TabActivity类：

在Activity中通过getTabHost() 方法取得TabHost.

这两种方法实现的效果是一样的，但是后者不需要定义TabHost的布局文件，使用起来比较方便，推荐大家使用这种方式。

先来看看实现的效果吧：

![1361189126_5364.png][]

![1361189153_4693.png][]

下面给出源代码：

第一种方式(使用xml布局)：

工程目录结构

![1361189239_6806.png][]

main.xml

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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.      <TabHost   
8.          android:id="@+id/tablehost"  
9.          android:layout\_width="fill\_parent"  
10.         android:layout\_height="fill\_parent">  
11.         <LinearLayout android:orientation="vertical"  
12.                       android:layout\_width="fill\_parent"  
13.                       android:layout\_height="fill\_parent">  
14.             <TabWidget   
15.                 android:id="@android:id/tabs"  
16.                 android:layout\_height="wrap\_content"  
17.                 android:layout\_width="fill\_parent"/>  
18.                 <FrameLayout   
19.                     android:id="@android:id/tabcontent"  
20.                     android:layout\_width="fill\_parent"  
21.                     android:layout\_height="fill\_parent">  
22.                 </FrameLayout>  
23.               
24.         </LinearLayout>  
25.     </TabHost>  
26. </LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
    
        <TabHost 
            android:id="@+id/tablehost"
            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_height="wrap_content"
                    android:layout_width="fill_parent"/>
                    <FrameLayout 
                        android:id="@android:id/tabcontent"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent">
                    </FrameLayout>
                
            </LinearLayout>
        </TabHost>
    </LinearLayout>

home.xml

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <?xml version="1.0" encoding="utf-8"?>  
2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.       android:layout\_width="match\_parent"  
4.       android:layout\_height="fill\_parent"  
5.       android:background="\#0000FF"  
6.       android:id="@+id/home"  
7.       android:orientation="vertical">  
8.        
9.      <TextView  
10.          android:layout\_width="fill\_parent"  
11.          android:layout\_height="wrap\_content"  
12.          android:text="@string/home"  
13.     />  
14.       
15. </LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    	 android:layout_width="match_parent"
    	 android:layout_height="fill_parent"
    	 android:background="#0000FF"
    	 android:id="@+id/home"
    	 android:orientation="vertical">
        
        <TextView
    	     android:layout_width="fill_parent"
    	     android:layout_height="wrap_content"
    	     android:text="@string/home"
        />
        
    </LinearLayout>

其他3个布局文件跟home.xml一样，只是TextView的内容不同，这里就不给出代码了。

TabHostActivity.java

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  package cn.bdqn.tabhost;  
2.    
3.  import android.app.Activity;  
4.  import android.os.Bundle;  
5.  import android.view.LayoutInflater;  
6.  import android.widget.TabHost;  
7.  import android.widget.TabHost.TabSpec;  
8.    
9.  public class TabHostActivity extends Activity \{  
10.     @Override  
11.     public void onCreate(Bundle savedInstanceState) \{  
12.         super.onCreate(savedInstanceState);  
13.         setContentView(R.layout.main);  
14.         //取得TabHost  
15.         TabHost tabhost = (TabHost) findViewById(R.id.tablehost);  
16.         tabhost.setup();  
17.         LayoutInflater inflater = LayoutInflater.from(this);  
18.         //把配置文件转换为显示TabHost内容的FrameLayout中的层级  
19.         inflater.inflate(R.layout.home, tabhost.getTabContentView());  
20.         inflater.inflate(R.layout.comment, tabhost.getTabContentView());  
21.         inflater.inflate(R.layout.save, tabhost.getTabContentView());  
22.         inflater.inflate(R.layout.more, tabhost.getTabContentView());  
23.         //设置HOME标签  
24.         TabSpec spec1 = tabhost.newTabSpec("HOME").setIndicator("HOME");  
25.         //设置HOME模块显示内容  
26.         spec1.setContent(R.id.home);  
27.         tabhost.addTab(spec1);  
28.           
29.         TabSpec spec2 = tabhost.newTabSpec("COMMENT").setIndicator("COMMENT");  
30.         spec2.setContent(R.id.comment);  
31.         tabhost.addTab(spec2);  
32.           
33.         TabSpec spec3 = tabhost.newTabSpec("SAVE").setIndicator("SAVE");  
34.         spec3.setContent(R.id.save);  
35.         tabhost.addTab(spec3);  
36.           
37.         TabSpec spec4 = tabhost.newTabSpec("MORE").setIndicator("MORE");  
38.         spec4.setContent(R.id.more);  
39.         tabhost.addTab(spec4);  
40.     \}  
41. \}

package cn.bdqn.tabhost;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.widget.TabHost;
    import android.widget.TabHost.TabSpec;
    
    public class TabHostActivity extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            //取得TabHost
            TabHost tabhost = (TabHost) findViewById(R.id.tablehost);
            tabhost.setup();
            LayoutInflater inflater = LayoutInflater.from(this);
            //把配置文件转换为显示TabHost内容的FrameLayout中的层级
            inflater.inflate(R.layout.home, tabhost.getTabContentView());
            inflater.inflate(R.layout.comment, tabhost.getTabContentView());
            inflater.inflate(R.layout.save, tabhost.getTabContentView());
            inflater.inflate(R.layout.more, tabhost.getTabContentView());
            //设置HOME标签
            TabSpec spec1 = tabhost.newTabSpec("HOME").setIndicator("HOME");
            //设置HOME模块显示内容
            spec1.setContent(R.id.home);
            tabhost.addTab(spec1);
            
            TabSpec spec2 = tabhost.newTabSpec("COMMENT").setIndicator("COMMENT");
            spec2.setContent(R.id.comment);
            tabhost.addTab(spec2);
            
            TabSpec spec3 = tabhost.newTabSpec("SAVE").setIndicator("SAVE");
            spec3.setContent(R.id.save);
            tabhost.addTab(spec3);
            
            TabSpec spec4 = tabhost.newTabSpec("MORE").setIndicator("MORE");
            spec4.setContent(R.id.more);
            tabhost.addTab(spec4);
        }
    }

第二种方式(继承TabActivity)：

工程目录结构

![1361189519_1720.png][]

home.xml

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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.      android:background="@drawable/a">  
7.    
8.      <TextView  
9.          android:layout\_width="fill\_parent"  
10.         android:layout\_height="wrap\_content"  
11.         android:text="Hello world! HomeActivty" />  
12.   
13. </LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:background="@drawable/a">
    
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Hello world! HomeActivty" />
    
    </LinearLayout>

其他3个布局文件跟这个一样。

MainActivity.java

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  package com.tablehost.activity;  
2.    
3.  import android.app.Activity;  
4.  import android.app.TabActivity;  
5.  import android.content.Intent;  
6.  import android.os.Bundle;  
7.  import android.speech.SpeechRecognizer;  
8.  import android.widget.TabHost;  
9.  import android.widget.TabHost.TabSpec;  
10.   
11. public class MainActivity extends TabActivity \{  
12.     @Override  
13.     public void onCreate(Bundle savedInstanceState) \{  
14.         super.onCreate(savedInstanceState);  
15.         //获取TabHost组件  
16.         TabHost tabHost = getTabHost();  
17.         //新建一个标签页  
18.         TabSpec tabSpec1 = (TabSpec)tabHost.newTabSpec("HOME").setIndicator("HOME");  
19.         //给标签页设置内容  
20.         tabSpec1.setContent(new Intent(MainActivity.this,HomeActivity.class));  
21.         //把标签页添加到TabHost当中去  
22.         tabHost.addTab(tabSpec1);  
23.           
24.         TabSpec tabSpec2 = (TabSpec)tabHost.newTabSpec("COMMENT").setIndicator("COMMENT");  
25.         tabSpec2.setContent(new Intent(MainActivity.this,CommentActivity.class));  
26.         tabHost.addTab(tabSpec2);  
27.           
28.         TabSpec tabSpec3 = (TabSpec)tabHost.newTabSpec("SAVE").setIndicator("SAVE");  
29.         tabSpec3.setContent(new Intent(MainActivity.this,SaveActivity.class));  
30.         tabHost.addTab(tabSpec3);  
31.           
32.         TabSpec tabSpec4 = (TabSpec)tabHost.newTabSpec("MORE").setIndicator("MORE");  
33.         tabSpec4.setContent(new Intent(MainActivity.this,MoreActivity.class));  
34.         tabHost.addTab(tabSpec4);  
35.     \}  
36. \}

package com.tablehost.activity;
    
    import android.app.Activity;
    import android.app.TabActivity;
    import android.content.Intent;
    import android.os.Bundle;
    import android.speech.SpeechRecognizer;
    import android.widget.TabHost;
    import android.widget.TabHost.TabSpec;
    
    public class MainActivity extends TabActivity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            //获取TabHost组件
            TabHost tabHost = getTabHost();
            //新建一个标签页
            TabSpec tabSpec1 = (TabSpec)tabHost.newTabSpec("HOME").setIndicator("HOME");
            //给标签页设置内容
            tabSpec1.setContent(new Intent(MainActivity.this,HomeActivity.class));
            //把标签页添加到TabHost当中去
            tabHost.addTab(tabSpec1);
            
            TabSpec tabSpec2 = (TabSpec)tabHost.newTabSpec("COMMENT").setIndicator("COMMENT");
            tabSpec2.setContent(new Intent(MainActivity.this,CommentActivity.class));
            tabHost.addTab(tabSpec2);
            
            TabSpec tabSpec3 = (TabSpec)tabHost.newTabSpec("SAVE").setIndicator("SAVE");
            tabSpec3.setContent(new Intent(MainActivity.this,SaveActivity.class));
            tabHost.addTab(tabSpec3);
            
            TabSpec tabSpec4 = (TabSpec)tabHost.newTabSpec("MORE").setIndicator("MORE");
            tabSpec4.setContent(new Intent(MainActivity.this,MoreActivity.class));
            tabHost.addTab(tabSpec4);
        }
    }

HomeActivity.java

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  package com.tablehost.activity;  
2.    
3.  import android.app.Activity;  
4.  import android.os.Bundle;  
5.    
6.  public class HomeActivity extends Activity\{  
7.    
8.      @Override  
9.      protected void onCreate(Bundle savedInstanceState) \{  
10.         super.onCreate(savedInstanceState);  
11.         setContentView(R.layout.home);  
12.     \}  
13.       
14. \}

package com.tablehost.activity;
    
    import android.app.Activity;
    import android.os.Bundle;
    
    public class HomeActivity extends Activity{
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.home);
    	}
    	
    }

其他三个CommentActivity.java ，SaveActivity.java，MoreActivity.java 跟 HomeActivity.java 差不多，这里不给出代码了。

最后在AndroidManifest.xml对Activity进行声明：

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <activity android:name=".HomeActivity" />  
2.          <activity android:name=".CommentActivity" />  
3.          <activity android:name=".SaveActivity" />  
4.          <activity android:name=".MoreActivity" />

[1361189126_5364.png]: https://img-my.csdn.net/uploads/201302/18/1361189126_5364.png
[1361189153_4693.png]: https://img-my.csdn.net/uploads/201302/18/1361189153_4693.png
[1361189239_6806.png]: https://img-my.csdn.net/uploads/201302/18/1361189239_6806.png
[view plain]: http://blog.csdn.net/wulianghuan/article/details/8588947#
[1361189519_1720.png]: https://img-my.csdn.net/uploads/201302/18/1361189519_1720.png

发表评论取消回复

表情：

评论列表（有 0 条评论，111人围观）

还没有评论，来说两句吧...

相关阅读

相关创建选项菜单

目录创建安卓应用将背景图片拷贝到drawable目录打开字符串资源文件 strings.xml输入代码：打开主布局资源文件activity\_main.

谁借莪１个温暖的怀抱￠/ 2024年03月30日 10:23/ 0 赞/ 88 阅读

相关 Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡

《Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡》之前基于github上的第三方开源控件ViewPagerIndicator的Und

小鱼儿/ 2023年10月16日 21:19/ 0 赞/ 75 阅读

相关 ViewPager+Fragment实现TabHost，Fragment动态添加、删除，Tab选项卡跟随滑动

效果图： ![Center][] 代码功能：（1）用ViewPager+Fragment实现TabHost，ViewPager的每一个Page均是Fragme

忘是亡心i/ 2023年10月16日 20:58/ 0 赞/ 21 阅读

相关使用TabHost实现卡片选项菜单实例

TabHost是一个装载选项卡窗口的容器，实现分模块显示的效果。像新浪微博客户端、微信客户端都是使用tabehost组件来开发的。 TabHost的组成： |---TabW

痛定思痛。/ 2022年09月17日 10:19/ 0 赞/ 112 阅读

相关 Android TabHost菜单放在底部方法

在xml中修改第一种： 1、tabcontent和tabs交换位置 2、tabcontent的android:layout\_weight="1"

矫情吗；*/ 2022年08月24日 04:26/ 0 赞/ 247 阅读

相关【J】Android - TabHost 选项卡功能用法

tabHost = (TabHost) findViewById(android.R.id.tabhost);//这个是设置选项卡 tabHost.se

ゝ一世哀愁。/ 2022年06月08日 12:55/ 0 赞/ 221 阅读

相关安卓——OptionsMenus实现选项菜单

![70][] ![70 1][] ![70 2][] ![70 3][]![70 4][] activity\_main.xml

Dear 丶/ 2022年05月29日 12:29/ 0 赞/ 263 阅读

相关 Android_(菜单)选项菜单

Android系统中菜单分为Options Menu、Context Menu、Sub Men三种 Options Menu和Context Menu属于一级菜单 Sub

川长思鸟来/ 2021年12月12日 23:43/ 0 赞/ 397 阅读

相关 Android菜单：选项菜单+上下文菜单+子菜单

菜单是人机交互的重要接口，在 [Android][] SDK 中，提供了菜单类 android.view.Menu，以完成与菜单有关的操作。 Android SDK

蔚落/ 2021年12月09日 23:23/ 0 赞/ 786 阅读

相关 Android —— Tabhost选项卡

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

àì夳堔傛蜴生んèń/ 2021年07月25日 11:31/ 0 赞/ 465 阅读