Android开发：TabHost常用技巧


在很多其他语言进行界面编程的时候，都有 Tab 这样的控件，在 Android 编程环境下也不例外。 TabHost 由一个 TabSpecs 和一个嵌套的 TabHost 组成，该嵌套的 TabHost 包含 tab 的标题以及 tab 的内容。一个 tab 的内容，可以是一个预先定义好的 View ，或者是通过 Intent 对象启动的 Activity ，或者是利用 TabContentFactory 所创建出来的 View 。  

Tab 并没有看起来那么复杂。每个 tab 实际上就是一个 View 的容器。  

有两种方式可以实现 tab 。一种是直接使用 TabActivity ，一种是不使用 TabActivity 。我们首先来看看使用 TabActivity 实现 tab 的情况。  

第一种情况：使用 TabActivity

1.     创建一个 Android Project 。

2.     新建一个 xml 文件： tab_demo.xml ，使其内容如下：

<? xml version = "1.0" encoding = "utf-8" ?>

< FrameLayout xmlns:android = "http://schemas.android.com/apk/res/android"

    android:orientation = "vertical"

    android:layout_width = "fill_parent"

    android:layout_height = "fill_parent"

    >

    < TextView android:id = "@+id/tab_demo_tv1"

        android:layout_width = "fill_parent"  

        android:layout_height = "fill_parent"  

        android:text = "tab_demo_tv1"

    />

    < LinearLayout android:id = "@+id/tab_linearlayout2"

        android:layout_width = "fill_parent"  

        android:layout_height = "fill_parent"

        android:orientation = "vertical"

    >

       < TextView android:id = "@+id/tab_demo_tv2"

        android:layout_width = "wrap_content"  

        android:layout_height = "wrap_content"  

        android:text = "tab_demo_tv2"

       />

      

       < Button

        android:layout_width = "fill_parent"  

        android:layout_height = "wrap_content"  

        android:text = "Tab demo Button"

       />

    </ LinearLayout >

   

    < TextView android:id = "@+id/tab_demo_tv3"

        android:layout_width = "fill_parent"  

        android:layout_height = "fill_parent"  

        android:text = "tab_demo_tv3"

    />

</ FrameLayout >

上面的第一和第三个 TextView ，也可以是 LinearLayout(tab_linearlayout2) 。

 

3.     修改 Activity 所对应的代码，使之如下：

package com.pat.gui;

 

import android.app.TabActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.widget.TabHost;

 

public class AndroidGUI24Activity extends TabActivity

{

    private TabHost tabhost ;

    @Override

    public void onCreate(Bundle savedInstanceState)

    {

        super .onCreate(savedInstanceState);

        // 获取该 Activity 用于容纳 tab 的 TabHost 对象

        // Returns the TabHost the activity is using to host its tabs.

        tabhost = getTabHost();

       

        // 获取 LayoutInflater 对象

        LayoutInflater inflater = LayoutInflater.from ( this );

       

        // TabHost.getTabContentView 方法的作用： Get the FrameLayout which holds tab content

        // LayoutInflater.inflate 方法的作用：

        // Inflate a new view hierarchy from the specified xml resource.

        // 其原型为： public View inflate (int resource, ViewGroup root)

        // 参数：

        // resource   ID for an XML layout resource to load (e.g., R.layout.main_page)

        // root            Optional view to be the parent of the generated hierarchy.

        // 返回值：

        // The root View of the inflated hierarchy. If root was supplied, this is the root

        // View; otherwise it is the root of the inflated XML file.

        inflater.inflate(R.layout. tab_demo , tabhost .getTabContentView());

        // 上面这句话，就是将 tab_demo.xml 的内容，嵌入到 tabhost.getTabContentView() 所返回的 FrameLayout 中

       

        // 给 tabhost 增加 tab

        // newTabSpec(String tag) 返回一个 TabHost.TabSpec 对象，其参数用于标识一个 tab 的 tag ，为 String 类型

        // setIndicator(" 国籍 "): 显示 tab 上的文字

        // setContent(R.id.tab_demo_tv1) ：指定 tab 的内容，必须为 id ，比如空间的 id 或者 layout 的 id

        tabhost .addTab( tabhost .newTabSpec( "tab1" ).setIndicator( " 国籍 " ).setContent(R.id. tab_demo_tv1 ));

        tabhost .addTab( tabhost .newTabSpec( "tab2" ).setIndicator( " 爱好 " ).setContent(R.id. tab_linearlayout2 ));

        tabhost .addTab( tabhost .newTabSpec( "tab3" ).setIndicator( " 职业 " ).setContent(R.id. tab_demo_tv3 ));

    

        // 指定显示第几个 tab

        tabhost .setCurrentTab(1);

       

        // 在上面的工作都做完之后，再调用 setContentView

        //setContentView(R.layout.main);

        setContentView( tabhost );

    }

}

 

运行结果：


可以看到是第 2 个 tab 出现在屏幕上。点击“国籍”和“职业”两个 tab 会看到与之分别对应的界面。

 

4.     在前面的代码中，我们将 3 个 tab 需要显示的内容均在 tab_demo.xml 这一个文件中规定了。事实上，我们还可以有另外一种做法，那就是让不同的 tab 分别对应不同的 xml 布局文件，为此，新建三个布局文件，并使之如下：

tab1.xml:

<? xml version = "1.0" encoding = "utf-8" ?>

< LinearLayout

  xmlns:android = "http://schemas.android.com/apk/res/android"

  android:layout_width = "wrap_content"

  android:layout_height = "wrap_content"

  android:id = "@+id/tab1"

  android:orientation = "vertical" >

 

         < TextView

                  android:id = "@+id/tab1tv1"

                  android:layout_width = "wrap_content"

                  android:layout_height = "wrap_content"

                  android:text = "Tab1"

         />

        

         < Button

                  android:id = "@+id/tab1btn1"

                  android:layout_width = "wrap_content"

                  android:layout_height = "wrap_content"

                  android:text = " 按钮 1"

         />

</ LinearLayout >

 

tab2.xml:

<? xml version = "1.0" encoding = "utf-8" ?>

< LinearLayout

       xmlns:android = "http://schemas.android.com/apk/res/android"

       android:layout_width = "wrap_content"

       android:layout_height = "wrap_content"

       android:id = "@+id/tab2"

       android:orientation = "vertical" >

 

 

       < TextView

                 android:layout_width = "wrap_content"

                 android:layout_height = "wrap_content"

                 android:text = "Tab2"

       />

      

       < Button

                 android:id = "@+id/tab2btn1"

                 android:layout_width = "wrap_content"

                android:layout_height = "wrap_content"

                 android:text = " 按钮 1"

       />

      

       < Button

                 android:id = "@+id/tab2btn2"

                 android:layout_width = "wrap_content"

                 android:layout_height = "wrap_content"

                 android:text = " 按钮 2"

       />    

</ LinearLayout >

 

tab3.xml:

<? xml version = "1.0" encoding = "utf-8" ?>

< LinearLayout

       xmlns:android = "http://schemas.android.com/apk/res/android"

       android:layout_width = "wrap_content"

       android:layout_height = "wrap_content"

       android:id = "@+id/tab3"

         android:orientation = "vertical" >

 

 

       < TextView

                 android:layout_width = "wrap_content"

                 android:layout_height = "wrap_content"

                 android:text = "Tab3"

       />  

      

       < Button

                 android:id = "@+id/tab3btn1"

                 android:layout_width = "wrap_content"

                 android:layout_height = "wrap_content"

                 android:text = " 按钮 1"

       />

      

       < Button

                 android:id = "@+id/tab3btn2"

                 android:layout_width = "wrap_content"

                 android:layout_height = "wrap_content"

                 android:text = " 按钮 2"

       />

      

       < Button

                 android:id = "@+id/tab3btn3"

                 android:layout_width = "wrap_content"

                android:layout_height = "wrap_content"

                 android:text = " 按钮 3"

       />             

</ LinearLayout >

 

5.     对应地修改 Activity 的代码，使之如下：

package com.pat.gui;

 

import android.app.TabActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.TabHost;

 

public class AndroidGUI24Activity extends TabActivity

implements

OnClickListener

{

         private TabHost tabhost ;

         private Button tab1btn1 ;

         private Button tab2btn1 ;

         private Button tab2btn2 ;

         private Button tab3btn1 ;

         private Button tab3btn2 ;

         private Button tab3btn3 ;

       @Override

       public void onCreate(Bundle savedInstanceState)

       {

        super .onCreate(savedInstanceState);

        // 获取该 Activity 用于容纳 tab 的 TabHost 对象

        // Returns the TabHost the activity is using to host its tabs.

        tabhost = getTabHost();

       

        // 获取 LayoutInflater 对象

        LayoutInflater inflater = LayoutInflater.from ( this );

       

        // TabHost.getTabContentView 方法的作用： Get the FrameLayout which holds tab content

        // LayoutInflater.inflate 方法的作用：

        // Inflate a new view hierarchy from the specified xml resource.

        // 其原型为： public View inflate (int resource, ViewGroup root)

         // 参数：

        // resource   ID for an XML layout resource to load (e.g., R.layout.main_page)

        // root            Optional view to be the parent of the generated hierarchy.

        // 返回值：

        // The root View of the inflated hierarchy. If root was supplied, this is the root

        // View; otherwise it is the root of the inflated XML file.

       

        // 下面这几句话，就是将 tab1.xml 、 tab2.xml 、 tab3.xml 的内容，全嵌入到 tabhost.getTabContentView()

        // 所返回的 FrameLayout 中。

        inflater.inflate(R.layout. tab1 , tabhost .getTabContentView());

        inflater.inflate(R.layout. tab2 , tabhost .getTabContentView());

        inflater.inflate(R.layout. tab3 , tabhost .getTabContentView());

       

        // 给 tabhost 增加 tab

        // newTabSpec(String tag) 返回一个 TabHost.TabSpec 对象， TabHost.TabSpec

        // setIndicator(" 国籍 "): 显示 tab 上的文字

        // setContent(R.id.tab_demo_tv1) ：指定 tab 的内容

        tabhost .addTab( tabhost .newTabSpec( "tab1" ).setIndicator( " 国籍 " ).setContent(R.id. tab1 ));

        tabhost .addTab( tabhost .newTabSpec( "tab2" ).setIndicator( " 爱好 " ).setContent(R.id. tab2 ));

        tabhost .addTab( tabhost .newTabSpec( "tab3" ).setIndicator( " 系统 " ).setContent(R.id. tab3 ));

       

        // 指定显示第几个 tab

        tabhost .setCurrentTab(1);

       

        // 在上面的工作都做完后，调用 setContentView

        //setContentView(R.layout.main);

        setContentView( tabhost );

      

        // 获取 6 个按钮对象，并分别给它们增加 OnClickListener

        tab1btn1 = (Button)findViewById(R.id. tab1btn1 );

        tab1btn1 .setOnClickListener( this );

       

        tab2btn1 = (Button)findViewById(R.id. tab2btn1 );

        tab2btn2 = (Button)findViewById(R.id. tab2btn2 );

        tab2btn1 .setOnClickListener( this );

        tab2btn2 .setOnClickListener( this );

       

        tab3btn1 = (Button)findViewById(R.id. tab3btn1 );

        tab3btn2 = (Button)findViewById(R.id. tab3btn2 );

        tab3btn3 = (Button)findViewById(R.id. tab3btn3 );

        tab3btn1 .setOnClickListener( this );

        tab3btn2 .setOnClickListener( this );

        tab3btn3 .setOnClickListener( this );

       }

 

         //@Override

         public void onClick(View v)

         {

                    switch (v.getId())

                    {

                    case R.id. tab1btn1 :

                            tabhost .setCurrentTab(1);          // 跳转到第二个 tab

                            break ;

                  case R.id. tab2btn1 :

                             tabhost .setCurrentTab(0);          // 跳转到第一个 tab

                             break ;

                   case R.id. tab2btn2 :

                            tabhost .setCurrentTab(2);          // 跳转到第三个 tab

                             break ;

                   case R.id. tab3btn1 :

                            tabhost .setCurrentTab(0);          // 跳转到第一个 tab

                             break ;      

                   case R.id. tab3btn2 :

                            tabhost .setCurrentTab(1);          // 跳转到第二个 tab

                             break ;

                   case R.id. tab3btn3 :

                            tabhost .setCurrentTab(2);          // 跳转到第三个 tab( 自己 )

                             break ;

                    }

         }

}

         运行结果如下：

        

         可以发现，点击“按钮 1 ”会跳转到“国籍”，点击“按钮 2 ”会跳转到“系统”  

  • 1
  • 2
  • 3
  • 4
  • 下一页

相关内容