经典效果组件篇4：安卓的tab标签控件

本系列博客持续更新，由浅入深，欢迎关注和收藏，也欢迎指正与评论

标签控件是简洁应用里常用的，但是在网站上讲解的很少看到，而且乱起八糟的，太多的东西搀和在一起。所以自己写了一个简单纯净的Demo。

话不多说，先上效果图 

点击想要打开的标签页，即会切换到对应的标签页，并显示标签内的内容，内容是通过layout和Activity来布局和设定的，开放度和自由度比较高

为了保证最简单Demo的原则，所以没有添加左右滑动手势。后面会介绍。

使用简介：

可以这样理解，Tabs标签控件分为两个，一个是总体的标签容器，用来盛放一页页标签，这个容器叫TabHost，而那一页页的标签，叫TabSpec，而TabSpec里面的内容可以通过指定他的布局文件来指定。然后我们把这一页页的标签放进TabHost中就是一个完整的标签控件了

实现步骤：

1 定义三个Activity，并分别为他们定义三个Layout，很简单，直接上代码。

第一个Activity：IndexActivity，其实啥也没有，只是指定了这个Activity的布局文件

public class IndexActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_index);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.index, menu);return true;}}

对应的Layout：activity_index.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"><TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="这是第一个标签，可以随便写写东西" /></RelativeLayout>

后面依样再写俩就行

2 修改主Activity

将主Activity继承的类换成TabActivity，将TabHost声明为成员变量，并将activity作为TabSpec放入host中集中显示，具体代码如下

public class MainActivity extends TabActivity {public TabHost tabHost;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//获取对象          tabHost = getTabHost();                             tabHost.addTab(tabHost.newTabSpec("index")                  .setIndicator("实时新闻")                  .setContent(new Intent(this, IndexActivity.class)));          tabHost.addTab(tabHost.newTabSpec("center")                  .setIndicator("我的空间")                  .setContent(new Intent(this, MiddleActivity.class)));         tabHost.addTab(tabHost.newTabSpec("self")                  .setIndicator("设置")                  .setContent(new Intent(this, LastActivity.class)));                           //指定的当前的tab          //通过索引指定  索引从0开始          //即一开始要显示的是哪一页        tabHost.setCurrentTab(0); //从零开始  }@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}}

注意的是，本来代码中有设置layout的语句，一定要去掉，这里不需要指定布局了。否则会报错。

这样，标签的效果就可以实现了，只是没有添加手势识别滑动，会在下一篇单独做出来

下面的是我自己的Demo工程

Demo工程