安卓官方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>

 

运行效果图：