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 <EditText 15 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" 26 > 27 <Button 28 android:layout_width="fill_parent" 29 android:layout_height="wrap_content" 30 android:text="This is Tab3" 31 /> 32 <EditText 33 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 @Override
15 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);//设置此分页的资源id
28
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);//设置此分页的布局id
37
38 tableHost.addTab(ts1);//菜单中添加ts1分页
39 tableHost.addTab(ts2);//菜单中添加ts2分页
40 tableHost.addTab(ts3);//菜单中添加ts3分页
41
42
43 tableHost.setOnTabChangedListener(this);
44 }
45 @Override
46 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作为一个整体资源进行分配给不同标签分页，当然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. 选项卡中的个别元素一般通过其容器对象来控制，而不是直接设置子元素本身的值。
时间： 2024-10-24 17:08:02