安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

该TabLayout的功用，简单的说，就是当用户在该TabLayout的选项卡子item中选择触摸时候，文字和下方的指示器横条滑动指示。android.support.design.widget.TabLayout在Android扩展（extras）支持（support）包design中，但是design又依赖另外一个support v7包中的appcompat库，因此需要事先导入，在导入过程中，如果某些res目录下的value值过高比如value-23（Android SDK 23）但不巧发生错误如提示说找不到某某值，可以整个删除掉。 （1）导入support v7扩展包中的（\android-sdk-windows\extras\android\support\v7\appcompat）。该库位置在如图所示位置：

   找到后将其作为一个Android 库导入Eclipse。导入成功后如图所示：

（2）导入Android扩展包中的design库(\android-sdk-windows\extras\android\support\design)，该库位置位于Android SDK包中如图所示位置：

导入Eclipse，将其作为Android的库。导入成功后如图所示：

需要在design项目中添加对android-support-v7-appcompat库的引用，如图所示：

代码如下:

 package com.lixu.tablayout_test;

 import android.app.Activity;
 import android.content.Context;
 import android.os.Bundle;
 import android.support.design.widget.TabLayout;
 import android.support.v4.view.PagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.TextView;

 public class MainActivity extends Activity {
     private int[] color = { 0xffB71C1C, 0xfff44336, 0xffEEFF41, 0xff00C853, 0xff4CAF50, 0xff03A9F4, 0xff6200EA };
     private int count = color.length;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         TabLayout tl = (TabLayout) findViewById(R.id.tablayout);

         ViewPager vp = (ViewPager) findViewById(R.id.viewpager);
         vp.setAdapter(new MyAdapter(this));
         // 设置TabLayout和ViewPager可以双向、交互联动。
         tl.setupWithViewPager(vp);
         // 设置滚动模式
         tl.setTabMode(TabLayout.MODE_SCROLLABLE);

     }

     private class MyAdapter extends PagerAdapter {
         Context context;

         public MyAdapter(Context context) {
             this.context = context;
         }

         @Override
         public int getCount() {

             return count;
         }

         @Override
         public CharSequence getPageTitle(int position) {
             return "选项卡" + position;
         }

         @Override
         public boolean isViewFromObject(View arg0, Object arg1) {
             return arg0 == arg1;
         }

         @Override
         public void destroyItem(ViewGroup container, int position, Object object) {
             container.removeView((View) object);
         }

         @Override
         public Object instantiateItem(ViewGroup container, int position) {
             TextView tv = new TextView(context);
             tv.setText("页面" + position);
             tv.setTextSize(30.0f);
             // 设置居中
             tv.setGravity(Gravity.CENTER);
             // 设置每一页的颜色
             tv.setBackgroundColor(color[position]);
             container.addView(tv);
             return tv;

         }

     }

 }

xml文件：

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/LinearLayout1"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >

     <!-- xmlns:app="http://schemas.android.com/apk/res-auto" 要加这个否则xml文件要报错！ -->

     <android.support.design.widget.TabLayout
         android:id="@+id/tablayout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:tabIndicatorColor="#f44336"
         app:tabSelectedTextColor="#00C853"
         app:tabTextColor="#03A9F4" />

     <android.support.v4.view.ViewPager
         android:id="@+id/viewpager"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

 </LinearLayout>

运行效果图：