Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高(4)

/**
  * 设置点击事件
  */
 public void setItemClickEvent()
 {
  int cCount = getChildCount();
  for (int i = 0; i < cCount; i++)
  {
   final int j = i;
   View view = getChildAt(i);
   view.setOnClickListener(new OnClickListener()
   {
    @Override
    public void onClick(View v)
    {
     mViewPager.setCurrentItem(j);
    }
   });
  }
 }

这个就更简单了~~就是mViewPager.setCurrentItem(j); 

下面看看onSizeChanged

/**
  * 初始化三角形的宽度
  */
 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh)
 {
  super.onSizeChanged(w, h, oldw, oldh);
  mTriangleWidth = (int) (w / mTabVisibleCount * RADIO_TRIANGEL);// 1/6 of
                  // width
  mTriangleWidth = Math.min(DIMENSION_TRIANGEL_WIDTH, mTriangleWidth);

// 初始化三角形
  initTriangle();

// 初始时的偏移量
  mInitTranslationX = getWidth() / mTabVisibleCount / 2 - mTriangleWidth
    / 2;
 }
 
 /**
  * 初始化三角形指示器
  */
 private void initTriangle()
 {
  mPath = new Path();

mTriangleHeight = (int) (mTriangleWidth / 2 / Math.sqrt(2));
  mPath.moveTo(0, 0);
  mPath.lineTo(mTriangleWidth, 0);
  mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight);
  mPath.close();
 }

onSizeChanged，我们主要是确定三角形的宽度和Path去构造这个三角形。

默认的我们的三角形的底边的宽度为，每个Tab宽度的1/6；当然有个上限是 (int) (getScreenWidth() / 3 * RADIO_TRIANGEL)；【RADIO_TRIANGEL = 1.0f / 6】

这个其实无所谓，主要为了屏幕适配，你可以抽取为自定义属性让用户去设置；

initTriangle()中用Path去构造了一个三角形，这个很简单了~~

这里还初始化了mInitTranslationX，因为一开始显示的就在第一个Tab的中间位置。

三角形初始化完成了，是不是应该去看看它在哪进行绘制的~~

4、dispatchDraw

/**
  * 绘制指示器
  */
 @Override
 protected void dispatchDraw(Canvas canvas)
 {
  canvas.save();
  // 画笔平移到正确的位置
  canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 1);
  canvas.drawPath(mPath, mPaint);
  canvas.restore();

super.dispatchDraw(canvas);
 }

在绘制子View之前，我们先绘制我们的三角形指示器~~ 

可以看到，我们通过canvas.translate移动画布，来把指示器画到了指定的位置~~当然了，记得save和restore.

看到，我们这里还有个mTranslationX，这个是动态变化的，后面会介绍~~ 

三角形绘制完成了，应该到了，跟随ViewPager移动了把~~当然了，这里肯定得先绑定ViewPager，不然怎么跟随

5、setViewPager 

// 设置关联的ViewPager
 public void setViewPager(ViewPager mViewPager, int pos)
 {
  this.mViewPager = mViewPager;

mViewPager.setOnPageChangeListener(new OnPageChangeListener()
  {
   @Override
   public void onPageSelected(int position)
   {
    // 设置字体颜色高亮
    resetTextViewColor();
    highLightTextView(position);

// 回调
    if (onPageChangeListener != null)
    {
     onPageChangeListener.onPageSelected(position);
    }
   }

@Override
   public void onPageScrolled(int position, float positionOffset,
     int positionOffsetPixels)
   {
    // 滚动
    scroll(position, positionOffset);

// 回调
    if (onPageChangeListener != null)
    {
     onPageChangeListener.onPageScrolled(position,
       positionOffset, positionOffsetPixels);
    }

}

@Override
   public void onPageScrollStateChanged(int state)
   {
    // 回调
    if (onPageChangeListener != null)
    {
     onPageChangeListener.onPageScrollStateChanged(state);
    }

}
  });
  // 设置当前页
  mViewPager.setCurrentItem(pos);
  // 高亮
  highLightTextView(pos);
 }

很简单的代码，我们关联上ViewPager以后，立刻注册setOnPageChangeListener，关于指示器的跟随移动，核心代码是：onPageScrolled中的

// 滚动
scroll(position, positionOffset);这行后面介绍~