Android（java）学习笔记71：Tab标签的使用

1. 案例1---TabProject

（1）首先是main.xml文件：

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
      android:background="@drawable/bg2"
     >
     <Button
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:text="This is Tab1"
         android:id="@+id/btn"
         />
     <EditText
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:text="This is Tab2"
         android:id="@+id/et"
         />
     <LinearLayout
         android:orientation="vertical"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:id="@+id/mylayout"
         android:background="@drawable/bg" // 覆盖了前面的@drawable/bg2
         >
         <Button
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="This is Tab3"
             />
         <EditText
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="This is Tab3"
             />
     </LinearLayout>
 </LinearLayout>

（2）然后是MainActivity.java文件：

 package com.tab;

 import android.app.TabActivity;
 import android.os.Bundle;
 import android.view.LayoutInflater;
 import android.widget.TabHost;
 import android.widget.Toast;
 import android.widget.TabHost.OnTabChangeListener;
 import android.widget.TabHost.TabSpec;

 public class MainActivity extends TabActivity implements OnTabChangeListener {
     private TabSpec ts1, ts2, ts3;//声明3个分页
     private TabHost tableHost;//分页菜单(tab的容器)
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         tableHost = this.getTabHost();//实例(分页)菜单,getTabHost()這是TabActivity方法，获取TabHost实例

         //利用LayoutInflater将布局与分页菜单一起显示
         //from是LayoutInflater的静态方法,LayoutInflater.from(this),this表示当前MainActivity
         //在当前context下获取LayoutInflater的实例，从而可以调用inflate方法
         //inflate(参数1,参数2):参数1表示需要加载的布局文件id，参数2表示附加在resource资源文件的根控件
         LayoutInflater.from(this).inflate(R.layout.main, tableHost.getTabContentView());
         //分别给ts1,ts2,ts3分页进行设置，绑定资源
         ts1 = tableHost.newTabSpec("tabOne");//实例化一个分页,这里"tabOne"这个标签ID绑定分页1，实现下面的接口实现操作
         ts1.setIndicator("Tab1")//设置此分页显示的标题,字母会大写显示
         .setContent(R.id.btn);//设置此分页的资源id

         ts2 = tableHost.newTabSpec("tabTwo");
         //设置此分页显示的标题和图标
         ts2.setIndicator("Tab2", getResources().getDrawable(R.drawable.icon))
         .setContent(R.id.et);

         ts3 = tableHost.newTabSpec("tabThree");
         ts3.setIndicator("Tab3")
         .setContent(R.id.mylayout);//设置此分页的布局id

         tableHost.addTab(ts1);//菜单中添加ts1分页
         tableHost.addTab(ts2);//菜单中添加ts2分页
         tableHost.addTab(ts3);//菜单中添加ts3分页

         tableHost.setOnTabChangedListener(this);
     }
     @Override
     public void onTabChanged(String tabId) {
         if (tabId.equals("tabOne")) {//ts1 = tableHost.newTabSpec("tabOne");
             Toast.makeText(this, "分页1", Toast.LENGTH_LONG).show();
         }
         if (tabId.equals("tabTwo")) {
             Toast.makeText(this, "分页2", Toast.LENGTH_LONG).show();
         }
         if (tabId.equals("tabThree")) {
             Toast.makeText(this, "分页3", Toast.LENGTH_LONG).show();
         }
     }
 }

总结：

(1)这里把main.xml作为一个整体资源进行分配给不同标签分页，位置分别在自己分页置顶

(2)使用OnTabChangeListener接口，重写OnTabChanged(String tabId)函数

(3)判断OnTabChanged(String tabId)中的tabId参数进行处理事件；这里的tabId对应的是实例中每个分页传入的分页ID，例如ts1的ID为：

tableHost.newTabSpec("tabOne")，而不是TabSpec.setIndicatior()设置的标题。

2. 案例2---TabTest

（1）首先是activity_main.xml文件：

 <?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" >  

     <RelativeLayout
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:orientation="vertical" >  

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

         <FrameLayout
             android:id="@android:id/tabcontent"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content" >  

             <TextView
                 android:id="@+id/textview1"
                 android:layout_width="fill_parent"
                 android:layout_height="fill_parent"
                 android:text="this is a tab" />  

             <TextView
                 android:id="@+id/textview2"
                 android:layout_width="fill_parent"
                 android:layout_height="fill_parent"
                 android:text="this is another tab" />  

             <TextView
                 android:id="@+id/textview3"
                 android:layout_width="fill_parent"
                 android:layout_height="fill_parent"
                 android:text="this is a third tab" />
         </FrameLayout>  

     </RelativeLayout>  

 </TabHost>  

（2）其次是MainAcitivity.java文件：

 package com.dream.tabtest;
 import java.util.ArrayList;
 import java.util.List;  

 import android.app.TabActivity;
 import android.graphics.Color;
 import android.os.Bundle;
 import android.view.Gravity;
 import android.view.View;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.TabHost;
 import android.widget.TabHost.OnTabChangeListener;
 import android.widget.TextView;  

 @SuppressWarnings("deprecation") //deprecation:过期的,@SuppressWarnings("deprecation")：表示不检测过期的方法
 public class MainActivity extends TabActivity {  

     //声明TabHost对象
         TabHost mTabHost;
         public List<ImageView> imageList = new ArrayList<ImageView>();
         /** Called when the activity is first created. */
         @Override
         public void onCreate(Bundle savedInstanceState)
         {
             super.onCreate(savedInstanceState);
             setContentView(R.layout.activity_main);     

             //取得TabHost对象
             mTabHost = getTabHost();     

             /* 为TabHost添加标签 */
             //新建一个newTabSpec(newTabSpec)
             //设置其标签和图标(setIndicator)
             //设置内容(setContent)
             mTabHost.addTab(mTabHost.newTabSpec("tab_test1")
                     .setIndicator(composeLayout("TAB_1", R.drawable.img1))//给tab1一个标签 指示
                     .setContent(R.id.textview1));
             mTabHost.addTab(mTabHost.newTabSpec("tab_test2")
                     .setIndicator(composeLayout("TAB_2", R.drawable.img2))//给tab2一个标签 指示
                     .setContent(R.id.textview2));
             mTabHost.addTab(mTabHost.newTabSpec("tab_test3")
                     .setIndicator(composeLayout("TAB_3", R.drawable.img3))//给tab3一个标签 指示
                     .setContent(R.id.textview3));     

             //设置TabHost的背景颜色
             //mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));
             //设置TabHost的背景图片资源
             //mTabHost.setBackgroundResource(R.drawable.image1);      

             //设置当前显示哪一个标签
             mTabHost.setCurrentTab(0);
             imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img01));  

             //标签切换事件处理，setOnTabChangedListener
             //onTabChanged(String str)的监听,该监听是只有当你切换tab时才会发生动作事件
             mTabHost.setOnTabChangedListener(new OnTabChangeListener()
             {
                 // TODO Auto-generated method stub
                 public void onTabChanged(String tabId)
                 {
                             // 设置所有选项卡的图片为未选中图片
                             imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img1));
                             imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.img2));
                             imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.img3));    

                             if (tabId.equalsIgnoreCase("tab_test1")) {
                                 imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img01));
                                 // 移动底部背景图片
                                 //moveTopSelect(0);
                             } else if (tabId.equalsIgnoreCase("tab_test2")) {
                                 imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.img02));
                                 // 移动底部背景图片
                                 //moveTopSelect(1);
                             } else if (tabId.equalsIgnoreCase("tab_test3")) {
                                 imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.img03));
                                 // 移动底部背景图片
                                 //moveTopSelect(2);
                             }    

                 }
             });
         }
         /**
          * 这个设置Tab标签本身的布局，需要TextView和ImageView不能重合 s:是文本显示的内容 i:是ImageView的图片位置
          */
         public View composeLayout(String s, int i) {
                     // 定义一个LinearLayout布局
                     LinearLayout layout = new LinearLayout(this);
                     // 设置布局垂直显示
                     layout.setOrientation(LinearLayout.VERTICAL);
                     ImageView iv = new ImageView(this);
                     imageList.add(iv);
                     iv.setImageResource(i);
                     //设置图片布局
                     LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, 50);
                     lp.setMargins(0, 0, 0, 0);
                     layout.addView(iv, lp);
                     // 定义TextView
                     TextView tv = new TextView(this);
                     tv.setGravity(Gravity.CENTER);
                     tv.setSingleLine(true);
                     tv.setText(s);
                     tv.setTextColor(Color.BLACK);
                     tv.setTextSize(10);
                     //设置Text布局
                     layout.addView(tv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
                     return layout;
                 }
 }  

3. 总结:

所谓的TabHost是提供选项卡（Tab页）的窗口视图容器.

此对象包含两个子对象：一个是使用户可以选择指定标签页的标签的集合TabWidge；TabWidget类似于Android 中查看电话薄的界面，通过多个标签切换显示不同内容。另一个是用于显示标签页内容的 FrameLayout. 选项卡中的个别元素一般通过其容器对象来控制，而不是直接设置子元素本身的值。