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. 选项卡中的个别元素一般通过其容器对象来控制，而不是直接设置子元素本身的值。

巴特西

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

最新文章

热门文章