MagicIndicator这个开源框架是怎么写的

• 核心类
• 实践
• 写在结尾

核心类

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));
    }

    
    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);
        }
    }

    
    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);