Android ViewPager无限循环实现底部小圆点动态滑动

页面拖动到最后一页 再向下滑动回复到 第一页，第一页向前滑动回到 最后一页

同时，底部红色小圆点随着页面的滑动距离比例随时改变位置

布局：

<?xml version="1.0" encoding="utf-8"?> 
<relativelayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:paddingbottom="@dimen/activity_vertical_margin" 
  android:paddingleft="@dimen/activity_horizontal_margin" 
  android:paddingright="@dimen/activity_horizontal_margin" 
  android:paddingtop="@dimen/activity_vertical_margin" 
  tools:context="com.lian.viewpagertest.mainactivity"> 
 
  <android.support.v4.view.viewpager 
    android:id="@+id/viewpager" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 
  </android.support.v4.view.viewpager> 
 
  <textview 
    android:id="@+id/tv" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="内容" 
    android:textsize="25sp" 
    android:layout_alignparentbottom="true" 
    android:layout_centerhorizontal="true" 
    /> 
 
  <relativelayout 
    android:id="@+id/rl_bottom" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignparentbottom="true" 
    android:layout_centerhorizontal="true" 
    android:layout_marginbottom="45dip" > 
 
    <linearlayout 
      android:id="@+id/ll_points" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal" > 
    </linearlayout> 
 
    <view 
      android:id="@+id/v_redpoint" 
      android:layout_width="10dip" 
      android:layout_height="10dip" 
      android:background="@drawable/red_circle" /> 
  </relativelayout> 
</relativelayout> 

其中red_circle是用shape绘制的红色小圆点

最后的linearlayout实际上是灰色小圆点的容器，在代码中根据数据的长度动态确定数目

代码：

package com.lian.viewpagertest; 
 
import android.os.bundle; 
import android.support.v4.view.pageradapter; 
import android.support.v4.view.viewpager; 
import android.support.v7.app.appcompatactivity; 
import android.util.log; 
import android.view.view; 
import android.view.viewgroup; 
import android.view.viewtreeobserver; 
import android.widget.imageview; 
import android.widget.linearlayout; 
import android.widget.relativelayout; 
import android.widget.textview; 
 
import java.util.arraylist; 
import java.util.list; 
 
public class mainactivity extends appcompatactivity { 
 
  private viewpager mviewpager; 
  private textview mtextview; 
  private linearlayout mlinearlayout; 
  private view mview; 
  private list<imageview> mdatalist; 
  private int diatance; 
 
  @override 
  protected void oncreate(bundle savedinstancestate) { 
    super.oncreate(savedinstancestate); 
    initview(); 
    initdata(); 
    initevent(); 
  } 
 
  /** 
   * 初始化数据 
   */ 
 
  private void initdata() { 
    int[] sorce = new int[]{r.drawable.a,r.drawable.b,r.drawable.c,r.drawable.d,r.drawable.e}; 
 
    mdatalist = new arraylist<imageview>(); 
 
    for (int i = 0;i < sorce.length;i ++){ 
      imageview img = new imageview(getapplicationcontext()); 
      img.setimageresource(sorce[i]); 
      mdatalist.add(img); 
 
      //添加底部灰点 
      view v = new view(getapplicationcontext()); 
      v.setbackgroundresource(r.drawable.gray_circle); 
      //指定其大小 
      linearlayout.layoutparams params = new linearlayout.layoutparams(20,20); 
      if (i != 0) 
        params.leftmargin = 20; 
      v.setlayoutparams(params); 
      mlinearlayout.addview(v); 
    } 
 
    mviewpager.setadapter(new myadapter()); 
 
    //设置每次加载时第一页在max_value / 2 - extra 页，造成用户无限轮播的错觉 
    int startpage = integer.max_value / 2; 
    int extra = startpage % mdatalist.size(); 
    startpage = startpage - extra; 
    mviewpager.setcurrentitem(startpage); 
  } 
 
  /** 
   * viewpager的容器 
   */ 
 
  public class myadapter extends pageradapter{ 
 
    @override 
    public int getcount() { 
      //告诉容器我们的数据长度为integer.max_value，这样就可以一直滚动 
      return integer.max_value; 
    } 
 
    @override 
    public boolean isviewfromobject(view view, object object) { 
      return view == object; 
    } 
 
    @override 
    public object instantiateitem(viewgroup container, int position) { 
      //若position超过mdatalist.size()，会发生越界异常，所以这里每次超过size又从0开始计算位置 
      position = position % mdatalist.size(); 
 
      imageview img = mdatalist.get(position); 
      container.addview(img); 
 
      return img; 
    } 
 
    @override 
    public void destroyitem(viewgroup container, int position, object object) { 
 
      position = position % mdatalist.size(); 
 
      container.removeview((view)object); 
 
      // super.destroyitem(container, position, object); 
    } 
  } 
 
  private void initevent() { 
 
 
    /** 
     * 当底部红色小圆点加载完成时测出两个小灰点的距离，便于计算后面小红点动态移动的距离 
     */ 
    mview.getviewtreeobserver().addongloballayoutlistener(new viewtreeobserver.ongloballayoutlistener() { 
      @override 
      public void ongloballayout() { 
        diatance = mlinearlayout.getchildat(1).getleft() - mlinearlayout.getchildat(0).getleft(); 
        log.d("两点间距",diatance + "测出来了"); 
      } 
    }); 
 
    mviewpager.setonpagechangelistener(new viewpager.onpagechangelistener() { 
      @override 
      public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { 
 
        //测出页面滚动时小红点移动的距离，并通过setlayoutparams(params)不断更新其位置 
        position = position % mdatalist.size(); 
        float leftmargin = diatance * (position + positionoffset); 
        relativelayout.layoutparams params = (relativelayout.layoutparams) mview.getlayoutparams(); 
        params.leftmargin = math.round(leftmargin); 
        mview.setlayoutparams(params); 
        log.d("红点在这",leftmargin + ""); 
      } 
 
      @override 
      public void onpageselected(int position) { 
 
      } 
 
      @override 
      public void onpagescrollstatechanged(int state) { 
 
      } 
    }); 
  } 
 
  private void initview() { 
 
    setcontentview(r.layout.activity_main); 
 
    mviewpager = (viewpager) findviewbyid(r.id.viewpager); 
 
    mtextview = (textview) findviewbyid(r.id.tv); 
 
    mlinearlayout = (linearlayout) findviewbyid(r.id.ll_points); 
 
    mview = findviewbyid(r.id.v_redpoint); 
  } 
} 

以上就是本文的全部内容，希望对大家的学习有所帮助。