虽然在android5.0中design中有了TabLayout来实现ViewPager的Indicator,简单好用。但这个是我自己实现的,学习了很多,记录在这里。效果图:


第一步
新建一个类继承LinearLayout,用来绘制指示器,及提供Viewpager滑动时重绘指示器的方法:
public class ViewPagerIndicator extends LinearLayout{
//画笔
private Paint mPaint;
//用来画一条线
private Path mPath;
//绘制线的宽度
private int mLineWidth;
//线的初始位置
private int mInitTranslationX;
//移动位置
private int mTranslationX;
//子控件
private View mChildView;
public ViewPagerIndicator(Context context) {
super(context,null);
}
public ViewPagerIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.parseColor("#ffba00"));
mPaint.setStrokeWidth(3);
mPaint.setStyle(Paint.Style.STROKE);
}
//完成布局后获取子控件
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mChildView = getChildAt(0);
}
//在onSizeChanged中获取宽和初始位置,并根据位置初始化线
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mTranslationX = 0;
mLineWidth = mChildView.getMeasuredWidth();
mInitTranslationX = (w/getChildCount()-mLineWidth)/2;
initLine();
}
//初始化线
private void initLine(){
mPath = new Path();
mPath.moveTo(0,0);
mPath.lineTo(mLineWidth,0);
}
//绘制线
@Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
//移动到该坐标后开始绘制
canvas.translate(mInitTranslationX + mTranslationX,getHeight());
canvas.drawPath(mPath,mPaint);
canvas.restore();
super.dispatchDraw(canvas);
}
////在viewpager的onPageScrolled监听方法中调用此方法。viewPager滑动时mTranslationX的距离跟着变化,实现线的滑动,position,offset由onPageScrolled传值
public void scroll(int position ,float offset){
int tabWidth = getWidth()/getChildCount();
mTranslationX =(int) (tabWidth * offset +tabWidth * position);
//请求重绘,调用dispatchDraw方法
invalidate();
}
}