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

这篇文章主要介绍了Android ViewPager无限循环实现底部小圆点动态滑动的相关资料,需要的朋友可以参考下

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

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

布局：

?

<?xmlversion="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实际上是灰色小圆点的容器，在代码中根据数据的长度动态确定数目

代码：

packagecom.lian.viewpagertest; 
  
importandroid.os.Bundle; 
importandroid.support.v4.view.PagerAdapter; 
importandroid.support.v4.view.ViewPager; 
importandroid.support.v7.app.AppCompatActivity; 
importandroid.util.Log; 
importandroid.view.View; 
importandroid.view.ViewGroup; 
importandroid.view.ViewTreeObserver; 
importandroid.widget.ImageView; 
importandroid.widget.LinearLayout; 
importandroid.widget.RelativeLayout; 
importandroid.widget.TextView; 
  
importjava.util.ArrayList; 
importjava.util.List; 
  
publicclass MainActivity extendsAppCompatActivity { 
  
  privateViewPager mViewPager; 
  privateTextView mTextView; 
  privateLinearLayout mLinearLayout; 
  privateView mView; 
  privateList<ImageView> mDataList; 
  privateint diatance; 
  
  @Override
  protectedvoid onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState);
    initView();
    initData();
    initEvent();
  }
  
  /**
   * 初始化数据 
   */
  
  privatevoid initData() { 
    int[] sorce = newint[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};
  
    mDataList = newArrayList<ImageView>(); 
  
    for(inti = 0;i < sorce.length;i ++){ 
      ImageView img = newImageView(getApplicationContext()); 
      img.setImageResource(sorce[i]);
      mDataList.add(img);
  
      //添加底部灰点
      View v = newView(getApplicationContext()); 
      v.setBackgroundResource(R.drawable.gray_circle);
      //指定其大小
      LinearLayout.LayoutParams params = newLinearLayout.LayoutParams(20,20);
      if(i != 0)
        params.leftMargin = 20;
      v.setLayoutParams(params);
      mLinearLayout.addView(v);
    }
  
    mViewPager.setAdapter(newMyAdapter()); 
  
    //设置每次加载时第一页在MAX_VALUE / 2 - Extra 页，造成用户无限轮播的错觉 
    intstartPage = Integer.MAX_VALUE / 2;
    intextra = startPage % mDataList.size(); 
    startPage = startPage - extra; 
    mViewPager.setCurrentItem(startPage);
  }
  
  /**
   * ViewPager的容器 
   */
  
  publicclass MyAdapter extendsPagerAdapter{ 
  
    @Override
    publicint getCount() { 
      //告诉容器我们的数据长度为Integer.MAX_VALUE，这样就可以一直滚动
      returnInteger.MAX_VALUE; 
    }
  
    @Override
    publicboolean isViewFromObject(View view, Object object) { 
      returnview == object; 
    }
  
    @Override
    publicObject instantiateItem(ViewGroup container, intposition) { 
      //若position超过mDataList.size()，会发生越界异常，所以这里每次超过size又从0开始计算位置
      position = position % mDataList.size(); 
  
      ImageView img = mDataList.get(position); 
      container.addView(img);
  
      returnimg; 
    }
  
    @Override
    publicvoid destroyItem(ViewGroup container, intposition, Object object) { 
  
      position = position % mDataList.size(); 
  
      container.removeView((View)object);
  
      // super.destroyItem(container, position, object); 
    }
  }
  
  privatevoid initEvent() { 
  
  
    /**
     * 当底部红色小圆点加载完成时测出两个小灰点的距离，便于计算后面小红点动态移动的距离 
     */
    mView.getViewTreeObserver().addOnGlobalLayoutListener(newViewTreeObserver.OnGlobalLayoutListener() { 
      @Override
      publicvoid onGlobalLayout() { 
        diatance = mLinearLayout.getChildAt(1).getLeft() - mLinearLayout.getChildAt(0).getLeft();
        Log.d("两点间距",diatance + "测出来了");
      }
    });
  
    mViewPager.setOnPageChangeListener(newViewPager.OnPageChangeListener() { 
      @Override
      publicvoid onPageScrolled(intposition, floatpositionOffset, intpositionOffsetPixels) { 
  
        //测出页面滚动时小红点移动的距离，并通过setLayoutParams(params)不断更新其位置
        position = position % mDataList.size(); 
        floatleftMargin = diatance * (position + positionOffset); 
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mView.getLayoutParams(); 
        params.leftMargin = Math.round(leftMargin); 
        mView.setLayoutParams(params);
        Log.d("红点在这",leftMargin + "");
      }
  
      @Override
      publicvoid onPageSelected(intposition) { 
  
      }
  
      @Override
      publicvoid onPageScrollStateChanged(intstate) { 
  
      }
    });
  }
  
  privatevoid 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); 
  }
}

?