viewpager实现循环轮播

viewpager实现循环轮播

在网上看到很多利用viewpager实现轮播都是通过设置一个很大的值，让viewpager开始显示在这个数值区间的中间，但这种轮播个人感觉不是真正的轮播，因此自己实现了一个轮播的效果。大致思路是这样的，假如有5张图adcde是要轮播展示的，这时创建一个新的集合eadcdea，然后再让viewpager设置当前展示第一张图，也就是显示a。这样当往左滑时显示的是e，此时设置viewpager.setCurrentItem(5)，当右滑到e的时候在往右滑，此时设置viewpager.setCurrentItem(1)，这样就实现了轮播效果。

效果图如下所示：

话不多说上一下代码：

/**
 * viewpager切换页面时动画
 */
public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private ViewPaagerAdapter adapter;
    private ArrayList<View> viewlist=new ArrayList<>();//承载图片
    private ArrayList<TextView> tvList=new ArrayList<>();//底部圆点集合
    private int []imgList={R.drawable.img8,R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img5,
            R.drawable.img6,  R.drawable.img7,R.drawable.img8,R.drawable.img1};//图片数组
    boolean isStop=false;
    private LinearLayout line;//小圆圈父视图
    private ScheduledThreadPoolExecutor executor;

    private int currentPage;
    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case 1:
                    viewPager.setCurrentItem(msg.arg1);
                    break;

                default:
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        viewPager= (ViewPager) findViewById(mybanner_viewpager);
        line= (LinearLayout) findViewById(R.id.line);
        setView();//设置轮播显示的底图
        adapter=new ViewPaagerAdapter(this,viewlist);
        viewPager.setAdapter(adapter);
        viewPager.setCurrentItem(1);
        viewPager.setOffscreenPageLimit(10);//加这个是为了防止第一张往左滑动会出现闪烁


        startService();//启动轮播

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(final int position, float positionOffset, int positionOffsetPixels) {
                Log.i("tag","位置"+position+"positionOffset"+positionOffset+"positionOffsetPixels"+positionOffsetPixels);
                Log.i("tag","weizhi"+viewPager.getCurrentItem());
                if (position==imgList.length-1) {
                    viewPager.setCurrentItem(1,false);

                }else if(viewPager.getCurrentItem()==0&& positionOffsetPixels==0) {
                    viewPager.setCurrentItem(imgList.length-2, false);

                }
                currentPage=viewPager.getCurrentItem();
            }

            @Override
            public void onPageSelected(final int position) {
                Log.i("tag","位置wwwww"+position);
                setEnbale();
                if (position==imgList.length-1) {
                    tvList.get(0).setEnabled(true);
                }
                else if (position==0) {
                    tvList.get(imgList.length-3).setEnabled(true);
                }
                else{
                    tvList.get(position-1).setEnabled(true);

                }


            }

            @Override
            public void onPageScrollStateChanged(int state) {


            }
        });


    }


    public void setView() {
        LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(15,15);
        params.leftMargin=10;
        params.rightMargin=10;
        for (int i = 0; i < imgList.length; i++) {
            View view= LayoutInflater.from(this).inflate(R.layout.layout,null,false);

            ImageView img= (ImageView) view.findViewById(R.id.img);
            img.setBackgroundResource(imgList[i]);
            TextView textView= (TextView) view.findViewById(R.id.tv);
            textView.setText(i+"");
            viewlist.add(view);
        }
        for (int i = 0; i < imgList.length-2; i++) {
            TextView view=new TextView(this);
            view.setBackgroundResource(R.drawable.item);


            view.setLayoutParams(params);
            view.setEnabled(false);

            line.addView(view);
            tvList.add(view);

        }
        tvList.get(0).setEnabled(true);

    }

    public void setEnbale(){
        for (TextView tvcycle: tvList) {
            tvcycle.setEnabled(false);
        }
    }

    /**
     * 启动线程池开启循环任务
     */
    public void startService(){
        executor=new ScheduledThreadPoolExecutor(1);
        executor.scheduleWithFixedDelay(runnable,1,2, TimeUnit.SECONDS);

    }

    /**
     * 停止任务
     */
    public void stopService(){
        executor.shutdown();
    }

    Runnable runnable=new Runnable() {
        @Override
        public void run() {

            currentPage=currentPage+1%10;
            Message message= Message.obtain();
            message.what=1;
            message.arg1=currentPage;
            handler.sendMessage(message);



        }
    };

    @Override
    protected void onDestroy() {
        super.onDestroy();
        stopService();

    }
}

实现轮播的重点在这

 if (position==imgList.length-1) {
                    viewPager.setCurrentItem(1,false);

                }else if(viewPager.getCurrentItem()==0&& positionOffsetPixels==0) {
                    viewPager.setCurrentItem(imgList.length-2, false);

                }

这里解释一下onPageScrolled里三个参数的含义，第一个position，这个参数要特别注意一下。当用手指滑动时，如果手指按在页面上不动，position和当前页面index是一致的；如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，只有翻页成功的情况下最后一次调用才会变为目标页面；如果手指向右拖动（相应页面向左翻动），这时候position大部分时间和目标页面是一致的，只有翻页不成功的情况下最后一次调用才会变为原页面。
当直接设置setCurrentItem翻页时，如果是相邻的情况（比如现在是第二个页面，跳到第一或者第三个页面），如果页面向右翻动，大部分时间是和当前页面是一致的，只有最后才变成目标页面；如果向左翻动，position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。
如果不是相邻的情况，比如我从第一个页面跳到第三个页面，position先是0，然后逐步变成1，然后逐步变成2；我从第三个页面跳到第一个页面，position先是1，然后逐步变成0，并没有出现为2的情况。
positionOffset是当前页面滑动比例，如果页面向右翻动，这个值不断变大，最后在趋近1的情况后突变为0。如果页面向左翻动，这个值不断变小，最后变为0。positionOffsetPixels是当前页面滑动像素，变化情况和positionOffset一致。
这里采用线程池开启了一个循环任务，线程池的好处不说了，好了到此为止大概实现了viewpager的轮播了