核心类
1.MagicIndicator
这个类继承自FrameLayout,主要用于加载自定义的控件到UI上，通过addView方法
2.ViewPagerHelper
这个类只有一个静态方法，就是bind方法，就是将ViewPager与MagicIndicator绑定。怎么进行绑定呢？
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
ViewPager通过addOnPageChangeListener方法，它有三种滑动状态。并将它分发到MagicIndicator中，MagicIndicator还要转发到自定义控件中
3.自定义控件
根据不同的需求，写出不同的自定义控件，这个应该是实现起来最难的。通过MagicIndicator来显示在视图上，通过ViewPager的滑动事件来更改自定义控件的状态
实践
这里我只讲一种自定义控件，就是自定义的指示器（CircleNavigator）
1.我认为应该先从ViewPagerHelper开始，这里是一个切入点，联系这MagicIndicator与ViewPager，就一个静态方法bind
作用：把ViewPager的滑动事件分发到MagicIndicator中
这样就很巧妙地将两者联系起来
public class ViewPagerHelper {
static void bind(final MagicIndicator indicator, ViewPager viewPager) {
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//开始分发
indicator.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
@Override
public void onPageSelected(int position) {
indicator.onPageSelected(position);
}
@Override
public void onPageScrollStateChanged(int state) {
indicator.onPageScrollStateChanged(state);
}
});
}
}
2.应该谈谈MagicIndicator，继承自FrameLayout，因为FrameLayout比较“干净”。
作用有二：
a. 通过setNavigator方法设置自定义控件，其实大概就是通过addView方法来实现的。
b.转发滑动事件到自定义控件中，这里需要判断自定义控件是否为空。
这里用了面向对象的一种原则：大名应该是叫里氏替换原则
就是说嘛：自定义控件不止一种，为了统一适配各种自定义的控件，应该要定义一个接口，使得各个自定义的控件实现这个接口，然后在一些方法中使用接口，而不是使用自定义控件的本名。
比如说：setNavigator方法
public void setNavigator(IPageNavigator navigator) {
//先删除再添加
removeAllViews();
mNavigator = navigator;
if (mNavigator instanceof View) {
LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
//添加子view，并设置了它的大小
//从这里可以看出来是在MagicIndicator上添加了一个自定义控件（指示器）
addView((View) mNavigator, lp);
}
}
public interface IPageNavigator {
//正好对应ViewPager的那三个方法
void onPageScrolled(int position, float positionOffset, @Px int positionOffsetPixels);
void onPageSelected(int position);
void onPageScrollStateChanged(int state);
}
3.前面说的是框架的思想
接下来应该说说自定义view的实现（CircleNavigator）
首先要实现IPageNavigator接口，到这里你应该大概明白了这个框架是怎么实现的，应该是明白了这个框架所用到的某种“套路“（方法）。
如果这种思想理解了，那么难度的话，就只有如何写自定义控件了。
自定义指示器，包括指示器个数，是否跟随手指滑动，指示器颜色等等。
怎么自定义这个控件呢？（自定义的指示器）
1.首先，这里要有自定义控件的三部曲
onMeasure方法，测量它所需要的整体大小
onLayout方法，本是用于布局摆放，这里只是测量每个指示器的圆心坐标，并将它保存在List中。
onDraw方法，用于绘制，包括绘制每个圆形指示器，还有一个可移动的实心圆形指示器
2.如果你还要触摸指示器，使ViewPager跳转到与指示器对应的Item，那么还要重写它的onTouchEvent方法。
产生的效果为：点击某个指示器------>选择ViewPager相应的Item。
3.实现IPageNavigator接口中的三个方法
产生的效果：滑动ViewPager ----> 选择相应的指示器（就是那个实心的）
4.封装呗，就是把那些自定义的属性从外部传进来，看你想要什么属性从外部传进来，若你想做的更加完美些，可以用Build设计模式来封装。
当然，其中还是有许多细节的地方
话不多说，直接上代码：
自定义控件需要用到的属性（可以自己设置固定的值，或由外部传入）及构造方法，初始化某些属性
//圆半径，水平间隔，画笔的线宽
public int circleRadius, horizontalSpacing, strokeWidth;
public Paint mPaint;
//画笔的颜色，这里是由外部传一个颜色过来
public int color;
//圆的数量
public int circleCount;
//储存每一个圆心的坐标
public List<PointF> mList = new ArrayList<>();
//指示器（可移动的那个实心圆）的当前position
public int mCurIndex = 0;
//当前指示器的横坐标的值
public float mCurIndicatorX;
//是否跟随手指移动，这里我也是由外部来控制是否跟随
public boolean isFollowHand = true;
//插值器，在onPageScrolled中要用到
public Interpolator mInterpolator = new LinearInterpolator();
//构造方法
.......
//初始化的属性
private void init(Context context) {
circleRadius = UIUtil.dip_px(3, context);
horizontalSpacing = UIUtil.dip_px(8, context);
strokeWidth = UIUtil.dip_px(1, context);
mPaint = new Paint();
Log.d(TAG, "init: ");
}
自定义控件的三部曲
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//Log.d(TAG, "onMeasure: ");
setMeasuredDimension(getMeasureWidth(widthMeasureSpec), getMeasureHeight(heightMeasureSpec));
}
/**
* @param widthMeasureSpec
* @return
*/
private int getMeasureWidth(int widthMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int mode = MeasureSpec.getMode(widthMeasureSpec);
int realWidth = 0;
switch (mode) {
case MeasureSpec.EXACTLY:
realWidth = width;
break;
case MeasureSpec.AT_MOST:
case MeasureSpec.UNSPECIFIED:
//所有直径+所有线宽+所有水平间隔+左右padding
realWidth = 2 * circleRadius * circleCount + (circleCount - 1) * horizontalSpacing + 2 * strokeWidth * circleCount+ getPaddingLeft()
+ getPaddingRight();
break;
default:
break;
}
return realWidth;
}
private int getMeasureHeight(int heightMeasureSpec) {
int height = MeasureSpec.getSize(heightMeasureSpec);
int mode = MeasureSpec.getMode(heightMeasureSpec);
int realHeight = 0;
switch (mode) {
case MeasureSpec.EXACTLY:
realHeight = height;
break;
case MeasureSpec.AT_MOST:
case MeasureSpec.UNSPECIFIED:
realHeight = 2 * circleRadius + 2 * strokeWidth + getPaddingBottom() + getPaddingTop();
break;
default:
break;
}
return realHeight;
}
onMeasure方法中至于为什么要分三种情况，自己找一个系统的源码看看，或者直接上网搜索。可以看一下这篇博客，讲的挺好的。博客地址
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
Log.d(TAG, "onLayout: ");
preparePoints();
}
/**
* 准备好圆心的坐标
*/
private void preparePoints() {
int width = getPaddingLeft() + strokeWidth + circleRadius;
Log.d(TAG, "preparePoints: " + "getPaddingLeft: " + getPaddingLeft());
int spacing = 2 * circleRadius + horizontalSpacing + 2 * strokeWidth;
int height = (int) (getHeight() / 2 + 0.5f);
for (int i = 0; i < circleCount; i++) {
PointF pointF = new PointF(width, height);
mList.add(pointF);
width += spacing;
}
//在onDraw方法之前，要得到第一次的mCurIndicatorX，因为mCurIndicatorX初始化是为零的.
//但这个index不一定是0， 因为如果 旋转屏幕，按Home键 的话，要保存的应该是当前index也就是（mCurIndex）。
mCurIndicatorX = mList.get(mCurIndex).x;
Log.d(TAG, "preparePoints: " + mList.size());
}
这里有一个需要注意的地方，为什么第一个圆心坐标不是在最左边，为什么整个圆心坐标会显示在中间位置？
因为在布局文件中：
<com.example.amazingindicator.MagicIndicator
android:id="@+id/magic_indicator"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
@Override
protected void onDraw(Canvas canvas) {
Log.d(TAG, "onDraw: ");
mPaint.setColor(color);
drawCircles(canvas);
drawIndicator(canvas);
}
private void drawCircles(Canvas canvas) {
for (int i = 0; i < circleCount; i++) {
PointF pointF = mList.get(i);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(strokeWidth);
canvas.drawCircle(pointF.x, pointF.y, circleRadius, mPaint);
}
}
/**
* 画的是那个可移动的那个实心圆
* @param canvas
*/
private void drawIndicator(Canvas canvas) {
int height = (int) (getHeight() / 2 + 0.5f);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(mCurIndicatorX, height, circleRadius, mPaint);
Log.d(TAG, "drawIndicator: " + mCurIndicatorX);
}
画图没什么需要说的地方
指示器是否可点击，也可以由外部封装
重写onTouchEvent方法
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mDownX = x;
mDownY = y;
return true;
case MotionEvent.ACTION_UP:
//listener自己写一个，就是实现点击事件的
if (mListener != null) {
//判断按下与抬起的位置是否相同
if (x - mDownX == 0 && y - mDownY == 0) {
float maxValue = Float.MAX_VALUE;
int index = 0;
//通过for循环，找到最接近你按下的那个点。
for (int i = 0; i < circleCount; i++) {
int initPosition = (int) mList.get(i).x;
//一旦大于了maxValue，那么之前那个点是最接近的了，因为后面的initPosition会越来越大。
if (Math.abs(initPosition - x) < maxValue) {
maxValue = Math.abs(initPosition - x);
index = i;
}
}
mListener.onClick(index);
}
}
return true;
default:
break;
}
return super.onTouchEvent(event);
}
实现接口中的方法，及自定义的方法（用来传入属性值）
在接口方法中处理了是否跟随手指移动
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.d(TAG, "onPageScrolled: ");
if (isFollowHand) {
//因为log中：
//D/CircleNavigator: onPageScrolled:
//D/CircleNavigator: onLayout:
if (mList.isEmpty()) {
return;
}
int curPosition = Math.min(circleCount - 1, position);
int nextPosition = Math.min(circleCount - 1, position + 1);
float curWidth = mList.get(curPosition).x ;
float nextWidth = mList.get(nextPosition).x;
Log.d(TAG, "onPageScrolled: " + curPosition + "---" + nextPosition);
//positionOffset： [0，1）中的值指示与位置页面的偏移量。
//滑动时当前位置=上一个指示器的位置+间隔*插值器的百分比
mCurIndicatorX = curWidth + (nextWidth - curWidth) * mInterpolator.getInterpolation(positionOffset);
invalidate();
}
}
@Override
public void onPageSelected(int position) {
Log.d(TAG, "onPageSelected: ");
mCurIndex = position;
if (!isFollowHand) {
mCurIndicatorX = mList.get(position).x;
invalidate();
}
}
@Override
public void onPageScrollStateChanged(int state) {
Log.d(TAG, "onPageScrollStateChanged: ");
}
public void setIsFollowHand(boolean following) {
isFollowHand = following;
invalidate();
}
public void setCircleCount(int circleCount) {
this.circleCount = circleCount;
invalidate();
}
public void setColor(int color) {
this.color = color;
invalidate();
}
注意：每个方法都要调用invalidate()方法，因为要刷新视图
写在结尾
如果对这个已经掌握的很好了，建议大家看一下Google的TabLayout，它也有一个方法，用于与ViewPager进行绑定，可以看看它是如何写的，与这里有什么不同
mTableLayout.setupWithViewPager(mViewPager);