ViewPager轮播小圆点的实现

在淘宝、网易云音乐 等等APP应用中我们随处可见小圆点与ViewPager的轮播组合 可见它的应用十分广泛 那么到底如何实现 现在让我们一起来学习！

一 在布局中写出vp与圆点 

<RelativeLayout
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="300dp">
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        ></android.support.v4.view.ViewPager>
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        android:gravity="center"
        android:orientation="horizontal"></LinearLayout>
</RelativeLayout>

二 自定义一个类实现接口

   自定义接口的过程中我们需要两张图片 R.mipmap.gouwuzy_16  R.mipmap.gouwuzy_17一个选中的图片 一个未选中

放入mipmap中 在调用接口时我们需要传入4个参数上下文、我们布局中的VP及LinerLayout、ViewPager中图片个个

数。

public class ViewPagerIndicator implements ViewPager.OnPageChangeListener {  
    private Context context;  
    private ViewPager viewPager;  
    private LinearLayout dotLayout;  
    private int size;  
    private int img1 = R.mipmap.gouwuzy_16, img2 = R.mipmap.gouwuzy_17;  
    private int imgSize = 15;  
    private List<ImageView> dotViewLists = new ArrayList<>();  
  
    public ViewPagerIndicator(Context context, ViewPager viewPager, LinearLayout dotLayout, int size) {  
        this.context = context;  
        this.viewPager = viewPager;  
        this.dotLayout = dotLayout;  
        this.size = size;  
  
        for (int i = 0; i < size; i++) {  
            ImageView imageView = new ImageView(context);  
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));  
  
            //为小圆点左右添加间距  
            params.leftMargin = 10;  
            params.rightMargin = 10;  
            //手动给小圆点一个大小  
            params.height = imgSize;  
            params.width = imgSize;  
            if (i == 0) {  
                imageView.setBackgroundResource(img1);  
            } else {  
                imageView.setBackgroundResource(img2);  
            }  
            //为LinearLayout添加ImageView  
            dotLayout.addView(imageView, params);  
            dotViewLists.add(imageView);  
        }  
  
    }  
  
    @Override  
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  
    }  
  
    @Override  
    public void onPageSelected(int position) {  
        for (int i = 0; i < size; i++) {  
            //选中的页面改变小圆点为选中状态，反之为未选中  
            if ((position % size) == i) {  
                ((View) dotViewLists.get(i)).setBackgroundResource(img1);  
            } else {  
                ((View) dotViewLists.get(i)).setBackgroundResource(img2);  
            }  
        }  
    }  
  
    @Override  
    public void onPageScrollStateChanged(int state) {  
  
    }  
} 

 

 三 在Activity中调用

public class MainActivity extends AppCompatActivity {  
    private ViewPager vp;  
    private VPAdapter vpAdapter;  
    private LinearLayout ll;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        vp = (ViewPager) findViewById(R.id.vp);  
        vpAdapter = new VPAdapter(this);  
        vp.setAdapter(vpAdapter);  
  
        ll = (LinearLayout) findViewById(R.id.ll);  
        vp.setOnPageChangeListener(new ViewPagerIndicator(this, vp, ll, 3));  
    }  
}  

接口调用中的第四个参数是可变的 当我们从网站读取数据时参数为ViewPagerimg集合的长度