ViewPager无线轮播图

2017-06-12  本文已影响114人  日丶月丶明

本人第一次写文章,写的不好请多多包含。

效果图

两个都是无线轮播图,只是特效不一样
我的电脑打不开虚拟机,制作不了gif图片。只能盗用一下依然范特稀西大神的图片,希望大神莫怪

3513995-335d59f4817c2e23.gif 3513995-359785439049efc1.gif

没加特效处理的ViewPager

直接上代码
xml文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/car_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

java文件

currenTiem = getStartSelectItem();
//设置当前页为Integer.MAX_VALUE / 2
viewpager.setCurrentItem(currenTiem);

 private int getStartSelectItem() {
        // 我们设置当前选中的位置为Integer.MAX_VALUE / 2,这样开始就能往左滑动
        // 但是要保证这个值与getRealPosition 的 余数为0,因为要从第一页开始显示
        int currentItem = Integer.MAX_VALUE / 2;
        if (currentItem % getRealCount() == 0) {
            return currentItem;
        }
        // 直到找到从0开始的位置
        while (currentItem % getRealCount() != 0) {
            currentItem++;
        }
        return currentItem;
    }

通过setCurrentItem()方法设置当前你要显示的页数。这里的viewPager显示的第一页必须是Integer.MAX_VALUE / 2,这样就能做到理论上的无限循环。当前为第一页时,从左往右滑动也会出现图片。

利用scheduledExecutorService实现开始轮播和停止轮播。注意:当手指滑动viewPager是停止轮播,当滑动完成后再开始轮播。不然就会出现当你滑动图片时,图片也会跟着轮播,效果很不好。scheduleAtFixedRate方法的四个参数:1:好像是开启一个线程执行你要做的操作 2:延时执行 3:图片播放的间隔时间 4:这个我还没弄清楚

    /**
     * 开始轮播
     */
    private void startCarousel() {
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleAtFixedRate(new LooviewTask(), 0, TIME_INTERVAL, TimeUnit.SECONDS);
    }

    /**
     * 停止轮播
     */
    private void stopCarousel() {
        scheduledExecutorService.shutdown();
    }

 class LooviewTask implements Runnable {
        @Override
        public void run() {
            synchronized (viewpager) {
                handler.obtainMessage().sendToTarget();
            }
        }
    }

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            viewpager.setCurrentItem(currenTiem);
            currenTiem++;
        }
    };
}

adapter文件

public class CarViewPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            int mPosition = position % getRealCount();
            if (mPosition < 0) {
                mPosition = IVList.size() + mPosition;
            }
            ImageView view = IVList.get(mPosition);
            //如果View已经在之前添加到了一个父组件,则必须先remove,否则会抛出IllegalStateException。
            ViewParent vp = view.getParent();
            if (vp != null) {
                ViewGroup parent = (ViewGroup) vp;
                parent.removeView(view);
            }
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    }

需要注意:

getCount() 方法的返回值:这个值直接关系到ViewPager的“边界”,因此当我们把它设置为Integer.MAX_VALUE之后,用户基本就看不到这个边界了(估计滑到这里的时候电池已经挂了吧o_O)。当然,通常情况下设置为100倍实际内容个数也是可以的,之前看的某个实现就是这么干的。

instantiateItem() 方法position的处理:由于我们设置了count为 Integer.MAX_VALUE,因此这个position的取值范围很大很大,但我们实际要显示的内容肯定没这么多(往往只有几项),所以这里肯定会有求模操作。但是,简单的求模会出现问题:考虑用户向左滑的情形,则position可能会出现负值。所以我们需要对负值再处理一次,使其落在正确的区间内。

destroyItem() 方法:由于我们在instantiateItem()方法中已经处理了remove的逻辑,因此这里并不需要处理。实际上,实验表明这里如果加上了remove的调用,则会出现ViewPager的内容为空的情况。

instantiateItem() 方法父组件的处理:通常我们会直接addView,但这里如果直接这样写,则会抛出IllegalStateException。假设一共有三个view,则当用户滑到第四个的时候就会触发这个异常,原因是我们试图把一个有父组件的View添加到另一个组件。但是,如果直接写成下面这样:
`
(ViewGroup)view.getParent().removeView(view);

如果你想做到加特效的效果其实也很简单,只要在xml文件的父级控件中加上android:clipChildren="false"就可以了,还要这设置一下viewpager的左右间距,不然前后两张图片看不到:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:clipChildren="false"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/car_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"/>
</RelativeLayout>

项目地址:https://github.com/BambooMing/wockspace

我的参考资料来源:http://www.jianshu.com/p/653680cfe877
http://www.cnblogs.com/kobe8/p/4343478.html
`

上一篇 下一篇

猜你喜欢

热点阅读