android ViewPager实现自动无限轮播和下方向导圆点

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false"> <!-- 实心圆   <solid android:color="#F00"/> --> <!-- 空心圆   <stroke   android:width="1dp"   android:color="@android:color/black"/> --> <size android:width="8dp" android:height="8dp"/></shape>

<?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="200dp"> <android.support.v4.view.ViewPager  xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/hometab_vp"  android:layout_width="match_parent"  android:layout_height="200dp"> </android.support.v4.view.ViewPager> <RelativeLayout  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_alignParentBottom="true"  android:layout_centerHorizontal="true"  android:layout_marginBottom="20dp"  >  <LinearLayout   android:id="@+id/ll_dot"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:orientation="horizontal">   <ImageView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:src="@drawable/shape_guide_dot_default"/>   <ImageView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_marginLeft="5dp"    android:src="@drawable/shape_guide_dot_default"/>   <ImageView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_marginLeft="5dp"    android:src="@drawable/shape_guide_dot_default"/>   <ImageView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_marginLeft="5dp"    android:src="@drawable/shape_guide_dot_default"/>   <ImageView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_marginLeft="5dp"    android:src="@drawable/shape_guide_dot_default"/>  </LinearLayout>  <ImageView   android:id="@+id/dot_red"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:src="@drawable/shape_guide_dot_solid"/> </RelativeLayout></RelativeLayout>

/** * 轮播 viewpager的adapter */class MyLoopPagerAdapter extends PagerAdapter { private int[] welcomes; private Context mContext; public MyLoopPagerAdapter(int[] welcomes, Context context) {  this.welcomes = welcomes;  mContext = context; } //  //返回实际要显示的图片数+2 @Override public int getCount() {  return welcomes.length + 2; } @Override public boolean isViewFromObject(View view, Object object) {  return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) {  ImageView iv = new ImageView(mContext);  int realPosition = (position - 1 + welcomes.length) % welcomes.length;//    设置背景图片  iv.setBackgroundResource(welcomes[realPosition]);  container.addView(iv);  return iv; } @Override public void destroyItem(ViewGroup container, int position, Object object) {  //注意不要remove 否则容易闪屏  //     container.removeView((ImageView) object); }}

/**  * 循环轮播界面change的 监听器  */ class MyLoopPageChangeListener implements ViewPager.OnPageChangeListener {  private ViewPager mViewPager;  private LinearLayout mLlDot;  private ImageView dotRed;  private Handler mHandler;  private Runnable mRunnable;  /**   * 初始化 控件 和 handler   *   * @param viewPager   * @param llDot   * @param dotRed   */  public MyLoopPageChangeListener(ViewPager viewPager, LinearLayout llDot, ImageView dotRed) {   mViewPager = viewPager;   this.mLlDot = llDot;   this.dotRed = dotRed;   initAutoLoop();  }  /**   * 初始化 自动轮播 handler 和 runnable   */  private void initAutoLoop() {   mHandler = new Handler() {    @Override    public void handleMessage(Message msg) {//     LogUtils.e("have received a msg");     int curindex = (mViewPager.getCurrentItem() + 1) % (welcomes.length + 2);     mViewPager.setCurrentItem(curindex, true);    }   };   mRunnable = new Runnable() {    @Override    public void run() {     Message message = new Message();     mHandler.sendMessage(message);    }   };//   开始 轮播   mHandler.postDelayed(mRunnable, 3 * 1000);  }  /**   * 当页面在滑动了调用   *   * @param position    当前页面，即点击滑动的页面   * @param positionOffset  当前页面偏移的百分比   * @param positionOffsetPixels 当前页面偏移的像素位置   */  @Override  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {//   获取到 真正图片所在的位置.   int realPosition = (position - 1 + welcomes.length) % welcomes.length;//   获取到红点 的 layout 参数   RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) dotRed.getLayoutParams();//   计算两个点之间的距离   int dotDis = mLlDot.getChildAt(1).getLeft() - mLlDot.getChildAt(0).getLeft();//   计算总共的左边距   int totalLeftMargin = (welcomes.length - 1) * dotDis;   // 计算滑动的距离   float dis = realPosition * dotDis + positionOffset * dotDis;//   设置 margin_left 的值,//   如果 position 等于 0 说明正在从第一个图片想最后一个滑动,那么保持 向导的状态为不动   if (position == 0) {    params.leftMargin = 0;//    如果滑动距离超过了 最大边距,那么将最大边距赋值给 红点的参数左边距   } else if (dis > totalLeftMargin) {    params.leftMargin = totalLeftMargin;//    正常情况 就将滑动的距离 直接赋值   } else {    params.leftMargin = (int) dis;   }//   设置红点的 参数   dotRed.setLayoutParams(params);//    在position4左滑且左滑positionOffset百分比接近1时，偷偷替换为position1（原本会滑到position5）   if (position == welcomes.length && positionOffset > 0.99) {    mViewPager.setCurrentItem(1, false);//    在position1右滑且右滑百分比接近0时，偷偷替换为position4（原本会滑到position0）   } else if (position == 0 && positionOffset < 0.01) {    mViewPager.setCurrentItem(welcomes.length, false);   }  }  @Override  public void onPageSelected(int position) {  }  @Override  public void onPageScrollStateChanged(int state) {   switch (state) {    case 0://什么都没做 空闲状态     break;    case 1://正在滑动://     手动滑动 取消自动滑动     mHandler.removeCallbacks(mRunnable);     break;    case 2://滑动完毕://     继续 自动滑动     mHandler.postDelayed(mRunnable, 3 * 1000);     break;   }  } }

// 主要的算法参考下图 int realPosition = (position - 1 + welcomes.length) % welcomes.length;