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

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

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

布局：

<?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);
  }
} 

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索viewpager 底部小圆点、viewpager滑动小圆点、viewpager循环滑动、viewpager的循环滑动、viewpager小圆点导航，以便于您获取更多的相关知识。