在网上看了不少关于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.可以运行工程了,得到以后的显示效果,附上代码包,点击这里下载。