viewpager+fragment学习笔记

有暇，总结一下viewpager+fragment的使用。

先来看看效果图：

有三个标题，三个fragment，滑动时标题的颜色会随着变化。

MainActivity.java

public class MainActivity extends FragmentActivity {

    private ViewPager vp;
    private Fragment f1, f2, f3;
    //把所有的Fragment装到一个List中
    private List<Fragment> fs;
    private FragmentPagerAdapter fpa;
    private TextView tv1, tv2, tv3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vp = (ViewPager) this.findViewById(R.id.vp1);

        initView();

        //一个适配器，里边存的都是Fragment
        fpa = new FragmentPagerAdapter(getSupportFragmentManager()) {

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

            @Override
            public Fragment getItem(int arg0) {
                return fs.get(arg0);
            }
        };

        vp.setAdapter(fpa);

        /**
         * 三个方法的执行顺序为：用手指拖动翻页时，最先执行一遍onPageScrollStateChanged（1），
         * 然后不断执行onPageScrolled，放手指的时候，直接立即执行一次onPageScrollStateChanged（2），
         * 然后立即执行一次onPageSelected，然后再不断执行onPageScrolled，
         * 最后执行一次onPageScrollStateChanged（0）。
         */
        vp.setOnPageChangeListener(new OnPageChangeListener() {

            /**
             * position代表哪个页面被选中
             */
            @Override
            public void onPageSelected(int position) {
                switch (position) {
                case 0:
                    changeTitleBackground(0);
                    break;
                case 1:
                    changeTitleBackground(1);
                    break;
                case 2:
                    changeTitleBackground(2);
                    break;
                default:
                    break;
                }
                Log.i("lenve", "onPageSelected"+position);
            }

            /**
             * 有三个参数，第一个position，这个参数要特别注意一下。当用手指滑动时，如果手指按在页面上不动，
             * position和当前页面index是一致的
             * 如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，
             * 只有翻页成功的情况下最后一次调用才会变为目标页面；如果手指向右拖动（相应页面向左翻动），
             * 这时候position大部分时间和目标页面是一致的，只有翻页不成功的情况下最后一次调用才会变为原页面。
             * 当直接设置setCurrentItem翻页时，如果是相邻的情况（比如现在是第二个页面，跳到第一或者第三个页面），
             * 如果页面向右翻动，大部分时间是和当前页面是一致的，只有最后才变成目标页面；如果向左翻动，position和目标页面是一致的。
             * 这和用手指拖动页面翻动是基本一致的。
             * 如果不是相邻的情况，比如我从第一个页面跳到第三个页面，position先是0，然后逐步变成1，
             * 然后逐步变成2；我从第三个页面跳到第一个页面， position先是1，然后逐步变成0，并没有出现为2的情况。
             * positionOffset是当前页面滑动比例，如果页面向右翻动，这个值不断变大，最后在趋近1的情况后突变为0。
             * 如果页面向左翻动，这个值不断变小，最后变为0。
             * positionOffsetPixels是当前页面滑动像素，变化情况和positionOffset一致。
             */
            // 在屏幕滚动过程中不断被调用
            @Override
            public void onPageScrolled(int position,float positionOffset, int positionOffsetPixels) {
                Log.i("lenve", "onPageScrolled"+position);
            }

            /**
             * onPageScrollStateChanged(int state)：这个方法在手指操作屏幕的时候发生变化。
             * 有三个值：0（END）,1(PRESS) , 2(UP) 。 当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1
             * 手指抬起时，如果发生了滑动（即使很小），这个值会变为2，然后最后变为0
             * 总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生，这个时候只会调用这个方法两次，state值分别是1,0 。
             * 当setCurrentItem翻页时，会执行这个方法两次，state值分别为2 , 0 。
             */
            @Override
            public void onPageScrollStateChanged(int state) {
                Log.i("lenve", "onPageScrollStateChanged"+state);
            }
        });
        //设置默认显示页
        vp.setCurrentItem(0);
    }

    private void initView() {

        tv1 = (TextView) this.findViewById(R.id.tv1);
        tv2 = (TextView) this.findViewById(R.id.tv2);
        tv3 = (TextView) this.findViewById(R.id.tv3);
        //设置tv1的默认颜色
        tv1.setTextColor(Color.GREEN);

        fs = new ArrayList<Fragment>();

        f1 = new Fragment1();
        f2 = new Fragment2();
        f3 = new Fragment3();
        fs.add(f1);
        fs.add(f2);
        fs.add(f3);
    }

    //滑动时修改标题颜色
    private void changeTitleBackground(int i) {
        switch (i) {
        case 0:
            tv1.setTextColor(Color.GREEN);
            tv2.setTextColor(Color.GRAY);
            tv3.setTextColor(Color.GRAY);
            break;
        case 1:
            tv1.setTextColor(Color.GRAY);
            tv2.setTextColor(Color.GREEN);
            tv3.setTextColor(Color.GRAY);
            break;
        case 2:
            tv1.setTextColor(Color.GRAY);
            tv2.setTextColor(Color.GRAY);
            tv3.setTextColor(Color.GREEN);
            break;
        default:
            break;
        }
    }
}

注释里边说的比较清楚了，再看看布局文件：

<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"
    android:orientation="vertical"
    tools:context="com.example.viewpagertest.MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:text="f1" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:text="f2" />

        <TextView
            android:id="@+id/tv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:text="f3" />
    </LinearLayout>

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

</LinearLayout>

另外，三个fragment都是普通的fragment，这里就不贴代码了。

本项目源码下载

版权声明：本文为博主原创文章，未经博主允许不得转载。若有错误地方，还望批评指正，不胜感激。