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

1.案例1---TabProject

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

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:orientation="vertical" 4     android:layout_width="fill_parent" 5     android:layout_height="fill_parent" 6      android:background="@drawable/bg2" 7     >  8     <Button   9         android:layout_width="fill_parent" 10         android:layout_height="wrap_content" 11         android:text="This is Tab1"12         android:id="@+id/btn"13         />14     <EditText15         android:layout_width="fill_parent" 16         android:layout_height="wrap_content" 17         android:text="This is Tab2"18         android:id="@+id/et"19         />20     <LinearLayout 21         android:orientation="vertical"22         android:layout_width="fill_parent"23         android:layout_height="fill_parent"24         android:id="@+id/mylayout"25         android:background="@drawable/bg" // 覆盖了前面的@drawable/bg226         >   27         <Button  28             android:layout_width="fill_parent" 29             android:layout_height="wrap_content" 30             android:text="This is Tab3"31             />32         <EditText33             android:layout_width="fill_parent" 34             android:layout_height="wrap_content" 35             android:text="This is Tab3"36             />37     </LinearLayout>38 </LinearLayout>

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

 1 package com.tab; 2  3 import android.app.TabActivity; 4 import android.os.Bundle; 5 import android.view.LayoutInflater; 6 import android.widget.TabHost; 7 import android.widget.Toast; 8 import android.widget.TabHost.OnTabChangeListener; 9 import android.widget.TabHost.TabSpec;10 11 public class MainActivity extends TabActivity implements OnTabChangeListener {12     private TabSpec ts1, ts2, ts3;//声明3个分页13     private TabHost tableHost;//分页菜单(tab的容器)14     @Override15     public void onCreate(Bundle savedInstanceState) {16         super.onCreate(savedInstanceState);17         tableHost = this.getTabHost();//实例(分页)菜单,getTabHost()這是TabActivity方法，获取TabHost实例 18         19         //利用LayoutInflater将布局与分页菜单一起显示 20         //from是LayoutInflater的静态方法,LayoutInflater.from(this),this表示当前MainActivity 21         //在当前context下获取LayoutInflater的实例，从而可以调用inflate方法 22         //inflate(参数1,参数2):参数1表示需要加载的布局文件id，参数2表示附加在resource资源文件的根控件23         LayoutInflater.from(this).inflate(R.layout.main, tableHost.getTabContentView());24         //分别给ts1,ts2,ts3分页进行设置，绑定资源25         ts1 = tableHost.newTabSpec("tabOne");//实例化一个分页,这里"tabOne"这个标签ID绑定分页1，实现下面的接口实现操作26         ts1.setIndicator("Tab1")//设置此分页显示的标题,字母会大写显示27         .setContent(R.id.btn);//设置此分页的资源id28         29         ts2 = tableHost.newTabSpec("tabTwo");30         //设置此分页显示的标题和图标31         ts2.setIndicator("Tab2", getResources().getDrawable(R.drawable.icon))32         .setContent(R.id.et);33         34         ts3 = tableHost.newTabSpec("tabThree"); 35         ts3.setIndicator("Tab3")36         .setContent(R.id.mylayout);//设置此分页的布局id37         38         tableHost.addTab(ts1);//菜单中添加ts1分页39         tableHost.addTab(ts2);//菜单中添加ts2分页40         tableHost.addTab(ts3);//菜单中添加ts3分页41         42         43         tableHost.setOnTabChangedListener(this);44     }45     @Override46     public void onTabChanged(String tabId) {47         if (tabId.equals("tabOne")) {//ts1 = tableHost.newTabSpec("tabOne");48             Toast.makeText(this, "分页1", Toast.LENGTH_LONG).show();49         }50         if (tabId.equals("tabTwo")) {51             Toast.makeText(this, "分页2", Toast.LENGTH_LONG).show();52         }53         if (tabId.equals("tabThree")) {54             Toast.makeText(this, "分页3", Toast.LENGTH_LONG).show();55         }56     }57 }

总结：

(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文件：

 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     <RelativeLayout   8         android:layout_width="fill_parent"   9         android:layout_height="fill_parent"  10         android:orientation="vertical" >  11         12         <TabWidget  13             android:id="@android:id/tabs"  14             android:layout_width="fill_parent"  15             android:layout_height="wrap_content"  16             android:layout_alignParentBottom="true" >  17         </TabWidget>  18   19         <FrameLayout  20             android:id="@android:id/tabcontent"  21             android:layout_width="fill_parent"  22             android:layout_height="wrap_content" >  23   24             <TextView  25                 android:id="@+id/textview1"  26                 android:layout_width="fill_parent"  27                 android:layout_height="fill_parent"  28                 android:text="this is a tab" />  29   30             <TextView  31                 android:id="@+id/textview2"  32                 android:layout_width="fill_parent"  33                 android:layout_height="fill_parent"  34                 android:text="this is another tab" />  35   36             <TextView  37                 android:id="@+id/textview3"  38                 android:layout_width="fill_parent"  39                 android:layout_height="fill_parent"  40                 android:text="this is a third tab" />  41         </FrameLayout>  42   43         44   45     </RelativeLayout>  46   47 </TabHost>

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

  1 package com.dream.tabtest;  2 import java.util.ArrayList;    3 import java.util.List;    4     5 import android.app.TabActivity;    6 import android.graphics.Color;    7 import android.os.Bundle;    8 import android.view.Gravity;    9 import android.view.View;   10 import android.widget.ImageView;   11 import android.widget.LinearLayout;   12 import android.widget.TabHost;   13 import android.widget.TabHost.OnTabChangeListener;   14 import android.widget.TextView;   15    16 @SuppressWarnings("deprecation") //deprecation:过期的,@SuppressWarnings("deprecation")：表示不检测过期的方法 17 public class MainActivity extends TabActivity {   18    19     //声明TabHost对象       20         TabHost mTabHost;      21         public List<ImageView> imageList = new ArrayList<ImageView>();    22         /** Called when the activity is first created. */     23         @Override     24         public void onCreate(Bundle savedInstanceState)      25         {      26             super.onCreate(savedInstanceState);      27             setContentView(R.layout.activity_main);      28                     29             //取得TabHost对象       30             mTabHost = getTabHost();      31                    32             /* 为TabHost添加标签 */     33             //新建一个newTabSpec(newTabSpec)       34             //设置其标签和图标(setIndicator)       35             //设置内容(setContent)       36             mTabHost.addTab(mTabHost.newTabSpec("tab_test1")      37                     .setIndicator(composeLayout("TAB_1", R.drawable.img1))//给tab1一个标签 指示   38                     .setContent(R.id.textview1));      39             mTabHost.addTab(mTabHost.newTabSpec("tab_test2")      40                     .setIndicator(composeLayout("TAB_2", R.drawable.img2))//给tab2一个标签 指示           41                     .setContent(R.id.textview2));      42             mTabHost.addTab(mTabHost.newTabSpec("tab_test3")      43                     .setIndicator(composeLayout("TAB_3", R.drawable.img3))//给tab3一个标签 指示        44                     .setContent(R.id.textview3));      45                     46             //设置TabHost的背景颜色       47             //mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));      48             //设置TabHost的背景图片资源       49             //mTabHost.setBackgroundResource(R.drawable.image1);       50                     51             //设置当前显示哪一个标签       52             mTabHost.setCurrentTab(0);    53             imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img01));   54                     55             //标签切换事件处理，setOnTabChangedListener  56             //onTabChanged(String str)的监听,该监听是只有当你切换tab时才会发生动作事件 57             mTabHost.setOnTabChangedListener(new OnTabChangeListener()      58             {      59                 // TODO Auto-generated method stub       60                 public void onTabChanged(String tabId)      61                 {      62                             // 设置所有选项卡的图片为未选中图片      63                             imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img1));     64                             imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.img2));     65                             imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.img3));     66                                  67                             if (tabId.equalsIgnoreCase("tab_test1")) {     68                                 imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img01));     69                                 // 移动底部背景图片      70                                 //moveTopSelect(0);     71                             } else if (tabId.equalsIgnoreCase("tab_test2")) {     72                                 imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.img02));     73                                 // 移动底部背景图片      74                                 //moveTopSelect(1);     75                             } else if (tabId.equalsIgnoreCase("tab_test3")) {     76                                 imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.img03));     77                                 // 移动底部背景图片      78                                 //moveTopSelect(2);     79                             }     80    81                 }                 82             });      83         }      84         /**   85          * 这个设置Tab标签本身的布局，需要TextView和ImageView不能重合 s:是文本显示的内容 i:是ImageView的图片位置   86          */   87         public View composeLayout(String s, int i) {     88                     // 定义一个LinearLayout布局      89                     LinearLayout layout = new LinearLayout(this);     90                     // 设置布局垂直显示      91                     layout.setOrientation(LinearLayout.VERTICAL);     92                     ImageView iv = new ImageView(this);     93                     imageList.add(iv);     94                     iv.setImageResource(i);     95                     //设置图片布局   96                     LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, 50);     97                     lp.setMargins(0, 0, 0, 0);     98                     layout.addView(iv, lp);     99                     // 定义TextView     100                     TextView tv = new TextView(this);    101                     tv.setGravity(Gravity.CENTER);    102                     tv.setSingleLine(true);    103                     tv.setText(s);    104                     tv.setTextColor(Color.BLACK);    105                     tv.setTextSize(10);    106                     //设置Text布局  107                     layout.addView(tv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));    108                     return layout;    109                 }  110 }

总结:

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

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

更多相关文章

随机推荐