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