指示器的標籤分為兩種情形，一種是固定的一般3~5個標籤，另一種的移動的標籤；開發中經常會使用MD風格的TabLayout控制元件，這個控制元件什麼都很好，就是指示器的下滑線和文字不能夠對齊，這一點用過的同學都會知道的，我也在網上找了好久，也找到不到現成的，只好自己動手來寫一個啦！
先宣告一下，我是吧指示器標籤分兩種情形來寫的，固定和不固定，沒有合併，因為不是繼承同一個控制元件；另外要多看看TabLayout的原始碼，對於自定義這個控制元件很有好處，可以多多借鑑裡面的實現；
最下面可以下載程式碼，有問題可以留言交流；
說了這麼多先看看固定的標籤的效果：(Tab是固定的效果)

這種效果實現的主要步驟思路：
因為這種標籤固定
1.首先要把所有的標籤文字全部放到一個容器裡面,寬度按個數均分，容器選水平LinearLayout

      /**
     * 把資料集合設定成Tab標籤
     */
    public void setTabTitle(List<String> list) {
        if (list == null)
            return;
        mTabTitleList = list;//tab資料來源
        mTabCount = list.size();//tab的個數
        for (int i = 0; i < list.size(); i++) {
            String text = list.get(i);
            addView(generateText(text));//新增到容器中
 

        }
        setTabOnClickListener();//設定點選事件
    }

    /**
     * 自動生成TextView
     */
    public TextView generateText(String text) {
        TextView textView = new TextView(getContext());
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, mTextSize);
        textView.setTextColor(mNormalColor);
        textView.setGravity(Gravity.CENTER);
        textView.setText(text);
        LinearLayout.LayoutParams lp = new
 
 LinearLayout.LayoutParams(0,
                LinearLayout.LayoutParams.MATCH_PARENT, 1);
        textView.setLayoutParams(lp);
        return textView;
    }

    /**
     * 每一個tab的點選事件
     */
    public void setTabOnClickListener() {
        if (mTabTitleList != null) {
            for (int i = 0; i < mTabCount; i++) {
                TextView textView = (TextView) getChildAt(i);
                textView.setOnClickListener(new OnClickListener() {

                    @Override
                    public void onClick(View v) {
                        int index = indexOfChild(v);
                        if (mViewPager != null)
                            mViewPager.setCurrentItem(index, true);
                    }
                });
            }
        }
    }

上面程式碼很簡單就是把根據文字生成了TextView新增到LinearLayout裡面，並且均分；這一步設定好了以後，下面就開始關聯ViewPager;

    private RectF rectF = new RectF();//要繪製的矩形

    //我們是根據下面兩個引數來動態計算並繪製
    private int position;//ViewPager的裡面的position
    private float ration;//滑動的百分比

    /**
     * 關聯到ViewPager
     */
    public void setViewPager(ViewPager viewPager) {
        this.mViewPager = viewPager;
        this.mViewPager.addOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int pos) {
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                position = arg0;
                ration = arg1;
                //這是為了找出指示器大概會滑動到那個Tab位置
                int pos = Math.round(arg0 + arg1);
                for (int i = 0; i < mTabCount; i++) {
                    TextView textView = (TextView) getChildAt(i);
                    if (i == pos) {
                        textView.setTextColor(mSelectedColor);
                    } else {
                        textView.setTextColor(mNormalColor);
                    }
                }
                //重繪
                postInvalidate();
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

    }

這裡我們主要在onPageScrolled這個方法裡面去做一下更新的操作；其中
int pos = Math.round(arg0 + arg1);這一行程式碼是為了讓ViewPager切換到一半的是時候會顯示另一個tab被選中，這一點我也是從原始碼裡面看到的，這裡借鑑了一下；最後重新繪製；

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        if (mTabTitleList != null && mTabCount > 0) {
            String text = mTabTitleList.get(position);//拿到文字
            int textWidth = (int) mPaint.measureText(text);//測量一下寬度
            int perWidth = mViewWidth / mTabCount;//每個Tab的平均寬度

            rectF.set(
                    perWidth * (position + ration) + perWidth / 2 - textWidth / 2,
                    mViewHeight - mPagerIndicatorHeight,
                    perWidth * (position + ration) + perWidth / 2 + textWidth / 2,
                    mViewHeight);
            canvas.drawRect(rectF, mPaint);
        }
    }

這裡重寫一下dispatchDraw方法，在super.dispatchDraw方法裡面是繪製子View,等它們都繪製完畢之後，在進行指示器下面的繪製；這一步不要在onDraw方法裡面繪製，因為LinearLayout本身沒有什麼需要繪製的，只是孩子View需要繪製；即使你繪製了也會被dispatchDraw方法繪製的內容覆蓋；

固定標籤的指示器到這裡就就結束了，還有其他一些初始化的工作這裡不說了；下面我們在來看看不固定的情形，也就是標籤的個數比較多的情形；

上面的情形在寫的過程中，大部分程式碼都是參照TabLayout的，先說一下思路吧：
因為這種標籤可以移動
1.首先要把所有的標籤文字全部放到一個容器裡面,寬度按個數均分，容器選HorizontalScrollView，裡面只能有一個View我選擇LinearLayout
2.要關聯上一個ViewPager，並根據ViewPager的改變動態繪製指示器;
先初始化了程式碼：

    public ViewPagerIndicator_Scroll(Context context, AttributeSet attrs) {
        super(context, attrs);
        setHorizontalScrollBarEnabled(false);// Disable the Scroll Bar
        initPaint();// 初始化畫筆
        /**
         * HorizontalScrollView只能包含一個子View
         */
        mLinearLayout = new LinearLayout(context);
        mLinearLayout.setOrientation(LinearLayout.HORIZONTAL);// 水平方向
        mLinearLayout.setLayoutParams(new HorizontalScrollView.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
        addView(mLinearLayout);//新增
    }

這裡要注意是讓setHorizontalScrollBarEnabled讓滾動條不可用，而且要新增一個孩子容器，
我們把這些標籤全部放到這個孩子容器裡面；
生成文字標籤的程式碼：

    public TextView generateText(String text) {
        TextView textView = new TextView(getContext());
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, mTextSize);
        textView.setTextColor(mNormalColor);
        textView.setGravity(Gravity.CENTER);
        textView.setText(text);
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                (int) mPaint.measureText(text), //寬度最直接使用畫筆測量出來的寬度
                LinearLayout.LayoutParams.MATCH_PARENT);
        lp.setMargins(dp2px(5), 0, dp2px(5), 0);//設定了左右間距，可以自己調整
        textView.setLayoutParams(lp);
        return textView;
    }

寬度我沒有使用Wrap_content那樣會有擠壓，這裡直接使用畫筆測量文字的寬度；
我們將生成的表面新增容器裡面之後，我們最後就是和ViewPager的聯動了

  public void setViewPager(ViewPager viewPager) {
        this.mViewPager = viewPager;
        this.mViewPager.addOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int pos) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }

            @Override
            public void onPageScrolled(int position, float positionOffset,
                                       int positionOffsetPixels) {
                int pos = Math.round(position + positionOffset);
                for (int i = 0; i < mTabCount; i++) {
                    TextView textView = (TextView) mLinearLayout.getChildAt(i);
                    if (i == pos) {
                        textView.setTextColor(mSelectedColor);
                    } else {
                        textView.setTextColor(mNormalColor);
                    }
                }
                setIndicatorPositionFromTabPosition(position, positionOffset);
                scrollTo(calculateScrollXForTab(position, positionOffset), 0);
            }
        });

    }

在onPageScrolled方法中思路內部是這樣的:
1，設定一下目前將要滑動到那個標籤，我們就並做高亮顯示；
2，根據ViewPager位置資訊改變繪製指示器的下劃線；
3，移動當前View的內容，為了更好的展示
這三個步驟，我全部 都是參照的TabLayout的原始碼；我是搞了半天怎麼也行；最後才想著看看人家的程式碼實現；這也算是我的經驗吧；直接使用了程式碼中的演算法後，出來效果就是內容滑動的和下劃線會對齊；就是這麼神奇！！！貼一下程式碼吧：

   public void setIndicatorPositionFromTabPosition(int position, float positionOffset) {
        mSelectedPosition = position;
        mSelectionOffset = positionOffset;
        updateIndicatorPosition();
    }

    private void updateIndicatorPosition() {
        View selectedTitle = mLinearLayout.getChildAt(mSelectedPosition);
        int left, right;

        if (selectedTitle != null && selectedTitle.getWidth() > 0) {
            left = selectedTitle.getLeft();
            right = selectedTitle.getRight();

            if (mSelectionOffset > 0f && mSelectedPosition < mLinearLayout.getChildCount() - 1) {
                // Draw the selection partway between the tabs
                View nextTitle = mLinearLayout.getChildAt(mSelectedPosition + 1);
                left = (int) (mSelectionOffset * nextTitle.getLeft() +
                        (1.0f - mSelectionOffset) * left);
                right = (int) (mSelectionOffset * nextTitle.getRight() +
                        (1.0f - mSelectionOffset) * right);
            }
        } else {
            left = right = -1;
        }
        setIndicatorPosition(left, right);
    }


    void setIndicatorPosition(int left, int right) {
        if (left != mIndicatorLeft || right != mIndicatorRight) {
            mIndicatorLeft = left;
            mIndicatorRight = right;
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }

    private int calculateScrollXForTab(int position, float positionOffset) {

        View selectedChild = mLinearLayout.getChildAt(position);
        View nextChild = position + 1 < getChildCount()
                ? getChildAt(position + 1)
                : null;
        int selectedWidth = selectedChild != null ? selectedChild.getWidth() : 0;
        int nextWidth = nextChild != null ? nextChild.getWidth() : 0;

        // base scroll amount: places center of tab in center of parent
        int scrollBase = selectedChild.getLeft() + (selectedWidth / 2) - (getWidth() / 2);
        // offset amount: fraction of the distance between centers of tabs
        int scrollOffset = (int) ((selectedWidth + nextWidth) * 0.5f * positionOffset);

        return (ViewCompat.getLayoutDirection(this) == ViewCompat.LAYOUT_DIRECTION_LTR)
                ? scrollBase + scrollOffset
                : scrollBase - scrollOffset;

    }