仿微信页面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;

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