viewpager滑动时下面的圆点跟着滑动的代码实现

实现效果：

实现步骤：

具体核心思路是计算那点的距离，然后设置标志点距离普通点的距离。

主activity的代码：

package com.example.aaviewpager;

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.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {
	private ViewPager mViewPager;
	private View[] mView;
	private LayoutInflater inlater;
	private ImageView viewBluePoint;
	private LinearLayout mLinearLayout;
	private int mPointWidth;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
	}

	private void initView() {
		// TODO Auto-generated method stub
		mLinearLayout=(LinearLayout) findViewById(R.id.ll_point_group);
		viewBluePoint=(ImageView) findViewById(R.id.view_blue_point);
		inlater = LayoutInflater.from(this);
		mView = new View[] { inlater.inflate(R.layout.item1, null), inlater.inflate(R.layout.item2, null) };
		mViewPager = (ViewPager) findViewById(R.id.vp_guide);
		mViewPager.setAdapter(new MyAdapter());
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				 int len = (int) (mPointWidth * arg1)+arg0 * mPointWidth ;
		            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewBluePoint.getLayoutParams();// 获取当前蓝点的布局参数
		            params.leftMargin = len;// 设置左边距
		            viewBluePoint.setLayoutParams(params);// 重新给蓝点设置布局参数
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
		//获得两个点之间的距离
		mLinearLayout.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
			
			@Override
			public void onGlobalLayout() {
				// TODO Auto-generated method stub
				mLinearLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                mPointWidth = mLinearLayout.getChildAt(2).getLeft()-mLinearLayout.getChildAt(0).getLeft();	
			}
		});
	}

	class MyAdapter extends PagerAdapter {

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

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;
		}

		@Override

		public void destroyItem(ViewGroup view, int position, Object object) {

			view.removeView(mView[position]);

		}

		// 当要显示的图片可以进行缓存的时候，会调用这个方法进行显示图片的初始化，我们将要显示的ImageView加入到ViewGroup中，然后作为返回值返回即可

		@Override

		public Object instantiateItem(ViewGroup view, int position) {

			view.addView(mView[position]);

			return mView[position];

		}
	}
}

主布局代码：

<?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="match_parent" >

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

    <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_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            <ImageView 
                android:id="@+id/imgaeview1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/agree_normal"
                />
            <View 
                android:layout_width="50dp"
                android:layout_height="1dp"
                />
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/agree_normal"
                />
        </LinearLayout>

        <ImageView
            android:id="@+id/view_blue_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/agree_press" />
    </RelativeLayout>

</RelativeLayout>