Tab Layout Tutorials 详解

Google官方例子

程序效果（图）：

布局文件 main.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 要创建一个tabbed UI ，你需要使用一个TabHost和一个TabWidget。
	 TabHost必须是这个布局文件的根节点，它包含两个元素，一个是TabWidget，用来
	  显示Tab，一个是FrameLayout用来显示Tab的内容 -->
<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"
	android:padding="5dp">
	<LinearLayout 
		android:orientation="vertical"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:padding="5dp">
		<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"
			android:padding="5dp"/>
	</LinearLayout>
</TabHost>
<!-- 这个布局文件用来显示tabs和给每一个Activity提供导航。
TabHost 需要同时包含TabWidget和Framelayout。我们使用线性布局使得TabWidget和
FrameLayout垂直分布。FrameLayout是用来存放每一个tab的内容。现在是空的是因为
TabHost会自动的将Activity嵌入到里面 -->

<!-- 注意到TabWidget和Framelayout元素都是各自有自己的ID，而且要准确的使用这些ID，
这样TabHost才能够找到他们 -->

<!-- TabHost 是一个Tabbed窗口视图的容器。这个对象拥有两个子元素。
一个是tab的标签集，用户通过点击它们来选择他想要使用的tab。
另一个是FrameLayout对象，它用来显示这一页上需要显示的内容。
每一个元素通常都是由容器对象控制，而不是通个给子元素设置属性-->

<!-- TabWidget 显示一系列表示父tab集合中每一页的tab标签。当用户选择一个tab，
这个对象会向父控件TabHost发送一个消息，告诉它切换到选择那一页。 -->

drawable文件的xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- 当选中时，使用灰色图像 -->
	<item android:drawable="@drawable/ic_tab_artists_grey"
		  android:state_selected="true"/>
	<!-- 当未选中时，使用白色图像 -->
	<item android:drawable="@drawable/ic_tab_artists_white"/>
</selector>

<!-- 这是一个statelistdrawable，它是一个定义在XML文件当中的drawable对象，用来使用
	   不同的图像来表示同一个图形对象的不同状态。在本例中， 它应用到一个tab的图标里，
	   当tab的状态改变了，tab的图标会自动的在我们所定义的这两个图像之间切换-->

三个Activity.java

package com.zeph.android.tablayout.example;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class ArtistsActivity extends Activity{
	//注意到这个Activity没有使用布局文件。
	//仅仅是创建了一个TextView，并为它设置了文本内容。
	//用同样的方式建立另外两个Activity，记住要在Manifest清单里面注册这几个Activity
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		TextView textview = new TextView(this);
		textview.setText("ArtistsActivity");
		setContentView(textview);
	}
}

package com.zeph.android.tablayout.example;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class SongsActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		TextView textview = new TextView(this);
		textview.setText("SongsActivity");
		setContentView(textview);
	}
}

package com.zeph.android.tablayout.example;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class AlbumsActivity extends Activity{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		TextView textview = new TextView(this);
		textview.setText("AlbumsActivity");
		setContentView(textview);
	}
}

TabLayoutActivity.java

package com.zeph.android.tablayout.example;

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;

public class TabLayoutActivity extends TabActivity {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		// 获取一个Resource对象以获取drawable中的资源
		Resources res = getResources();
		// 获取TabActivity所需要的TabHost
		TabHost tabHost = getTabHost();
		// TabSpec是TabHost里的一个内部类，可以表示为一个tab，它里面有很多set方法，是用于设置tab的属性和动作
		TabHost.TabSpec tabSpec;
		Intent intent;
		// Intent对象用于Activity之间的跳转
		intent = new Intent().setClass(this, ArtistsActivity.class);
		/*
		 * public TabHost.TabSpec setContent (Intent intent)
		 * 指定一个加载activity的Intent对象作为选项卡（tab）跳转内容
		 * public TabHost.TabSpec setIndicator (CharSequence label, Drawable icon)
		 * 为选项卡（tab）指示符指定一个标签和图标
		 */
		tabSpec = tabHost.newTabSpec("Artists").setIndicator("Artists",
						res.getDrawable(R.drawable.ic_tab_artists)).setContent(intent);
		tabHost.addTab(tabSpec);//添加tab

		intent = new Intent().setClass(this, AlbumsActivity.class);
		tabSpec = tabHost.newTabSpec("Albums").setIndicator("Albums",
						res.getDrawable(R.drawable.ic_tab_artists)).setContent(intent);
		tabHost.addTab(tabSpec);

		intent = new Intent().setClass(this, SongsActivity.class);
		tabSpec = tabHost.newTabSpec("Songs").setIndicator("Songs",
						res.getDrawable(R.drawable.ic_tab_artists)).setContent(intent);
		tabHost.addTab(tabSpec);
		
		tabHost.setCurrentTab(2);
		
		//注意这里从头到尾都没有出现TabWidget的对象的引用，这是因为TabWidget是TabHost的子元素，
		//添加到TabHost里的tab会自动的添加到TabWidget中。

	}
}

在三个tab中，我使用的同一个icon。没有找到比Google官方好的，就用它的了。