废话少说，先上图：
（请看底部的4个点）
忘记是在那个APP上看到ViewPager底部的圆点指示器可以随着滚动而滚动的效果，便开始思考要怎么实现，最终发现效果实现很简单，拿来练手自定义View挺不错的。
写码之前：
写代码之前必须至少先有大概的思路，而且不要想到一点就开始写，必须对整体都大概心里有数再开始写。比如在实现这个效果时，刚开始我是想着重写线性布局，然后动态添加圆点，通过margin控制间隔。但是我发现这种办法在滚动时的处理逻辑编写起来比较复杂，既然只是几个圆点而已，直接继承View用画的方式画出来更简单。最终写出来的类加上一大把自动生成的代码，也才一百多行。
写代码并不难，想到正确的思路才难。
高清源码：
（1）初始化
public AnimDian(Context context, AttributeSet attrs) { super(context, attrs); TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.AnimDian); dianCount = array.getInteger(R.styleable.AnimDian_dian_count, 5); dianColor = array.getColor(R.styleable.AnimDian_dian_color, 0XFFFF0000); dianBgColor = array.getColor(R.styleable.AnimDian_dian_bg_color, 0X88FFFFFF); margin = array.getInteger(R.styleable.AnimDian_dian_margin, 20); dianSize = array.getInteger(R.styleable.AnimDian_dian_size, 20); array.recycle(); init(); } private void init() { // 初始化两支画笔 dianPaint = new Paint(); dianPaint.setAntiAlias(true); dianPaint.setColor(dianColor); bgPaint = new Paint(); bgPaint.setAntiAlias(true); bgPaint.setColor(dianBgColor); }（2）测量大小
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 测量自身大小 // 宽=点的宽度(直径)*点的个数+点之间的距离*（点的个数-1） int width = dianSize * dianCount + margin * (dianCount - 1); // 高=点的高度(直径) int height = dianSize; int wMeasureSpec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY); int hMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY); // 设置计算结果 setMeasuredDimension(wMeasureSpec, hMeasureSpec); }这个View的大小测量很简单，我也不浪费口水了。
（3）画
写一个自定义View是一个试验的过程，很少有一次性过把整个效果写完的，这里我们先考虑静态的，即没有滚动效果的该怎么写，然后再考虑怎么加上滚动效果。
先是静态的实现：
public void draw(Canvas canvas) { // 画背景点 for (int i = 0; i < dianCount; i++) { drawBgDian(canvas, i); } //画选中状态的点 if (selectPosition > -1) { drawDian(canvas); } }注意：后画的东西会遮挡住先画的。
这里稍微复杂一点的就是位置的计算，不过只要认真思考现在已有的数据，以及是否有什么规律，画点草图，一般都不难解决。
画背景点：
private void drawBgDian(Canvas canvas, int i) { canvas.drawCircle((dianSize + margin) * i + dianSize / 2, dianSize / 2, dianSize / 2, bgPaint); }圆心的Y坐标容易算，但X坐标需要画点草图想一下，让你的大脑动一下吧。
画选中状态的点跟背景点一样，只是只画一个，且用了不用颜色的画笔而已：
private void drawDian(Canvas canvas) { canvas.drawCircle((dianSize + margin) * selectPosition + dianSize / 2, dianSize / 2, dianSize / 2, dianPaint); }就这样，静态效果已经完成了。现在开始思考怎么实现滚动效果：
首先，要让红点滚动，必须有滚动的数据，比如滚动的方向，滚动的距离。于是得先得到滚动的数据来源。
因为我们是用在ViewPager上的，所以很容易想到给ViewPager设置OnPageChangeListener，再把数据传给我们的AnimDian：
public void onPageScrolled(int arg0, float arg1, int arg2) { animDian.onPageScrolled(arg0, arg1, arg2); }接下来就得搞清楚3个参数的含义，打印一下数值，得出结果是：
小结：
这里的返回参数并不受滑动方向的影响，一直以左边作为基准，在滑动时会有两个page显示在屏幕上：
arg0:左边page的index
arg1:左边page没有显示出来的部分的百分比，或者理解为右边page显示出来的部分的百分比
arg2:同arg1，不过是具体的像素值
我们这里只需要arg0和arg1，像素值我们用不着。
有了滚动的状态数据，就可以计算滚动点的位置了：
public void onPageScrolled(int arg0, float arg1, int arg2) { if (arg1 > 0 && arg1 < 1) { scrollState = STATE_SCROLLING; // 滚动时计算前景点距离左边的距离 scrollDianCX = (dianSize + margin) * (float) (arg0 + arg1) + dianSize / 2; invalidate(); } }知道参数含义后怎么计算位置，还是需要我们再动下脑。
得到位置后就可以画出滚动点了：
private void drawScrollDian(Canvas canvas) { canvas.drawCircle(scrollDianCX, dianSize / 2, dianSize / 2, dianPaint); }当然在滚动时，不应该画出选中位置的点，所以修改draw方法逻辑：
public void draw(Canvas canvas) { // 画背景点 for (int i = 0; i < dianCount; i++) { drawBgDian(canvas, i); } // 如果不是在滚动状态，画选中位置的前景点 if (selectPosition > -1 && scrollState != STATE_SCROLLING) { drawDian(canvas); } // 在滚动状态，画滚动点 if (scrollState == STATE_SCROLLING) { drawScrollDian(canvas); } }然后在滚动结束和选中位置发生改变时，同样要通知我们的AnimDian：
public void onPageScrollStateChanged(int arg0) { //arg0==0表示滚动状态为结束 if (arg0 == 0) { animDian.onPageScrollEnd(); } } public void onPageSelected(int arg0) { animDian.setSelectPosition(arg0); }在滚动结束时要修改AnimDian的滚动状态：
public void onPageScrollEnd() { scrollState = STATE_READY; invalidate(); }同样，在选中位置改变时也要进行处理：
public void setSelectPosition(int selectPosition) { this.selectPosition = selectPosition; //外部可以设置监听选中位置的改变，一般用不着，直接监听ViewPager的就行了 if (mListener != null) mListener.onSelectChange(selectPosition); //如果当前正在滚动，就没必要请求重绘了，等到滚动结束后会去请求重绘的 if (scrollState == STATE_SCROLLING) return; invalidate(); }至此，这个自定义View就完成了。虽然有点简单，但是作为新手刚开始还是不要挑战太复杂的自定义View，先写点简单的找点成就感和自信，多思考和理解下原理。
准备回家过年了！！！
DEMO下载