android 简单的轮播图效果实现

首先讲一下轮播图的思路 我的做法是pagerAdapter

//轮播图的适配器class CarouselVpAdapter extends PagerAdapter {//传递网址    private List<String> urlStrs;    public CarouselVpAdapter(List<String> urlStrs) {        this.urlStrs = urlStrs;        notifyDataSetChanged();    }//总共多少的图片    @Override    public int getCount() {        return urlStrs != null && urlStrs.size() != 0 ? urlStrs.size() : 0;    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }//加载布局    @Override    public Object instantiateItem(ViewGroup container, int position) {        View view = LayoutInflater.from(context).inflate(R.layout.item_item_carousel, container, false);
        ImageView imageView = (ImageView) view.findViewById(R.id.carousel_imageView);
//皮卡丘下载图片        Picasso.with(context).load(urlStrs.get(position)).into(imageView);
//一个比较容易被遗忘的方法        container.addView(view);        return view;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {
//删掉super的引用父类方法        container.removeView(LayoutInflater.from(context).inflate(R.layout.item_item_carousel, container, false));    }}

适配器具体方法的含义不多做解释了 那么现在的效果就是 滑到最后一张就停了 

然后我们应该用ViewPager的currentItem这个方法 让第一张和第二张的图片一张 倒数第二张和最后一张的图片一样,这样 我们就可以在第二张滑到第一张的时候让第一张直接跳跃到倒数第二张 因为瞬间切换视图非常的快 人眼无法识别 下面的代码比较多 具体的解释在代码里面了

View headView = LayoutInflater.from(context).inflate(R.layout.item_choose_carousel_vp, null);        headVp = (ViewPager) headView.findViewById(R.id.carousel_vp);        pointL = (LinearLayout) headView.findViewById(R.id.rotate_point_container);        initCarouselAdapter();

//初始化数据适配器 给轮播图设置数据private void initCarouselAdapter() {    //初始化头布局适配器器具体的内容    datas = new ArrayList<>();    // 代码中的第1张图片    // 将视觉上的最后一张图片添加到第一个位置    datas.add("http://img02.liwushuo.com/image/170115/g1sjnq2lo.jpg-w720");    // 视觉上的第1张    datas.add("http://img01.liwushuo.com/image/170117/boql3ncgf.jpg-w720");    // 第2张    datas.add("http://img01.liwushuo.com/image/170113/jy6wz0dwx.jpg-w720");    // 第3张    datas.add("http://img03.liwushuo.com/image/170113/qv6iz1mct.jpg-w720");    // 第4张    datas.add("http://img03.liwushuo.com/image/170113/3qyb87je2.jpg-w720");    // 第5张    datas.add("http://img03.liwushuo.com/image/170114/p03mblo20.jpg-w720");    // 视觉上的最后一张    datas.add("http://img02.liwushuo.com/image/170115/g1sjnq2lo.jpg-w720");    // 代码中的最后一张    // 将视觉上的第一张图片添加到最后    datas.add("http://img01.liwushuo.com/image/170117/boql3ncgf.jpg-w720");    CarouselVpAdapter carouselVpAdapter = new CarouselVpAdapter(datas);    headVp.setAdapter(carouselVpAdapter);    headVp.setCurrentItem(1, false);    headVp.addOnPageChangeListener(this);    /********** 圆点操作 **********/    // 循环创建显示圆点的imageView    // 注意循环次数    for (int i = 0; i < datas.size() - 2; i++) {        // 创建控件        ImageView pointIV = new ImageView(context);        // 设置间距        pointIV.setPadding(5, 5, 5, 5);        // 设置尺寸(坐标)等信息        LinearLayout.LayoutParams param =                new LinearLayout.LayoutParams(80, 80);        pointIV.setLayoutParams(param);        // 设置图片        if (0 == i) {            pointIV.setScaleType(ImageView.ScaleType.FIT_XY);            pointIV.setImageResource(R.mipmap.ic_launcher);        } else {            pointIV.setScaleType(ImageView.ScaleType.FIT_XY);            pointIV.setImageResource(R.mipmap.logo);        }        // 将图片添加到线性布局中        pointL.addView(pointIV);    }    //----------定时器操作----------//    handler = new Handler();    //获取当前页面    //页面+1    //跳转到下一个页面    runnable = new Runnable() {        @Override        public void run() {            handler.postDelayed(runnable, 4000);            //获取当前页面            int currentPage = headVp.getCurrentItem();            //页面+1            currentPage++;            //跳转到下一个页面            headVp.setCurrentItem(currentPage);        }    };    handler.postDelayed(runnable, 4000);}
     三个方法的执行顺序:     用手指拖动翻页时, 先执行一遍onPageScrollStateChanged(1)     然后不断执行onPageScrolled     放手指时,直接立即执行一次onPageScrollStateChanged(2)     然后立即执行一次onPageSelected     然后再不断执行onPageScrolled     最后执行一次onPageScrollStateChanged(0)     滑动监听的三个方法     此方法会在屏幕滚动过程中不断调用     三个参数:     参数1:位置,当用手指滑动时,若手指按在页面不动,position和当前页     index保持一致,若手指向左拖动(相应页面向右翻动),此时position     大部分时间和当前页index一致,只有翻页成功时最后一次调用才会变为     目标页面的position     若手指向右拖动(相应页面向左翻动), 此时position大部分时间和目标页面     一致,只有翻页不成功的 情况最后一次调用才会变为原页面.     当直接setCurrentItem翻页时:     若是相邻切换(比如当前为页面2,要跳3或1)     若页面右翻,大部分时间position和当前页面一致,最后才变目标页面     若页面左翻,position和目标页面一致     若是不相邻切换     比如当前为页面1,要跳3:     position先是0, 然后逐步变为1, 再逐步变为2     比如当前为3,要跳1:     position先是1,然后逐步变为0,并不会出现4的情况     参数2:positionOffset - 当前页面滑动比例     若页面向右翻动,positionOffset值不断变大,最后在     趋近1的情况下突变为0     若页面向左翻动,此值不断变小,最后变为0     参数3:positionOffsetPixels - 当前页面滑动像素     变化情况和positionOffset一致
@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {
  //属性代码供全局使用  获取当前页面的图片位置
    currentPosition = position;    for (int i = 0; i < datas.size() - 2; i++) {
//设置下面的原点跟随变换图片        ImageView imageV = (ImageView) pointL.getChildAt(i);        imageV.setImageResource(R.mipmap.logo);    }    handler.removeCallbacks(runnable);    handler.postDelayed(runnable,4000);}@Overridepublic void onPageScrollStateChanged(int state) {
//原点位置    int currentPagePosition = currentPosition;
//判断是抬手还是放手    if (state == 0) {
//滑到0位置说明第二张图片切换到了第一张 那么在么呢就在这里跳一下        if (0 == currentPosition) {            headVp.setCurrentItem(datas.size() - 2, false);            currentPagePosition = datas.size() - 2;        }//正好相反 从倒数第二张滑到了最后一张 
else if (currentPosition == datas.size() - 1) {            headVp.setCurrentItem(1, false);            currentPagePosition = 1;        }
//让ImageView 原点设置图片 解释一下为什么-1 因为图片是八个 原点是六个 所以比如上面的if判断走完之后 是6 但是原点的最后一个位置是5 因为0开始的 这也就是为什么 else if 里为什么给它1了        ImageView imageV = (ImageView) pointL.getChildAt(currentPagePosition - 1);        imageV.setImageResource(R.mipmap.ic_launcher);    }}
四秒自动播放轮播图就完成了 实现的方法比较简单