使用TabHost实现卡片选项菜单

最新推荐文章于 2021-01-07 03:56:52 发布

yippeelyl

最新推荐文章于 2021-01-07 03:56:52 发布

阅读量618

点赞数

分类专栏： Android

Android 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

菜鸟学习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

package cn.com.karl.music;

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TabHost;

/**
* 选项卡的使用 1 . 继承TabActivity 2、用getTabHost()方法获取TabHost； 3、各Tab内容在布局文件中定义。
* 在手机屏幕中，Tab也是比较常用的，通常和List结合，例如我们手机的通信录。下面是Tag的结构。
*
* TabHost是整个Tab的容器，包括两部分，TabWidget和FrameLayout。TabWidget就是每个tab的标签，
* FrameLayout则是tab内容。
*
* 如果我们使用extends TabAcitivty，如同ListActivity，TabHost必须设置为@android:id/tabhost
* TabWidget必须设置android:id为@android:id/tabs
* FrameLayout需要设置android:id为@android:id/tabcontent
*
* @author SYJ
*
*/
public class MainActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);// 应用窗体显示状态操作该参数表示无标题
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);// 去掉任务栏
        setContentView(R.layout.main);// 该语句必须在以上两句之后

        Resources res = getResources(); // 得到资源对象
        //步骤1：获得TabHost的对象，并进行初始化setup()
        TabHost tabHost = getTabHost(); // 选项卡类似于java中的卡片布局
        TabHost.TabSpec spec;
        Intent intent;
        intent = new Intent().setClass(this, ListActivity.class);// 启动音乐列表界面
        // 步骤2：通过TabHost.TabSpec增加tab的一页，通过setContent()增加内容，通过setIndicator增加页的标签
        spec = tabHost.newTabSpec("音乐")
                .setIndicator("音乐", res.getDrawable(R.drawable.item))
                .setContent(intent);
        tabHost.addTab(spec);

        intent = new Intent().setClass(this, ArtistsActivity.class);
        spec = tabHost.newTabSpec("艺术家")
                .setIndicator("艺术家", res.getDrawable(R.drawable.artist))
                .setContent(intent);
        tabHost.addTab(spec);

        intent = new Intent().setClass(this, AlbumsActivity.class);
        spec = tabHost.newTabSpec("专辑")
                .setIndicator("专辑", res.getDrawable(R.drawable.album))
                .setContent(intent);
        tabHost.addTab(spec);
        intent = new Intent().setClass(this, SongsActivity.class);
        spec = tabHost.newTabSpec("最近播放")
                .setIndicator("最近播放", res.getDrawable(R.drawable.album))
                .setContent(intent);
        tabHost.addTab(spec);

        // 步骤3：可通过setCurrentTab(index)指定显示的页，从0开始计算。
        tabHost.setCurrentTab(0);

    }
}

[html] view plain copy

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

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:padding="5dp" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>

</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 plaincopy 
    
 <?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 plaincopy 
    
 <?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 plaincopy 
    
 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)：

工程目录结构

home.xml

[html]view plaincopy 
    
 <?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 plaincopy 
    
 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 plaincopy 
    
 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 plaincopy 
    
 <activity android:name=".HomeActivity" />  
         <activity android:name=".CommentActivity" />  
         <activity android:name=".SaveActivity" />  
         <activity android:name=".MoreActivity" />  