ViewPager翻页的时候下面的小圆点跟着滑动如何实现。

这个效果的实现方法有很多种，网上有很多好的开源项目，这里我是自己以前写的一个实现方法，整理一下分享一下，方便以后有需要的时候参考。

还是先看一下效果图：

实现原理：先设置布局外层是fragment，里面放着viewPager和LinearLayout，设置linearLayout在底部，这样就是叠加的关系，linearLayout里面放的是这个三个view,通过设置这三个view的背景色，来区分当前跳到了第几页。背景色(小圆点)通过shape来定义。

代码：

ShowActivity.java

package com.example.viewpagerbottompoint;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ShowActivity extends Activity {

	private ArrayList<View> dots;
	private ViewPager mViewPager;
	private ViewPagerAdapter adapter;
	private View view1, view2, view3;
	private int oldPosition = 0;// 记录上一次点的位置
	private int currentItem; // 当前页面
	private List<View> viewList = new ArrayList<View>();// 把需要滑动的页卡添加到这个list中

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_show);
		// 添加当前Acitivity到ancivitylist里面去，为了方便统一退出
		// 显示的点
		dots = new ArrayList<View>();
		dots.add(findViewById(R.id.dot_1));
		dots.add(findViewById(R.id.dot_2));
		dots.add(findViewById(R.id.dot_3));
		// 得到viewPager的布局
		LayoutInflater lf = LayoutInflater.from(ShowActivity.this);
		view1 = lf.inflate(R.layout.viewpager_item1, null);
		view2 = lf.inflate(R.layout.viewpager_item2, null);
		view3 = lf.inflate(R.layout.viewpager_item3, null);
		viewList.add(view1);
		viewList.add(view2);
		viewList.add(view3);
		// 找到点击进入那个按钮
		mViewPager = (ViewPager) findViewById(R.id.vp);

		adapter = new ViewPagerAdapter();
		mViewPager.setAdapter(adapter);
		dots.get(0).setBackgroundResource(R.drawable.dot_focused);
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int position) {
				// TODO Auto-generated method stub

				dots.get(oldPosition).setBackgroundResource(
						R.drawable.dot_normal);
				dots.get(position)
						.setBackgroundResource(R.drawable.dot_focused);

				oldPosition = position;
				currentItem = position;
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
			}
		});
	}

	private class ViewPagerAdapter extends PagerAdapter {

		public ViewPagerAdapter() {
			super();
			// TODO Auto-generated constructor stub
			// 得到viewpager切换的三个布局，并把它们加入到viewList里面,记得view用打气筒生成，否则容易出现空指针异常

		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return viewList.size();
		}

		// 是否是同一张图片
		@Override
		public boolean isViewFromObject(View view, Object object) {
			// TODO Auto-generated method stub
			return view == object;
		}

		@Override
		public void destroyItem(ViewGroup view, int position, Object object) {
			((ViewPager) view).removeView(viewList.get(position));

		}

		@Override
		public Object instantiateItem(ViewGroup view, int position) {
			((ViewPager) view).addView(viewList.get(position));
			return viewList.get(position);
		}
	}

	@Override
	protected void onStart() {
		// TODO Auto-generated method stub
		super.onStart();
	}

	@Override
	protected void onStop() {
		// TODO Auto-generated method stub
		super.onStop();
		finish();
	}

}

主布局文件，activity_show.xml

<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" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="35dip"
            android:layout_gravity="bottom"
            android:gravity="center"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dip"
                android:orientation="horizontal" >


                <View
                    android:id="@+id/dot_1"
                    android:layout_width="10dip"
                    android:layout_height="10dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip"
                    android:background="@drawable/dot_normal" />

                <View
                    android:id="@+id/dot_2"
                    android:layout_width="10dip"
                    android:layout_height="10dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip"
                    android:background="@drawable/dot_normal" />

                <View
                    android:id="@+id/dot_3"
                    android:layout_width="10dip"
                    android:layout_height="10dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip"
                    android:background="@drawable/dot_normal" />
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>

</RelativeLayout>

设置那三个点选中和未选中的样子，通过shape来定义：

这里放在drawable文件夹下。

dot_focused.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <corners android:radius="5dip" /><!-- 背景的填充颜色 -->  

    <solid android:color="#aaFFFFFF" /><!-- 边角圆弧的半径 -->  

</shape>

dot_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <corners android:radius="5dip" />

    <solid android:color="#55000000" />

</shape>

下面是VIewPager里面放的三个view的布局文件

viewpager_item1.xml

<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:background="#0000ff"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="第一页"
        android:textColor="#ffffff"
        android:textSize="50dp" />

</RelativeLayout>

viewpager_item2.xml

<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:background="#00eeff"
	tools:context=".MainActivity" >

	 <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50dp"
        android:gravity="center"
        android:textColor="#ffffff"
        android:text="第二页"
         />


</RelativeLayout>

viewpager_item3.xml

<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:background="#008855"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50dp"
        android:gravity="center"
        android:textColor="#ffffff"
        android:text="第三页" />

</RelativeLayout>

点击下载源码