Android ViewPager 无限循环左右滑动（可自动）实现

最新推荐文章于 2021-05-25 19:16:30 发布

潇潇微雨up

最新推荐文章于 2021-05-25 19:16:30 发布

阅读量1.5w

点赞数 4

分类专栏： android 文章标签： android viewpager app

本文链接：https://blog.csdn.net/u012760183/article/details/52230786

版权

android 专栏收录该内容

90 篇文章 0 订阅

订阅专栏

对于ViewPager 广告页这个功能很多APP都有这个功能
在网上也看过一些资料，我就在这把我自己完整的实现方法写出来吧 Demo放在最下面

基础的ViewPager：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/top_item"
    android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:id="@+id/top_vp"

            ></android.support.v4.view.ViewPager>

</LinearLayout>

很简单仅仅是一个ViewPager
接下来简单的设置一下ViewPager的Adapter 添加ImageView

public class MainActivity extends AppCompatActivity {

    private ViewPager topVp;
    private int[]images = new int[]{R.mipmap.ad0, R.mipmap.ad1, R.mipmap.ad3};  //模拟存放要展示的图片
    private List<ImageView> imageViews ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initImageViews();
        initVp();
    }

    /**
     * 初始化图片资源
     */
    private void initImageViews() {
        imageViews = new ArrayList<>();
        for(int i = 0;i<images.length;i++){
            ImageView imageView = new ImageView(this);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setImageResource(images[i]);
            imageViews.add(imageView);
        }
    }

    private void initVp() {

        topVp = (ViewPager) findViewById(R.id.top_vp);
        topVp.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return imageViews.size();
            }

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

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(imageViews.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(imageViews.get(position));
                return imageViews.get(position);
            }
        });
    }

}

上述是最基础的一个ViewPager 下面我们就在这个基础上改造就可以了

实现无限循环滑动：

这里我事先循环滑动的方式很简单就是把 adapter的count 设置为一个很大的值这样让它滑不到头然后切换图片就可以实现虽然方法比较LOW 但是效果还是可以的
代码在基础的ViewPager下修改如下：

public class MainActivity extends AppCompatActivity {

    private ViewPager topVp;
    private int[]images = new int[]{R.mipmap.ad0, R.mipmap.ad1, R.mipmap.ad3};  //模拟存放要展示的图片
    private List<ImageView> imageViews ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initImageViews();
        initVp();
    }

    /**
     * 初始化图片资源
     */
    private void initImageViews() {
        imageViews = new ArrayList<>();
        for(int i = 0;i<images.length;i++){
            ImageView imageView = new ImageView(this);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setImageResource(images[i]);
            imageViews.add(imageView);
        }
    }

    private void initVp() {

        topVp = (ViewPager) findViewById(R.id.top_vp);
        topVp.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
//                return imageViews.size(); 修改如下
                return 10000;
            }

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

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
//                container.removeView(imageViews.get(position%imageViews.size())); 删除此句  此句不删除  会出现 滑动中 布局消失的情况  因为被移除了  此处这样修改会影响一些性能。。。。。
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
//                container.addView(imageViews.get(position));
//                return imageViews.get(position);  修改如下
                try {
                    container.addView(imageViews.get(position%imageViews.size()));
                }catch (Exception e){

                }
                return imageViews.get(position%imageViews.size());
            }
        });
    }

}

这样之后就可以实现无限循环右滑了但是在程序刚启动是无法向左滑动的要解决很简单只需要在开始的时候
viewPager.setCurrentItem(1000*imageViews.size());
即可这样就可以实现无限左右滑了

自动定时循环滑动：

下面增加自动定时左右滑动的功能
要实现自动滑动最主要的是实现定时器功能
我这里使用 Handler+Runnable的方法
在上述代码的基础上修改如下：

  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initImageViews();
        initVp();
        handler = new Handler();
        handler.postDelayed(new TimerRunnable(),5000);
    }

    class TimerRunnable implements Runnable{

        @Override
        public void run() {
            int curItem = topVp.getCurrentItem();
            topVp.setCurrentItem(curItem+1);
            if (handler!=null){
                handler.postDelayed(this,5000);
            }
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        handler = null; //此处在Activity退出时及时 回收
    }

这之后就可以实现自动滑动了

添加左下角圆形小按钮：

接下来添加左下角的导航小原点
首先修改布局 :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/top_item"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="180dp">


        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:id="@+id/top_vp"

            ></android.support.v4.view.ViewPager>
        <LinearLayout
            android:id="@+id/lin_points"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_alignParentBottom="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >

        </LinearLayout>
    </RelativeLayout>


</LinearLayout>

我们需要的原点要放在 LinearLayout布局中
主要原理就是向这个LinearLayout中动态添加小圆点即可


public class MainActivity extends AppCompatActivity {

    private ViewPager topVp;
    private int[]images = new int[]{R.mipmap.ad0, R.mipmap.ad1, R.mipmap.ad3};  //模拟存放要展示的图片
    private List<ImageView> imageViews ;
    private List<TextView> txtPoints;
    private LinearLayout lin_points;
    private Handler handler;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lin_points = (LinearLayout) findViewById(R.id.lin_points);
        initImageViews();
        initVp();

        initCircle();
        /*
         * 计时器
         */
        handler = new Handler();
        handler.postDelayed(new TimerRunnable(),5000);
    }

    /**
     * 初始化小圆点
     */
    private void initCircle() {
        txtPoints = new ArrayList<>();
        int d = 20;
        int m = 7;
        for (int i = 0; i < imageViews.size(); i++) {
            TextView txt = new TextView(this);
            if (i == 0) {
                txt.setBackgroundResource(R.drawable.point_pink);
            } else {
                txt.setBackgroundResource(R.drawable.point_grey);
            }
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(d, d);

            params.setMargins(m, m, m, m);
            txt.setLayoutParams(params);
            txtPoints.add(txt);
            lin_points.addView(txt);
        }
    }

    class TimerRunnable implements Runnable{

        @Override
        public void run() {
            int curItem = topVp.getCurrentItem();
            topVp.setCurrentItem(curItem+1);
            changePoints((curItem+1)%imageViews.size());
            if (handler!=null){
                handler.postDelayed(this,5000);
            }
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        handler = null;
    }

    /**
     * 初始化图片资源
     */
    private void initImageViews() {
        imageViews = new ArrayList<>();
        for(int i = 0;i<images.length;i++){
            ImageView imageView = new ImageView(this);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setImageResource(images[i]);
            imageViews.add(imageView);
        }
    }


    private void initVp() {

        topVp = (ViewPager) findViewById(R.id.top_vp);
        topVp.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
//                return imageViews.size(); 修改如下
                return 10000;
            }

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

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
//                container.removeView(imageViews.get(position%imageViews.size())); 删除此句
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
//                container.addView(imageViews.get(position));
//                return imageViews.get(position);  修改如下
                try {
                    container.addView(imageViews.get(position%imageViews.size()));
                }catch (Exception e){

                }
                return imageViews.get(position%imageViews.size());
            }
        });

        topVp.setCurrentItem(imageViews.size()*1000);

        topVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                changePoints((position)%imageViews.size());
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
    public void changePoints(int pos) {
        if (txtPoints != null) {
            for (int i = 0; i < txtPoints.size(); i++) {
                if (pos == i) {
                    txtPoints.get(i).setBackgroundResource(R.drawable.point_pink);
                } else {
                    txtPoints.get(i).setBackgroundResource(R.drawable.point_grey);
                }
            }
        }
    }
}

给ViewPager添加切换动画：

topVp.setPageTransformer(true,new CubeOutTransformer());
调用此行代码可以添加后面的TransFormer类是自定义的过渡效果类

控制ViewPager 自动切换的速度

ViewPager自身的切换速度是写死的，我们无法修改，但是我们可以通过源码看到，ViewPager的切换速度是通过 Scroller类控制的，而Scroller类中是可以设置过渡的时间的，因此我们可以通过自己创建一个Scroller类继承 Scroller 然后通过反射把ViewPager中的mScroller属性设置成我们自己的可以设置时间的Scroller类即可
下面是代码：

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) {
        // Ignore received duration, use fixed one instead
        super.startScroll(startX, startY, dx, dy, mDuration);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy) {
        // Ignore received duration, use fixed one instead
        super.startScroll(startX, startY, dx, dy, mDuration);
    }

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

    public int getmDuration() {
        return mDuration;
    }
}

反射修改ViewPager属性：

  try {
            Field field = ViewPager.class.getDeclaredField("mScroller");
            field.setAccessible(true);
            scroller = new FixedSpeedScroller(getActivity());
            scroller.setmDuration(1000);
            field.set(topVp, scroller);
        } catch (Exception e) {
//            e.printStackTrace();
            System.out.println("aaaaaa错误啦");
        }