仿微信页面Fragment之间的切换

主要实现微信页面页面横条跟随页面滑动，和字体颜色跟随进行变色。

第一步
建立滑动的Fragment页面 继承android.support.v4.app.Fragmentzhg这个包
千万不要继承app那个包不然会出错的。

然后实现onCreateView方法，绑定布局，这个Fragment页面就完事了。
因为是两个或者多个页面进行滑动，所以多创建几个Fragment页面。

第二步
在xml布局文件里写上这个，这页布局不是Fragment的布局，是下面新建的类的布局（这个是主布局）。

 <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />

第三步
再新建一个布局。代码如下。
大家问这个什么布局是什么，看下面的图片

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="42dp"
    android:orientation="vertical"
    >
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="40dp"
       android:orientation="horizontal"
       >
       <LinearLayout
           android:id="@+id/qwe"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:gravity="center"
           >
           <TextView
               android:id="@+id/a"
               android:textColor="#da1515"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="第一页"
               />
       </LinearLayout>
       <LinearLayout
           android:id="@+id/ewq"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:gravity="center"
           >
           <TextView
               android:id="@+id/aaa"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="第二页"
               />
       </LinearLayout>

   </LinearLayout>
    <ImageView
        android:id="@+id/view"
        android:layout_width="200dp"
        android:layout_height="3dp"
        android:background="@drawable/icoico"/>
</LinearLayout>

因为我只滑动了两页，所以就写了两个，怎么用呢，

我用的
把这个代码加到第二部的布局上面

<include layout="@layout/item_layout" />

第四步

新建一个类继承FragmentActivity ，不要问这个FragmentActivity是什么，它只是activity的一个子类，
实现onCreate方法，绑定布局第二步的布局；

第五步
重要的来了
写一个方法，把刚才创建的滑动的Fragment页面添加到ViewPager里面

 /**
     * 绑定Fragment页
     * 此方法 将Fragment添加到容器里
     * 将容器里的Fragment页添加到ViewPager里  mviewpaher.setAdapter(madapter);
     * FragmentPagerAdapter(getSupportFragmentManager())  括号里写这个方法    这个类需要继承 FragmentActivity
     * getItem() ；  容器的下标 mDate.get(position)
     * getCount()；  容器的长度 mDate.size()
     */
    private void initview() {
        mviewpaher = (ViewPager) findViewById(R.id.pager);
        a = (TextView) findViewById(R.id.a);
        aaa = (TextView) findViewById(R.id.aaa);
        mDate = new ArrayList<>();
        fremnt_1 fragment_1 = new fremnt_1();
        fremnt_2 fragment_2 = new fremnt_2();
        mDate.add(fragment_1);
        mDate.add(fragment_2);
        madapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mDate.get(position);
            }

            @Override
            public int getCount() {
                return mDate.size();
            }
        };
        mviewpaher.setAdapter(madapter);
        /**
         * 这是上面的横条 跟随ViewPager页面
         */
        mviewpaher.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) views.getLayoutParams();
                if (mCurrent == 0 && position == 0) { //0--1
                    lp.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrent * mScreen1_3);
                } else if (mCurrent == 1 && position == 0)//1--0
                {
                    lp.leftMargin = (int) (mCurrent * mScreen1_3 + (positionOffset - 1) * mScreen1_3);
                } else if (mCurrent == 1 && position == 1)//1--2
                {
                    lp.leftMargin = (int) (mCurrent * mScreen1_3 + positionOffset * mScreen1_3);
                } else if (mCurrent == 2 && position == 1)//2-1
                {
                    lp.leftMargin = (int) (mCurrent * mScreen1_3 + (positionOffset - 1) * mScreen1_3);
                }
                views.setLayoutParams(lp);
            }

            /**
             * 当前ViewPager坐标 position
             * ViewPager坐标从0开始
             * 坐标改变字体颜色就跟随改变
             */
            @Override
            public void onPageSelected(int position) {
                /**
                 * 调用此方法 颜色默认  resrtestview()；
                 */
                resrtestview();
                switch (position) {
                    case 0:
                        a.setTextColor(Color.GREEN);
                        break;
                    case 1:
                        aaa.setTextColor(Color.GREEN);
                        break;
                }
                /**
                 * 将当前ViewPager的坐标position赋值给mCurrent
                 */
                mCurrent = position;
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

这个方法绑定控件，将控件设置为屏幕的二分之一，因为我上面放置了两个Fragment页面，所以我这个除以2，得到的二分之一。然后将得到的宽度赋值给控件

  /**
     * 控件绑定
     * 这个方法是将控件设置屏幕宽度的三分之一
     */
    private void inTabLine() {
        views = (ImageView) findViewById(R.id.view);
        //得到屏幕的宽度对象
        DisplayMetrics outMetrics = new DisplayMetrics();
        Display display = getWindow().getWindowManager().getDefaultDisplay();
        display.getMetrics(outMetrics);
        //得到屏幕的宽度的三分之一
        mScreen1_3 = outMetrics.widthPixels / 2;
        //设置控件的宽度 将获取到宽度的三分之一赋给控件
        ViewGroup.LayoutParams lp = views.getLayoutParams();
        lp.width = mScreen1_3;
        views.setLayoutParams(lp);
    }

第六步
在oonCreate方法里调用

/**
         * inTabLine()调用此方法
         * initview() 调用此方法
         */
        inTabLine();
        initview();

还有个重要的东西别忘记

  /**
     * 设置颜色默认的
     */
    private void resrtestview() {
        a.setTextColor(Color.BLACK);
        aaa.setTextColor(Color.BLACK);
    }

这个实在oonCreate方法里调用绑定控件监听
点击事件，目的实现点击第一页目标滑动到第一页

 /**
         * 绑定控件
         */
        qwe = (LinearLayout) findViewById(R.id.qwe);
        ewq = (LinearLayout) findViewById(R.id.ewq);
        /**
         * 监听方法
         * mviewpaher.setCurrentItem(0);这是ViewPager监听   ViewPager坐标是从零开始
         * 表示跳转到第一页
         */
        qwe.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mviewpaher.setCurrentItem(0);
            }
        });
        ewq.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mviewpaher.setCurrentItem(1);
            }
        });

我这个是初始化的。有些东西，为了方便直接用aaa代替了，请不要学我。

 /**
     * ViewPager的对象mviewpaher
     */
    private ViewPager mviewpaher;
    /**
     * ViewPager滑动的容器对象madapter
     */
    private FragmentPagerAdapter madapter;
    /**
     * ViewPager的容器的对象mDate
     */
    private List<Fragment> mDate;
    /**
     * 导航栏的字体
     */
    private TextView a, aaa;
    /**
     * 横条
     */
    private ImageView views;
    /**
     * 屏幕的宽度
     */
    private int mScreen1_3;
    /**
     * ViewPager的坐标
     */
    private int mCurrent;
    /**
     * LinearLayout 初始化布局  直接初始化的布局，下面有监听方法
     * 为了有时候点击不上字体，初始化的布局，这样好点击
     */

    private LinearLayout qwe, ewq;

好了，以上代码汇报完毕，请伙伴多多支持！！！