Android ViewPager无限循环滑动并可自动滚动完整实例

2024-11-27 09:03:03

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

基础的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错误啦");
    }

这样就可以控制速度了

好了，Android ViewPager广告页可无限循环滑动并可自动滚动带有小圆点的功能基本就实现了，具体参数大家可以自行设定

您可能感兴趣的文章:

Android ViewPager实现左右滑动翻页效果
android自定义ViewPager水平滑动弹性效果
Android 中基于TabLayout+ViewPager实现标签卡效果
Android 中 viewpager 滑动指示器的实例代码
Android开发实现的ViewPager引导页功能(动态加载指示器)详解
Android中fragment+viewpager实现布局
Android实现单页显示3个Item的ViewPager炫酷切换效果
Android viewpager自动轮播和小圆点联动效果
Android使用ViewPager实现屏幕滑动效果
Android实现界面内嵌多种卡片视图（ViewPager、RadioGroup）
Android viewpager无限轮播获取网络图片功能
Android 中ViewPager中使用WebView的注意事项
Android ViewPager实现左右滑动的实例
Android UI设计与开发之ViewPager仿微信引导界面以及动画效果
Android UI设计与开发之使用ViewPager实现欢迎引导页面
Android UI设计与开发之ViewPager介绍和简单实现引导界面
Android使用ViewPager实现顶部tabbar切换界面
Android ViewPager导航小圆点实现无限循环效果

Android实现单页显示3个Item的ViewPager炫酷切换效果

单页显示3个Item的ViewPager炫酷切换效果,适用于Banner等. 效果图 Rotate Y Rotate Down Rotate Up Alpha ScaleIn ScaleIn + Alpha + Rotate Down 使用 ###(1)引入 compile `com.zhy:magic-viewpager:1.0.1` ###(2)示例布局文件 <FrameLayout android:layout_width="match_parent" android:l
Android 中ViewPager中使用WebView的注意事项

Android 中ViewPager中使用WebView的注意事项前言: 今天在做项目时遇到了一个小问题首先使用ViewPager显示多个页面,然后在每个页面上使用Fragment显示数据,其中有一部分数据是通过WebView加载的Html标签. 具体xml布局如下 <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.andr
Android使用ViewPager实现顶部tabbar切换界面

类似的功能可以看看: 使用RadioGroup实现底部导航栏进入正题效果图: 注:PagerSlidingTabStrip为自定义控件,用于切换界面,此处不便贴出代码 1.主界面xml布局中添加ViewPager控件: <android.support.v4.view.ViewPager android:id="@+id/pager_view" android:layout_width="match_parent" android:layout_heigh
Android UI设计与开发之ViewPager仿微信引导界面以及动画效果

基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧.好的,话不多说,回归正题. 这篇要实现的是一个仿微信的动画效果,虽然这种效果的实现在网上到处都有,但是我还是想站在中低端开发者的角度去告诉大家是如何实现的,当然实现的方式有很多,我也只是列出了我认为实现起来比较方便的一种方法,希望大家能够受用. 一.实现的效果图有图才有真相,上图先: 点击按钮后
Android开发实现的ViewPager引导页功能(动态加载指示器)详解

本文实例讲述了Android开发实现的ViewPager引导页功能(动态加载指示器).分享给大家供大家参考,具体如下: 先看效果图咯~ 现在几乎每个App都会有引导页,是不是感觉很炫很厉害,所以就想做出来一个学习一下~让自己的App看起来更加的美观~ 现在来分析一下: 这个引导页可以分为俩部分~ 1.小红点--来提醒这是第几页了~ 2."开始体验"这个Button--可以进入主界面,但是要控制这个Button只能在最后一页出现布局的话使用相对布局~ 那现在来看看布局吧: activi
Android UI设计与开发之使用ViewPager实现欢迎引导页面

本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗? 最下方有源码的下载地址,几乎源码的每一行都有注释,写的通俗易懂,非常清晰,如有不懂的可以留言,本博主一定尽心尽力,为大家答题解惑,希望大家多多支持,好的,话不多说,让我们回归到今天的正题. 一.实现的效果图也许是养成了这样一个习惯,每次看别人的代码前,必须要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实
Android ViewPager实现左右滑动的实例

Android ViewPager实现左右滑动的实例多个标题以及标题下的每个View视图 <com.shizhefei.view.indicator.ScrollIndicatorView android:id="@+id/moretab_indicator" android:layout_width="match_parent" android:layout_height="45dp" /> <View android:la
Android使用ViewPager实现屏幕滑动效果

使用ViewPager实现屏幕滑动从一个完整的屏幕移动到另一个屏幕的过程被称为屏幕滑动,在安装向导.幻灯片中应用广泛.下面介绍如何利用Android Support库的ViewPager来实现屏幕滑动. 创建View 创建一个在之后作为fragment的内容的布局文件,下面的例子中包含一个Textview,用来展示一些文字.  <ScrollView xmlns:android="http://sc
Android viewpager无限轮播获取网络图片功能

本文实例为大家分享了viewpager无限轮播获取网络图片的具体代码,供大家参考,具体内容如下话不多说直接上代码,你们都懂的小圆点属性 dot_focused.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="recta
Android ViewPager导航小圆点实现无限循环效果

之前用View Pager做了一个图片切换的推荐栏(就类似与淘宝.头条客户端顶端的推荐信息栏),利用View Pager很快就能实现,但是一次无意间使用淘宝APP的时候,突然发现它的效果和我做的还不一样,淘宝APP的推荐栏可以左右无限循环切换,而ViewPager自身其实并没有支持这个功能. 其实实现这个无限循环不难,只需要在数据源的首尾各添加一张多余的图片,在onPagerChangeListener()中监听position<1和position>(总数据条目-1)就可以了.另外一点需要注
Android实现界面内嵌多种卡片视图（ViewPager、RadioGroup）

Android实现界面内嵌多种卡片视图,具体内容如下效果如图所示: 1.选择某个界面时,对应的第几个小圆点亮: 通过selector制造圆点和进行更改小圆点被选择和未被选择时的颜色: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item an
Android viewpager自动轮播和小圆点联动效果

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下首先来看一下我们要做成的而效果: 主页面要显示一个viewpager自动轮播+小圆点联动的效果 : 废话不多说,直接上代码: 布局文件: activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro
android自定义ViewPager水平滑动弹性效果

android ViewPager是一个经常要用到的组件,但android系统本身为我们提供的ViewPager是没有任何效果的,只能是一页一页的滑动,这样会让人感觉很死板,在看一些知名大公司的App时,看到了他们的ViewPager在滑动到最开始或者最后的时候是有一个弹性效果的,使用起来感觉非常的好,于是乎就是百度搜了一下,在StackOverflow中看到一篇文章就是讲如何实现这个效果的. 先看下效果图:滑动到最后一页时仍然可以拉动-- 代码如下: package com.example.m
Android 中基于TabLayout+ViewPager实现标签卡效果

代码已经上传至Github:https://github.com/YanYoJun/ViewPagerDemo 先看效果 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.andro
Android UI设计与开发之ViewPager介绍和简单实现引导界面

做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分享.共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的感受--UI设计开始写起吧,循序渐进,娓娓道来.博主在这里和大家一起学习,希望能多多支持,话不多说,下面就开始讲解UI设计的第一篇. 在讲解如何实现引导界面的效果之前,我想先详细介绍一下ViewPager类的使用和说明,因为这是开发引导界面最重要的类,没有之一. 一.ViewPager实现的效果图二.
Android 中 viewpager 滑动指示器的实例代码

先看下效果图: 这个需要用到1个开源的库,这个后面也会说下的. 工程目录: 1. MainActivity.java public class MainActivity extends FragmentActivity { private ViewPagerFrameAdapter adapter; //适配器(标题和内容) private ViewPager mPager; private TabPageIndicator tabbPageIndicator; // private Unde
Android ViewPager实现左右滑动翻页效果

本文实例为大家分享了ViewPager实现左右滑动翻页效果展示的具体代码,供大家参考,具体内容如下代码如下: package com.example.demo; import java.util.ArrayList; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import a
Android中fragment+viewpager实现布局

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 1.先布局实现mian.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/

Android ViewPager无限循环滑动并可自动滚动完整实例

您可能感兴趣的文章:

相关推荐

随机推荐