使用TabHost实现卡片选项菜单

 菜鸟学习android之TabHost.查询资料说android有这么个玩意--------选项卡。首先聊聊什么是选项卡,从网上搜索资料显示:一个顶部的按钮(可点击的)的切换卡部分,一个主内容区(上图显示“第二个窗体”字体的)的主显示区。举个简单点的例子吧,大家可以看看android手机上的通讯录,用的就是选项卡,点击顶部的选项卡一,二,三,在显示区会有不同的内容。强烈推荐看看手机上的通讯录。

TabHost是Tab的容器,包括两部分TabWidget和FrameLayout,TabWidget是tab的标签,FrameLayout是tab的内容。

再来说说,选项卡的使用:先来说说,xml布局文件的使用

1-----TabHost必须设置为@android:id/tabHost

2------TabWidget必须将android:id设置为@android:id/tabs

3-------FrameLayout需要将android:id设置为@android:id/tabcontent

接下来说说Activity的使用。如果想新建一个Activity实现tabhost,必须要继承TabActivity,此后,又是三步走战略。

1-------获得TabHost的对象,

             TabHost    tabHost = getTabHost();

2-------通过TabHost.TabSpec增加tab的一页,通过setContent()增加内容,通过setIndicator()增加页的标签。

            TabHost.TabSpec  spec  = tabHost.newTabSpec();

            spec.setContent(new Intent());

           spec.setIndicator("音乐",Resource res);

           tabHost.addTab(spec);

3--------通过setCurrentTab(index)指定显示的页,从0开始。

             tabHost.setCurrentTab(0);

以下是代码。
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. package cn.com.karl.music;  
  2.   
  3. import android.app.TabActivity;  
  4. import android.content.Intent;  
  5. import android.content.res.Resources;  
  6. import android.os.Bundle;  
  7. import android.view.Window;  
  8. import android.view.WindowManager;  
  9. import android.widget.TabHost;  
  10.   
  11. /** 
  12.  * 选项卡的使用 1 . 继承TabActivity 2、用getTabHost()方法获取TabHost; 3、各Tab内容在布局文件中定义。 
  13.  * 在手机屏幕中,Tab也是比较常用的,通常和List结合,例如我们手机的通信录。下面是Tag的结构。 
  14.  *  
  15.  * TabHost是整个Tab的容器,包括两部分,TabWidget和FrameLayout。TabWidget就是每个tab的标签, 
  16.  * FrameLayout则是tab内容。 
  17.  *  
  18.  * 如果我们使用extends TabAcitivty,如同ListActivity,TabHost必须设置为@android:id/tabhost 
  19.  * TabWidget必须设置android:id为@android:id/tabs 
  20.  * FrameLayout需要设置android:id为@android:id/tabcontent 
  21.  *  
  22.  * @author SYJ 
  23.  *  
  24.  */  
  25. public class MainActivity extends TabActivity {  
  26.     /** Called when the activity is first created. */  
  27.     @Override  
  28.     public void onCreate(Bundle savedInstanceState) {  
  29.         super.onCreate(savedInstanceState);  
  30.         requestWindowFeature(Window.FEATURE_NO_TITLE);// 应用窗体显示状态操作该参数表示无标题  
  31.         this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,  
  32.                 WindowManager.LayoutParams.FLAG_FULLSCREEN);// 去掉任务栏  
  33.         setContentView(R.layout.main);// 该语句必须在以上两句之后  
  34.   
  35.         Resources res = getResources(); // 得到资源对象  
  36.         //步骤1:获得TabHost的对象,并进行初始化setup()  
  37.         TabHost tabHost = getTabHost(); // 选项卡类似于java中的卡片布局  
  38.         TabHost.TabSpec spec;  
  39.         Intent intent;  
  40.         intent = new Intent().setClass(this, ListActivity.class);// 启动音乐列表界面  
  41.         // 步骤2:通过TabHost.TabSpec增加tab的一页,通过setContent()增加内容,通过setIndicator增加页的标签  
  42.         spec = tabHost.newTabSpec("音乐")  
  43.                 .setIndicator("音乐", res.getDrawable(R.drawable.item))  
  44.                 .setContent(intent);  
  45.         tabHost.addTab(spec);  
  46.   
  47.         intent = new Intent().setClass(this, ArtistsActivity.class);  
  48.         spec = tabHost.newTabSpec("艺术家")  
  49.                 .setIndicator("艺术家", res.getDrawable(R.drawable.artist))  
  50.                 .setContent(intent);  
  51.         tabHost.addTab(spec);  
  52.   
  53.         intent = new Intent().setClass(this, AlbumsActivity.class);  
  54.         spec = tabHost.newTabSpec("专辑")  
  55.                 .setIndicator("专辑", res.getDrawable(R.drawable.album))  
  56.                 .setContent(intent);  
  57.         tabHost.addTab(spec);  
  58.         intent = new Intent().setClass(this, SongsActivity.class);  
  59.         spec = tabHost.newTabSpec("最近播放")  
  60.                 .setIndicator("最近播放", res.getDrawable(R.drawable.album))  
  61.                 .setContent(intent);  
  62.         tabHost.addTab(spec);  
  63.   
  64.         // 步骤3:可通过setCurrentTab(index)指定显示的页,从0开始计算。  
  65.         tabHost.setCurrentTab(0);  
  66.   
  67.     }  
  68. }  


[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@android:id/tabhost"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="fill_parent"  
  10.         android:orientation="vertical"  
  11.         android:padding="5dp" >  
  12.   
  13.         <TabWidget  
  14.             android:id="@android:id/tabs"  
  15.             android:layout_width="fill_parent"  
  16.             android:layout_height="wrap_content" />  
  17.   
  18.         <FrameLayout  
  19.             android:id="@android:id/tabcontent"  
  20.             android:layout_width="fill_parent"  
  21.             android:layout_height="fill_parent"  
  22.             android:padding="5dp" />  
  23.     </LinearLayout>  
  24.   
  25. </TabHost>  


Android之UI学习篇九:使用TabHost实现卡片选项菜单


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的布局文件,使用起来比较方便,推荐大家使用这种方式。


先来看看实现的效果吧:





下面给出源代码:

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

工程目录结构


main.xml

[html]  view plain copy
  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>  


home.xml

[html]  view plain copy
  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>  

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


TabHostActivity.java

[html]  view plain copy
  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. }  


第二种方式(继承TabActivity):

工程目录结构


home.xml

[html]  view plain copy
  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>  
其他3个布局文件跟这个一样。


MainActivity.java

[html]  view plain copy
  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. }  

HomeActivity.java

[html]  view plain copy
  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. }  

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

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

[html]  view plain copy
  1. <activity android:name=".HomeActivity" />  
  2.         <activity android:name=".CommentActivity" />  
  3.         <activity android:name=".SaveActivity" />  
  4.         <activity android:name=".MoreActivity" />  

好了,这篇先暂时介绍到这里,后面我会讲一篇模拟新浪微博客户端的案例,跟大家分享一下
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值