【实训】自动横向循环滑动图片控件的实现

嗯，应该在看很多软件的时候，能看到有个推荐栏一直在滚动推荐内容是吧，可能在刚刚看到的时候，觉得这个肯定很好做。但是我实际做的时候发现了很多的问题，比如在滚动到最后一个时如果直接跳到第一个未免太过突兀了，也没有动画效果，强行加上动画效果的结果就是从最后一直向前，滚到第一个，这个可不是我们需要的效果。我们需要的效果是这种（不会做gif，讲究着看吧）

循环滑动

其实原理也很简单，网上其他教程也写的很详细，以下为解释

假如我们要显示12345，共5张图

如果我们现在只考虑向右滑动，显示顺序如下

               1   2   3   4   5   1

                            ↑                                           ↓

                              ————————————

就是在最后一张5的后面加上1，当向右滑倒最后5时，继续向右，滑到1（其实不是真正的1），然后立即跳转到第一个1（真正的1），然后就可以继续向右到2。。。这样向右滑动就很连贯，不突兀

如果我们现在要加上向左滑动，显示顺序变成这样：

                         ————————————

                        ↑                                          ↓

             5   1   2   3   4   5   1

                                 ↑                                           ↓

                                  ————————————

和向右同样的原理，在第一张1前加上5，当滑到1时，继续向左滑，滑到5（不是真正的5），然后立即跳转到最后的5（真正的5）。

这样在序列前后分别加上最后一张和第一张图片就能连贯地实现左右循环滑动。但这个做法实际是有个问题的，就是新添加的2个view仍然不是真正的那个view，图片循环滑动不明显，其实当做fragment的滑动时，就不能这么做了，具体我也不知道很好的做法，如果有dalao懂的希望能分享下。

代码（部分）的关键就是在监听器上下点功夫（注意在views数量小于3时，不跳转，其实就是只显示一张图片的时候）：

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    if (processpage != null && views.size() > 3)
                        if (position > 0 && position < views.size() - 1)
                            processpage.pageSelected(position - 1);
                        else if (position == 0) processpage.pageSelected(views.size() - 3);
                        else if (position == views.size() - 1) processpage.pageSelected(0);
                }

                public void onPageScrolled(int position, float positionOffset,
                                           int positionOffsetPixels) {
                    if (positionOffset == 0.0 && views.size() > 3) {//完全切换完后跳转
                        if (position == 0) viewPager.setCurrentItem(views.size() - 2, false);
                        if (position == views.size() - 1) viewPager.setCurrentItem(1, false);
                    }
                }

                public void onPageScrollStateChanged(int state) {
                }
            });

自动滑动

自动滑动应该很多人知道如何实现，使用一个Handler即可解决

关键代码：

    private final Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            if (shouldAutoScroll) {
                viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                handler.sendEmptyMessageDelayed(0, SCROLLER_TIME);
            }
        }
    };

在最后，我整理写好了一个可以直接使用的代码，包含了adapter,listener等

下载

具体使用方法：

private void initTopView() {
    //自己的viewPager设置adapter
	viewPager = (ViewPager) view.findViewById(R.id.sell_top_pager);
	viewPager.setAdapter(new SellMainTopAdapter(activity));

	//设置自动播放viewpager,循环左右切换
	TopScroller topScroller = new TopScroller(context,
			(ViewPager) view.findViewById(R.id.sell_top_pager_ad));
	topScroller.setTime(5000, 500);//第一个参数是滑动间隙，第二个是切换的时间
	List<View> views = new ArrayList<>();
	views.add(view5);
	views.add(view1);
	views.add(view2);
	views.add(view3);
	views.add(view4);
	views.add(view5);
	views.add(view1);
	topScroller.setViews(views);//设置views
	//设置监听器，可以监听滑到哪里了。在这里我是用来根据显示的图片，显示下面的小圆点
	//不需要的可以不写
	topScroller.setProcessPage(new TopScroller.ProcessPage() {
		@Override
		public void pageSelected(int position) {
			mCircleView.setBackgroundResource(R.drawable.tab_sell_circle_light);
			View circleView = mNumLayout.getChildAt(position);
			circleView.setBackgroundResource(R.drawable.tab_sell_circle_dark);
			mCircleView = circleView;
		}
	});
}