Fragment+ViewPager实习顶部导航栏效果

闲话不多说，先上效果图

可以看到我们要实现的效果有两个：

1.滑动ViewPager的时候，顶部的黄色横条跟着一起滑动。当滑动完毕的时候，ViewPager对应的标题的颜色发生改变。

2.当点击一个标题的时候，ViewPager显示对应的Fragment，然后颜色也跟着改变，横条位置也跟着改变。

横条跟着ViewPager滑动的原理是动态地设置它的leftMargin。这个设置是在ViewPager的OnPagerChangedListener的onPageScrolled方法中实现的。关键代码如下

RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) tabLine.getLayoutParams();
params.leftMargin = (int) ((positionOffset+ position )* lineWidth);
tabLine.setLayoutParams(params);
改变颜色其实是先全部回复初始的颜色，然后再根据相应的位置改变颜色。当点击标题的时候，通过ViewPager的setCurrentItem(position)来改变ViewPager。注意的是position是从0开始的。
我们来看看具体的实现代码

/**
     * 初始化FragmentPagerAdapter
     */
    private void initAdapter() {
        fragmentList = new ArrayList<Fragment>();

        fragment1 = new PagerFragment1();
        fragment2 = new PagerFragment2();
        fragment3 = new PagerFragment3();

        fragmentList.add(fragment1);
        fragmentList.add(fragment2);
        fragmentList.add(fragment3);

        mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {


                return fragmentList.get(position);
            }



            @Override
            public int getCount() {
                return fragmentList.size();
            }
        };
    }

    private void initView() {
        tab1Text = (TextView) findViewById(R.id.tab1);
        tab2Text = (TextView) findViewById(R.id.tab2);
        tab3Text = (TextView) findViewById(R.id.tab3);

        onClickListener = new TabOnClickListener();

        tab1Text.setOnClickListener(onClickListener);
        tab2Text.setOnClickListener(onClickListener);
        tab3Text.setOnClickListener(onClickListener);

        tabLine = findViewById(R.id.tab_line);


        //初始化ViewPager，并且设置ViewPager的监听器
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //因为这里只有三个Tab,所有横条的宽带应该是屏幕的1/3
                int lineWidth = getLineWidth(3);

                //横条随着ViewPager一起滑动
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) tabLine.getLayoutParams();
                params.leftMargin = (int) ((positionOffset+ position )* lineWidth);
                tabLine.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int position) {
                //当ViewPager滑动完毕，改变标题颜色
                changeTabColor(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }





    /**
     *  根据标题的个数获取横条应该设置的宽度
     * @param tabCount
     * @return
     */
    public int getLineWidth(int tabCount){
        DisplayMetrics metric = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metric);
        int lineWidth = metric.widthPixels/tabCount;
        return lineWidth;
    }


    /**
     *
     * 根据ViewPager的位置改变对应标题的
     * @param position
     */
    private void changeTabColor(int position){
        resetTabColor();

        if(0 == position) {
            tab1Text.setTextColor(Color.parseColor("#ffec00"));
        }

        if(1 == position) {
            tab2Text.setTextColor(Color.parseColor("#ffec00"));
        }

        if(2 == position) {
            tab3Text.setTextColor(Color.parseColor("#ffec00"));
        }
    }


    /**
     * 重置标题的颜色
     */
    private void resetTabColor(){
        tab1Text.setTextColor(Color.parseColor("#ffffff"));
        tab2Text.setTextColor(Color.parseColor("#ffffff"));
        tab3Text.setTextColor(Color.parseColor("#ffffff"));
    }


    /**
     * 标题点击事件的监听接口实现类
     */
    private class TabOnClickListener implements View.OnClickListener{

        @Override
        public void onClick(View v) {

            resetTabColor();
            switch (v.getId()){
                case R.id.tab1:
                    //设置当前的页面
                    mViewPager.setCurrentItem(0);
                    //改变相应的Tab的字体颜色
                    tab1Text.setTextColor(Color.parseColor("#ffec00"));
                    break;

                case R.id.tab2:
                    //设置当前的页面
                    mViewPager.setCurrentItem(1);
                    //改变相应的Tab的字体颜色
                    tab2Text.setTextColor(Color.parseColor("#ffec00"));
                    break;

                case R.id.tab3:
                    //设置当前的页面
                    mViewPager.setCurrentItem(2);
                    tab3Text.setTextColor(Color.parseColor("#ffec00"));
                    break;
            }
        }
    }
布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context="com.sanisy.study.MainActivity"
    android:orientation="vertical">



    <RelativeLayout
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        android:layout_height="64dp">

        <LinearLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="62dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tab1"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="62dp"
                android:gravity="center"
                android:textColor="#ffec00"
                android:text="页面1"/>

            <TextView
                android:id="@+id/tab2"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="62dp"
                android:textColor="#ffffff"
                android:gravity="center"
                android:text="页面2"/>

            <TextView
                android:id="@+id/tab3"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="62dp"
                android:textColor="#ffffff"
                android:gravity="center"
                android:text="页面3"/>

        </LinearLayout>

        <View
            android:id="@+id/tab_line"
            android:layout_width="122dp"
            android:layout_height="5dp"
            android:layout_below="@id/tab_layout"
            android:background="#ffec00"/>

    </RelativeLayout>


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

</LinearLayout>