众所周知，很多APP都是带引导页的，也就是传说中的ViewPager实现的，当然，我们也可以看到，在引导页的下方有小圆点指示器，小圆点指示器有两种，一种是跳跃式小圆点，也是最常见的一种，另一种就是本篇博客要讲的跟随式小圆点。
原理：跟随式效果其实就是一个小红点事先覆盖在第一页的小灰点上面，当滑动引导页的时候，小红点根据滑动的距离而不断的改变平移距离。当滑动到第二页的时候，小红点也正好覆盖住了第二个小灰点。
OK！上代码！先看一下xml里的小圆点布局，我是xml实现的小圆点，当然你也可以动态添加小圆点实现效果：
<?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" tools:context=".activity.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>
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:layout_marginBottom="60dp">
<LinearLayout android:id="@+id/linearlayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/point_gray"/>
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:src="@drawable/point_gray"/>
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:src="@drawable/point_gray"/>
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:src="@drawable/point_gray"/>
</LinearLayout>
<ImageView android:id="@+id/point_red" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/point_red" />
</RelativeLayout>
</RelativeLayout>
这样，一打开引导页的时候，小红点就事先默认覆盖住了第一个小灰点。
接下来看核心代码：
/** * 当底部红色小圆点加载完成时测出两个小灰点的距离，便于计算后面小红点动态移动的距离 */
point_red.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
distance = linearlayout.getChildAt(1).getLeft() - linearlayout.getChildAt(0).getLeft();
}
});
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//测出页面滚动时小红点移动的距离，并通过setLayoutParams(params)不断更新其位置
float leftMargin = distance * (position + positionOffset);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) point_red.getLayoutParams();
params.leftMargin = Math.round(leftMargin);
point_red.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});代码里有注释说明，相信你能看懂！
附上完整的MainActivity代码：
package com.example.lenovo.viewpager.activity;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import com.example.lenovo.viewpager.R;
import com.example.lenovo.viewpager.adapter.GuidePagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends Activity {
private List<View> viewList;
private ViewPager viewPager;
private ImageView point_red;
private int distance;
private LinearLayout linearlayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
viewList.add(getLayoutInflater().inflate(R.layout.welcome_one,null));
viewList.add(getLayoutInflater().inflate(R.layout.welcome_two,null));
viewList.add(getLayoutInflater().inflate(R.layout.welcome_three,null));
viewList.add(getLayoutInflater().inflate(R.layout.welcome_four,null));
viewPager.setAdapter(new GuidePagerAdapter(viewList));
/** * 当底部红色小圆点加载完成时测出两个小灰点的距离，便于计算后面小红点动态移动的距离 */
point_red.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
distance = linearlayout.getChildAt(1).getLeft() - linearlayout.getChildAt(0).getLeft();
}
});
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//测出页面滚动时小红点移动的距离，并通过setLayoutParams(params)不断更新其位置
float leftMargin = distance * (position + positionOffset);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) point_red.getLayoutParams();
params.leftMargin = Math.round(leftMargin);
point_red.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initView() {
viewList = new ArrayList<>();
viewPager = (ViewPager) findViewById(R.id.viewpager);
point_red = (ImageView) findViewById(R.id.point_red);
linearlayout = (LinearLayout) findViewById(R.id.linearlayout);
}
}