ViewPager实现可控制切屏时间的可点击轮播演示

前言

最近写了一个基于ViewPager的图片轮播演示的demo，除去切屏监听外，还添加了OnTouch事件，切换图片过程的时间也可以设置，为以后再用到切屏时能够方便的控制，故记录下来供自己学习使用，中间主要是参考了Android之——史上最简单图片轮播广告效果实现以及 android图片轮播效果，开源框架RollViewPager的简单使用的博文，在此表示感谢。

自定义view LoopPicture 中的关键代码

• 图片轮播实际是使用到了定时任务，所以需要设置一个定时器，来切换图片，主要代码如下：

private final Runnable task = new Runnable() {
        @Override
        public void run() {
            try {// 自定义图片切换速度
                Field field = ViewPager.class.getDeclaredField("mScroller");
                field.setAccessible(true);
                FixedSpeedScroller scroller = new FixedSpeedScroller(
                        getContext(), new DecelerateInterpolator());
                field.set(viewPager, scroller);
                scroller.setmDuration(250);
            } catch (Exception e) {
                e.printStackTrace();
            }
            if (isAutoPlay) {
                currentItem = currentItem % (imageLength + 1) + 1;
                if (currentItem == 1) {
                    viewPager.setCurrentItem(currentItem, false);
                    handler.post(task);
                } else {
                    viewPager.setCurrentItem(currentItem);
                    handler.postDelayed(task, 3500);
                }
            } else {
                handler.postDelayed(task, 2000);
            }
        }
    };

上述代码中 ，建立了一个定时任务，在正常轮播过程中，每3.5秒切换一张图片，当暂停轮播的时候，每隔2秒去判断一下是否恢复到轮播，代码中FixedSpeedScroller 是一个设定切换图片时间的类，可用于动态的配置轮播过程中，切换图片的速度。代码如下：

public class FixedSpeedScroller extends Scroller {
        private int mDuration = 1500;

        public FixedSpeedScroller(Context context) {
            super(context);
        }

        public FixedSpeedScroller(Context context, Interpolator interpolator) {
            super(context, interpolator);
        }

        @Override
        public void startScroll(int startX, int startY, int dx, int dy, int duration) {
            super.startScroll(startX, startY, dx, dy, mDuration);
        }

        @Override
        public void startScroll(int startX, int startY, int dx, int dy) {
            super.startScroll(startX, startY, dx, dy, mDuration);
        }

        public void setmDuration(int time) {
            mDuration = time;
        }

        public int getmDuration() {
            return mDuration;
        }
    }

需要注意的是上述FixedSpeedScroller的构造函数中的包含两个参数的构造函数，
public FixedSpeedScroller(Context context, Interpolator interpolator) {
super(context, interpolator);
}
其中的Interpolator 被用来修饰动画效果，定义动画的变化率，可以使存在的动画效果accelerated(加速)，decelerated(减速),repeated(重复),bounced(弹跳)等。本轮播演示的需求是切换速度由快变慢，切换时间时250毫秒，故设置的Interpolator为decelerated（decelerated = new DecelerateInterpolator()）。

本自定义View中的点击事件，首先轮播过程中会包含一个图片切换的监听，代码如下：

class LoopPicturesListener implements OnPageChangeListener {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {
            switch (state){
                case 1:
                    setAutoPlyTrue();
                    break;
                case 2:
                    setAutoPlyTrue();
                    break;
                case 0:
                    if (viewPager.getCurrentItem() == 0) {
                        viewPager.setCurrentItem(imageLength, false);
                    } else if (viewPager.getCurrentItem() == imageLength + 1) {
                        viewPager.setCurrentItem(1, false);
                    }
                    currentItem = viewPager.getCurrentItem();
                    setAutoPlyTrue();
                    break;
            }
        }
    }

ViewPage使用时，最关键的代码就是setOnPageChangeListener，传入一ViewPager.SimpleOnPageChangeListener对象。ViewPager.SimpleOnPageChangeListener是个接口，有三个方法，下面做介绍。
注：ViewPager有两个操作，一个是用手指滑动翻页，一个是直接setCurrentItem（一般用于点击上面的tab直接setCurrentItem）。下面的方法介绍也会针对这两种情况分别介绍。
最后还会讨论这三个方法相对执行顺序的问题。
1.onPageSelected(int position)：这个方法有一个参数position，代表哪个页面被选中。当用手指滑动翻页的时候，如果翻动成功了（滑动的距离够长），手指抬起来就会立即执行这个方法，position就是当前滑动到的页面。如果直接setCurrentItem翻页，那position就和setCurrentItem的参数一致，这种情况在onPageScrolled执行方法前就会立即执行。
2.onPageScrolled(int position,float positionOffset, int positionOffsetPixels)：这个方法会在屏幕滚动过程中不断被调用。
有三个参数，第一个position，这个参数要特别注意一下。当用手指滑动时，如果手指按在页面上不动，position和当前页面index是一致的；如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，只有翻页成功的情况下最后一次调用才会变为目标页面；如果手指向右拖动（相应页面向左翻动），这时候position大部分时间和目标页面是一致的，只有翻页不成功的情况下最后一次调用才会变为原页面。
当直接设置setCurrentItem翻页时，如果是相邻的情况（比如现在是第二个页面，跳到第一或者第三个页面），如果页面向右翻动，大部分时间是和当前页面是一致的，只有最后才变成目标页面；如果向左翻动，position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。
如果不是相邻的情况，比如我从第一个页面跳到第三个页面，position先是0，然后逐步变成1，然后逐步变成2；我从第三个页面跳到第一个页面，position先是1，然后逐步变成0，并没有出现为2的情况。
positionOffset是当前页面滑动比例，如果页面向右翻动，这个值不断变大，最后在趋近1的情况后突变为0。如果页面向左翻动，这个值不断变小，最后变为0。
positionOffsetPixels是当前页面滑动像素，变化情况和positionOffset一致。
3.onPageScrollStateChanged(int state)：这个方法在手指操作屏幕的时候发生变化。有三个值：0（END）,1(PRESS) , 2(UP) 。
当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，手指抬起时，如果发生了滑动（即使很小），这个值会变为2，然后最后变为0 。总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生，这个时候只会调用这个方法两次，state值分别是1,0 。
当setCurrentItem翻页时，会执行这个方法两次，state值分别为2 , 0 。
三个方法的执行顺序为：用手指拖动翻页时，最先执行一遍onPageScrollStateChanged（1），然后不断执行onPageScrolled，放手指的时候，直接立即执行一次onPageScrollStateChanged（2），然后立即执行一次onPageSelected，然后再不断执行onPageScrollStateChanged，最后执行一次onPageScrollStateChanged（0）。
其它的情况由这个可以推出来，不再赘述。

除去上述的监听事件外，还包括Ontouch事件（本需求中是根据onTouch事件来做一些额外处理的），代码如下：

class LoopPicturesTouchListener implements OnTouchListener{
          boolean isMove = false;
            float startX = 0;

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        isMove = false;
                        startX = event.getRawX();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        float deltaX = event.getRawX() - startX;
                        if (Math.abs(deltaX) > touchSlop) {
                            isMove = true;
                        }
                        dealViewpagerAnim(deltaX);
                        break;
                    case MotionEvent.ACTION_UP:
                        if (!isMove) {
                            v.performClick();
                            showDialListView();
                        } else {
                            resetViewpagerAnim();
                        }
                        break;
                    default:
                        break;
                }
                return false;
            }
        }
    }

这里的Ontouch事件不做过多赘述，只是为了后面能方便找到代码解决问题。

最后就是准备数据，和启动轮播了，代码如下：

int[] imagesRes = {R.drawable.telephone,R.drawable.deer,R.drawable.wechat, R.drawable.step, R.drawable.grade,R.drawable.more};
int width = getWindowManager().getDefaultDisplay().getWidth();
loopPicture.setScreenWidth(width);
loopPicture.setImageRes(imagesRes);                  

整个的自定义View代码如下：

/**
 * Created by liaozeyu
 * on 2017/12/8.
 */

public class LoopPictureActivity extends BaseActivity<ILoopPictureActivityView, ILookPicturePresenter> {
    private LoopPicture loopPicture;
    private static String TAG = LoopPictureActivity.class.getCanonicalName();
    private BatteryBroadCastReceiver mReceiver;
    private static final String LOOPPICTURE_ACTION ="com.xtc.dial.action.looppicture.battery.status";
    private Handler handler;
    private Runnable runnable;

    @NonNull
    @Override
    public ILookPicturePresenter createPresenter() {
        return new ILookPicturePresenter(this);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_loop_main);
        loopPicture = (LoopPicture)this.findViewById(R.id.loopPicture);
        initData();
        registerBatteryBroadcast();

    }
    @Override
    protected void onDestroy() {
        super.onDestroy();
        releaseSourece();
    }

    private void releaseSourece(){
        if(null != mReceiver){
            unregisterReceiver(mReceiver);
        }

        if(handler != null && runnable != null){
            LogUtil.d("CANCLE startLoopAfterScreenOffTime");
            handler.removeCallbacks(runnable);
            handler = null;
            runnable = null;
        }
        //removeScreenListener(this,screenListener);
        screenStayClear();
    }

    @Override
    protected void onResume() {
        super.onResume();

    }

    @Override
    public void initData() {
        super.initData();
        screenStayUp();
        PopWindowManager.getInstance(this).hideWindowUnlockLayout();
        int[] imagesRes = {R.drawable.telephone,R.drawable.deer,R.drawable.wechat, R.drawable.step, R.drawable.grade,
                R.drawable.more};
        int width = getWindowManager().getDefaultDisplay().getWidth();
        loopPicture.setScreenWidth(width);
        loopPicture.setImageRes(imagesRes);
        //setScreenListener(this,screenListener);
    }

    private void registerBatteryBroadcast(){
        IntentFilter filter = new IntentFilter();
        filter.addAction(LOOPPICTURE_ACTION);
        mReceiver = new BatteryBroadCastReceiver();
        this.registerReceiver(mReceiver, filter);
    }

    public class BatteryBroadCastReceiver extends BroadcastReceiver {
        @Override
        public void onReceive(Context context, Intent intent) {
            String action = intent.getAction();
            LogUtil.d("come to reciver action = " + action );
            dealWithLoopPictureSwitch(intent);
        }
    }

    public void dealWithLoopPictureSwitch(Intent intent){
        boolean isPluggedIn = intent.getBooleanExtra("isPluggedIn",false);
        LogUtil.d("come to reciver isPluggedIn =" + isPluggedIn);
        if(!isPluggedIn){
            finish();
        }
    }

    /**
     * 屏幕保持常亮
     */
    public void screenStayUp() {
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
    }

    public void screenStayClear() {
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
    }

   /* private ScreenReceiver.IScreenListener screenListener = new ScreenReceiver.IScreenListener() {
        @Override
        public void screenOn() {
            LogUtil.d("screenListener screenOn");
            startLoopAfterScreenOffTime();
        }

        @Override
        public void screenOff() {
            LogUtil.d("screenListener screenOff");
        }
    };

   public void removeScreenListener(Context context,ScreenReceiver.IScreenListener screenListener) {
        ScreenReceiver.getInstance(context).removeScreenListener(screenListener);
    }

    public void setScreenListener(Context context,ScreenReceiver.IScreenListener screenListener) {
        ScreenReceiver.getInstance(context).setScreenListener(screenListener);
    }

    private void startLoopAfterScreenOffTime(){
        handler = new Handler();
        runnable = new Runnable() {
            @Override
            public void run() {
                LogUtil.d("startLoopAfterScreenOffTime");
                PopWindowManager.getInstance(LoopPictureActivity.this).hideWindowUnlockLayout();
            }
        };
        handler.postDelayed(runnable, 1000);//10秒后执行Runnable中的run方法
    }*/
}