android 切换卡(TabWidget)

最新推荐文章于 2024-10-09 16:47:44 发布

xiaohang333

最新推荐文章于 2024-10-09 16:47:44 发布

阅读量79

点赞数

分类专栏： android 控件文章标签： Android OS .net Blog

android 控件专栏收录该内容

11 篇文章 0 订阅

订阅专栏

TabWidget类似于Android 中查看电话薄的界面，通过多个标签切换显示不同内容。要实现这一效果，首先要了解TabHost，它是一个用来存放多个Tab标签的容器。每一个Tab都可以对应自己的布局，比如，电话薄中的Tab布局就是一个List的线性布局了。
要使用TabHost,首先需要通过getTabHost方法来获取TabHost的对象，然后通过addTab方法来向TabHost中添加 Tab。当然每个Tab在切换时都会产生一个事件，要捕捉这个事件需要设置TabActivity的事件监听 setOnTabChangedListener。我们先来看看运行效果吧。

[img]http://dl.iteye.com/upload/attachment/356513/a4876712-2946-30db-8b03-9cd6e031bf11.jpg[/img]
[img]http://dl.iteye.com/upload/attachment/356515/af1a26b1-749e-3e7f-b9d8-eafa02ffaaef.jpg[/img]
[img]http://dl.iteye.com/upload/attachment/356517/f919f82b-66f6-3b98-bbb6-f2f4f9c37705.jpg[/img]

布局文件
<?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">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/textview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Linux"
android:textColor="#FF0000"
/>
<TextView
android:id="@+id/textview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#385E0F"
android:text="MAC"/>
<TextView
android:id="@+id/textview3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#1E90FF"
android:text="Window"/>
</FrameLayout>
</LinearLayout>
</TabHost>
这里稍有不同，用的是 TabHost 然后 LinearLayout里边套了一个 FrameLayout
LinearLayout 就不说了这里说一下 FrameLayout 的特点 FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域，之后你可以在其中填充一个单一对象 — 比如，一张你要发布的图片。所有的子元素将会固定在屏幕的左上角；你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充，把它们部份或全部挡住（除非后一个子元素是透明的）。这里最重要的特点就是后一个子元素将会直接在前一个子元素之上进行覆盖填充，把它们部分或全部挡住我们也正是利用了它的这一特点。大家看看运行效果就知道咋回事了。这里有个关于布局对象的简单讲解[url]http://blog.csdn.net/Android_Tutor/archive/2009/11/06/4779097.aspx[/url]

下边是 Activity 类


package xiaohang.zhimeng;

import android.app.AlertDialog;
import android.app.Dialog;
import android.app.TabActivity;
import android.content.DialogInterface;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.TabHost; 
import android.widget.TabHost.OnTabChangeListener;

//这里注意一下，继承的是TabActivity 不是Activity
public class Activity01 extends TabActivity {

	// 声明TabHost对象
	TabHost xh_TabHost;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

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

		/**
		 * 为TabHost添加标签 新建一个newTabSped(newTabSpec) 设置其标签和图标（setIndicator）
		 * 设置内容(setContent)
		 */
		// TabSpec 是TabHost的内部类 TabHost对象的 newTabSpec()方法返回一个TabSpec对象 这个关系要搞清楚
		/*
		 * 源码里边是这么写的 public TabSpec newTabSpec(String tag) { return new
		 * TabSpec(tag); }
		 */

		xh_TabHost.addTab(xh_TabHost.newTabSpec("tab_test1")
		// setIndicator()此方法用来设置标签和图表
				.setIndicator("TAB 1",
						getResources().getDrawable(R.drawable.img1))
				// 指定内容为一个TextView --->public TabHost.TabSpec setContent (int
				// viewId) 此方法需要一个 viewId 作为参数
				.setContent(R.id.textview1));

		xh_TabHost.addTab(xh_TabHost.newTabSpec("tab_test2").setIndicator(
				"TAB 2", getResources().getDrawable(R.drawable.img2))
				.setContent(R.id.textview2));

		xh_TabHost.addTab(xh_TabHost.newTabSpec("tab_test3").setIndicator(
				"TAB 3", getResources().getDrawable(R.drawable.img3))
				.setContent(R.id.textview3));

		// 设置TabHost的背景颜色
		xh_TabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));

		// 设置TabHost的背景图片资源
		xh_TabHost.setBackgroundResource(R.drawable.bg2);

		// 设置当前显示哪一个标签 我的理解就是当你第一次启动程序默认显示那个标签 这里是指定的选项卡的ID从0开始
		xh_TabHost.setCurrentTab(0);

		// 标签切换事件处理，setOnTabChangedListener 注意是标签切换事件不是点击事件
		// 就是从一个标签切换到另外一个标签会触发的事件
		xh_TabHost.setOnTabChangedListener(new OnTabChangeListener() {
			@Override
			public void onTabChanged(String tabId) {
				// 定义一个弹出式的对话框
				Dialog dialog = new AlertDialog.Builder(Activity01.this)
						.setTitle("提示").setMessage("当前选中了：" + tabId + "标签")
						.setPositiveButton("确定",
								new DialogInterface.OnClickListener() {
									@Override
									public void onClick(DialogInterface dialog,
											int which) {
										// 取消对话框
										dialog.cancel();
									}

								}).create();// 创建出一个“确定”按钮
				// 启动此对话框并且显示在屏幕上
				dialog.show();
			}
		});
	}
}

运行效果图
[url]http://link.youzhaopian.com/pplink/3hOnOpzDj3yNvHC/fNqN0eCu+LN5cMyn[/url]
[url]http://link.youzhaopian.com/pplink/3hOnOpzDj3wdXwwq9duTmZfcaqdCYIG3[/url]
[url]http://link.youzhaopian.com/pplink/3hOnOpzDj3x3QPfNBm0cXl6jF4j50MRi[/url]

平台：android 2.0 APILEVEL 5 源码见附件