05、使用ViewPager实现APP引导页

487 阅读2分钟

1. ViewPager的setOffscreenPageLimit方法

viewPager.setOffscreenPageLimit(int limit);

设置预加载页面数量,默认不设置数量的情况下预加载下一页。设置0(小于0)和1是同样的效果(看源码)。

setOffscreenPageLimit.png

ViewPager有两个操作,一个是用手指滑动翻页,一个是直接setCurrentItem(一般用于点击上面的tab直接setCurrentItem)。

viewPager.setCurrentItem(mDotViews.size()/2);

setCurrentItem主要用来制定初始化的页面

2. ViewPager的addOnPageChangeListener方法

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            /**
             * 在屏幕滚动过程中不断被调用。
             * @param position  当用手指滑动时,如果手指按在页面上不动,position和当前页面index是一致的;
             *                  如果手指向左拖动(相应页面向右翻动),这时候position大部分时间和当前页面是一致的,
             *                  只有翻页成功的情况下最后一次调用才会变为目标页面;
             *                  如果手指向右拖动(相应页面向左翻动),这时候position大部分时间和目标页面是一致的,
             *                  只有翻页不成功的情况下最后一次调用才会变为原页面。
             * @param positionOffset    当前页面滑动比例,如果页面向右翻动,这个值不断变大,最后在趋近1的情况后突变为0。
             *                          如果页面向左翻动,这个值不断变小,最后变为0。
             * @param positionOffsetPixels  当前页面滑动像素,变化情况和positionOffset一致.
             */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
​
            }
​
            /**
             * 当用手指滑动翻页的时候,如果翻动成功了(滑动的距离够长),手指抬起来就会立即执行这个方法
             * 如果直接setCurrentItem翻页,那position就和setCurrentItem的参数一致,这种情况在onPageScrolled执行方法前就会立即执行。
             * @param position  代表哪个页面被选中
             */
            @Override
            public void onPageSelected(int position) {
​
            }
​
            /**
             * 在手指操作屏幕的时候调用。有三个值:0(END),1(PRESS) , 2(UP)
             * 当用手指滑动翻页时,手指按下去的时候会触发这个方法,state值为1,手指抬起时,如果发生了滑动,这个值会变为2,然后最后变为0。
             * 当setCurrentItem翻页时,会执行这个方法两次,state值分别为2,0。
             * @param state
             */
            @Override
            public void onPageScrollStateChanged(int state) {
​
            }
        });

三个方法的执行顺序为:用手指拖动翻页时,最先执行一遍onPageScrollStateChanged(1),然后不断执行onPageScrolled,放手指的时候,直接立即执行一次onPageScrollStateChanged(2),然后立即执行一次onPageSelected,然后再不断执行onPageScrollStateChanged,最后执行一次onPageScrollStateChanged(0)。

3. 案例实现

案例.png 初始化数据

private void initView() {
        mViews = new ArrayList<>();
        mDotViews = new ArrayList<>();
        viewPager = findViewById(R.id.view_pager);
        mDotViewGroup = findViewById(R.id.dot_layout);
        for (int i = 0; i < 5; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(R.mipmap.ic_launcher);
            mViews.add(imageView);//添加view
            addDotView();//添加点的view
        }
        mPagerAdapter = new MyPagerAdapter(mViews,this);
        viewPager.setAdapter(mPagerAdapter);
        viewPager.setOffscreenPageLimit(2);//设置预加载页面数量,默认不设置数量的情况下预加载下一页。设置0和1是同样的效果。
        viewPager.setCurrentItem(mDotViews.size()/2);   //设置初始化的页面
        setDotView(mDotViews.size()/2);     //设置初始时选中的点的view
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
​
            }
​
            @Override
            public void onPageSelected(int position) {
                setDotView(position);   //设置选中时点的view
            }
​
            @Override
            public void onPageScrollStateChanged(int state) {
​
            }
        });
    }

添加点的View,如果点太小可以设置LayoutParams(40,40);

private void addDotView() {
    ImageView dot = new ImageView(this);
    dot.setImageResource(R.drawable.ic_dot1);
    dot.setMaxWidth(200);//设置最大宽度
    dot.setMaxHeight(200);//设置最大高度
​
    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40,40);
    layoutParams.leftMargin = 20;
    dot.setLayoutParams(layoutParams);
    dot.setEnabled(false);
​
    mDotViewGroup.addView(dot);
    mDotViews.add(dot);
}

设置选中时点的view

private void setDotView(int position) {
    for (int index = 0; index < mDotViews.size(); index++) {
        mDotViews.get(index).setImageResource(index == position ? R.drawable.ic_dot2 : R.drawable.ic_dot1);
    }
}

案例代码: gitee.com/maojiu0825/…