最近學習了怎麼自己畫Viewpager指示器的形狀。

1. 新建立一個ViewPagerIndicator類 繼承自LinearLayout

   • 初始化Paint例項

   在它的含有兩個引數的構造方法內初始化要畫的圖形所需要的工具，例如：我們要畫一個三角形。首先我們要有一個paint類例項上程式碼：

 public ViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true
 
);

        //@ parseColor
        // * Parse the color string, and return the corresponding color-int.
        mPaint.setColor(Color.parseColor("#FFFFFFFF"));

        mPaint.setStyle(Paint.Style.FILL);

        mPaint.setPathEffect(new CornerPathEffect(3));

• 覆寫onSizeChanged(int w, int h, int oldw, int oldh)這個方法會在View 的大小發生變化的時候呼叫，所以在這裡設定三角形的長和寬並且初始化三角形。

  mTriangleWidth = (int) (w / mTabVisibleCount *                  RADIO_TRIANGLE);
  mTriangleHeight = mTriangleWidth / 2;
  
  mInitTanslateX = w / 2 / mTabVisibleCount - mTriangleWidth / 2;
  
  initTriangle();
  

• 畫三角形的時候要用到path

 mPath = new Path();
        //@param x The x-coordinate of the start of a new contou(新輪廓)
        mPath.moveTo(0
 
, 0);

        mPath.lineTo(mTriangleWidth, 0);

        mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight);

        mPath.close();

-覆寫ondispatch方法。在這個方法裡繪製三角形

@Override
    protected void dispatchDraw(Canvas canvas) {

        canvas.save();

        //畫筆的起點位置
        canvas.translate(mInitTanslateX + mTranslateX, getHeight());

        canvas.drawPath(mPath, mPaint);

        canvas.restore();

        super.dispatchDraw(canvas);
        Log.d(TAG, "dispatchDraw: ");
    }

這樣三角形的畫出來了，但是現在這個三角形還不可以跟隨頁面滑動而動。

2.實現指示器跟隨手指聯動

需要addOnPageChangeListener,內部new 一個ViewPager.OnPageChangeListener()，在它的onpageScrolled這個回撥方法裡寫怎麼跟隨手指移動的方法，如下：

int tabWidth = getWidth() / mTabVisibleCount;
        mTranslateX = (int) (tabWidth * (position + positionOffset));
        //tabwidth 跟著一起聯動
        if (position >=mTabVisibleCount - 2 && positionOffset > 0 &&
                getChildCount() > mTabVisibleCount) {
            if (mTabVisibleCount != 1) {
                //隱藏的position
                int hidTabCount = position - (mTabVisibleCount - 2);
                this.scrollTo(
                        (hidTabCount * tabWidth + (int) (tabWidth * positionOffset)), 0);
            } else {
                this.scrollTo((position * tabWidth + (int) (tabWidth * positionOffset)), 0);

            }

        }
        invalidate();

3.實現tab高亮顯示和點選事件

首先寫好一個設定tab文字高亮的方法，然後將其加到 onPageSelected內，意思是，到當前頁被選中時，tab文字變高亮。
點選時間在建立tab的時候呼叫。這個新增到自動建立tab 的方法內，和載入完xml檔案後的方法內（這個在下篇文章中詳細講）.

private void highLightTextView(int position){
        resetTextViewColor();
        View view = getChildAt(position);

        if (view instanceof TextView){
            ((TextView) view).setTextColor(TEXT_COLOR_LIGHT);
        }

private void setTabOnclick() {
        int size = getChildCount();
        for (int i = 0; i < size; i++) {
            View view = getChildAt(i);
            final int j = i;
            if (view instanceof TextView) {
                view.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mViewPager.setCurrentItem(j);
                    }
                });
            }
        }
    }