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官方好的，就用它的了。