TabLayout布局使用范例详解

 

在网上看了不少关于TabLayout布局方面的文章，但感觉都写的不够全面，所以今天写个这样的范例，基本是根据Android Doc上面来的。附上源码包，点击这里下载。

1.首先创建一个工程：HelloTabLayout

2.新建几个Activity用于每个选项卡激活后的显示内容（注意我们这里是建立三个选项卡所以需要三个Activity，并且要注册到AndroidManifest.xml文件中）

 

public class ArtistsOneActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("OneOneOneOneOneOne"); setContentView(textview); } }

3.创建图片资源，在res/drawable/目录中添加图片，我这里省的麻烦就是用了一张图片，并且创建ic_tab_artists_one.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>

4.编写布局文件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"> <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"> <!-- 这里注释掉的内容为可以自定义每个选项卡中显示的内容，需要注意的是在启动Activity中跳转时setContent(intent);需要改为setContent(R.id.layout1); --> <!-- <LinearLayout android:id="@+id/layout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="hello tabLayout1" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="button1" /> </LinearLayout> <LinearLayout android:id="@+id/layout2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/textview2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="hello tabLayout2" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="button2" /> </LinearLayout> <LinearLayout android:id="@+id/layout3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/textview3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="hello tabLayout3" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="button3" /> </LinearLayout> --> </FrameLayout> </LinearLayout> </TabHost>

5.下面编写HelloTabWidget类

public class HelloTabWidget extends TabActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Resources res = getResources(); TabHost tabHost = getTabHost(); TabHost.TabSpec spec; Intent intent; // 创建一个Intent对象 intent = new Intent().setClass(this, ArtistsOneActivity.class); // 初始化一个TabSpec并将其添加到TabHost spec = tabHost.newTabSpec("artistsone").setIndicator("ArtistsOne", res.getDrawable(R.drawable.ic_tab_artists_one)).setContent(intent); //spec = tabHost.newTabSpec("artistsone").setIndicator("ArtistsOne", //res.getDrawable(R.drawable.ic_tab_artists_one)).setContent(R.id.layout1); tabHost.addTab(spec); intent = new Intent().setClass(this, ArtistsTwoActivity.class); spec = tabHost.newTabSpec("artiststwo").setIndicator("ArtistsTwo", res.getDrawable(R.drawable.ic_tab_artists_two)).setContent(intent); //spec = tabHost.newTabSpec("artiststwo").setIndicator("ArtistsTwo", //res.getDrawable(R.drawable.ic_tab_artists_two)).setContent(R.id.layout2); tabHost.addTab(spec); intent = new Intent().setClass(this, ArtistsThreeActivity.class); spec = tabHost.newTabSpec("artiststhree").setIndicator("ArtistsThree", res.getDrawable(R.drawable.ic_tab_artists_three)).setContent(intent); //spec = tabHost.newTabSpec("artiststhree").setIndicator("ArtistsThree", //res.getDrawable(R.drawable.ic_tab_artists_three)).setContent(R.id.layout3); tabHost.addTab(spec); //这里指定默认的选择，从"0"开始计算，"0"就是第一个，我这里选择"1"则是第二个 tabHost.setCurrentTab(0); //或者使用下面的这种方式选择，使用"artiststwo"跟上面的方式选择"1"是相同的效果 //tabHost.setCurrentTabByTag("artiststhree"); } }

6.需要注意的是要把HelloTabWidget的Activity和另外用于每个选项卡显示的Activity注册到AndroidManifest.xml文件中

<activity android:name="ArtistsOneActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar"> </activity>

 7.可以运行工程了，得到以后的显示效果，附上代码包，点击这里下载。