自定义一个简单的viewpagerIndicator

1.自定义类如下

package com.flkeyguard.lockgp.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.baidu.screenlock.core.R;
import com.nd.hilauncherdev.kitset.util.ScreenUtil;

/**简单的viewpager指示器
 * Created by xuqunxing on 2016/9/29.
 */
public class LockGpSimpleViewPagerIndicator extends LinearLayout
{

//	private static final int COLOR_TEXT_NORMAL = R.color.common_tab_select_color;//0xFF000000;
	private static final int COLOR_TEXT_NORMAL = R.color.common_tab_unselect_color_category;
	private static final int COLOR_TEXT_SELECT = R.color.common_tab_select_color;
	private static final int COLOR_INDICATOR_COLOR_SELECT = R.color.common_tab_select_color;

	private int[] mTitles;
	private int mTabCount;
	private int mIndicatorColor = COLOR_INDICATOR_COLOR_SELECT;
	private float mTranslationX;
	private Paint mPaint = new Paint();
	private int mTabWidth;
    private ViewPager mViewPager;

	public LockGpSimpleViewPagerIndicator(Context context)
	{
		this(context, null);
	}

	public LockGpSimpleViewPagerIndicator(Context context, AttributeSet attrs)
	{
		super(context, attrs);
		mPaint.setColor(getContext().getResources().getColor(mIndicatorColor));
		mPaint.setStrokeWidth(9.0F);
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh)
	{
		super.onSizeChanged(w, h, oldw, oldh);
		mTabWidth = w / mTabCount;
	}

	public void setTitles(int[] titles)
	{
		mTitles = titles;
		mTabCount = titles.length;
		generateTitleView();

	}

	public void setIndicatorColor(int indicatorColor)
	{
		this.mIndicatorColor = indicatorColor;
	}

	@Override
	protected void dispatchDraw(Canvas canvas)
	{
		super.dispatchDraw(canvas);
		canvas.save();
		canvas.translate(mTranslationX, getHeight() - 2);
		canvas.drawLine(0, 0, mTabWidth, 0, mPaint);
		canvas.restore();
	}

	public void scroll(int position, float offset)
	{
		/**
		 * <pre>
		 *  0-1:position=0 ;1-0:postion=0;
		 * </pre>
		 */
		mTranslationX = getWidth() / mTabCount * (position + offset);
		invalidate();
	}

	@Override
	public boolean dispatchTouchEvent(MotionEvent ev)
	{
		return super.dispatchTouchEvent(ev);
	}

	private void generateTitleView()
	{
		if (getChildCount() > 0)
			this.removeAllViews();
		int count = mTitles.length;

		setWeightSum(count);
		for (int i = 0; i < count; i++)
		{
			int padding = ScreenUtil.dip2px(getContext(),8);
			TextView tv = new TextView(getContext());
			LayoutParams lp = new LayoutParams(0,LayoutParams.MATCH_PARENT);
			lp.weight = 1;
			tv.setGravity(Gravity.CENTER);
			tv.setTextColor(getContext().getResources().getColor(COLOR_TEXT_NORMAL));
			tv.setText(getContext().getResources().getString(mTitles[i]));
			tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 15);
			tv.setLayoutParams(lp);
			tv.setPadding(padding,padding,padding,padding);
//			TextPaint tp = tv.getPaint();
//			tp.setStyle(Paint.Style.FILL_AND_STROKE);
			//tv.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
			final int finalI = i;
			tv.setOnClickListener(new OnClickListener()
			{
				@Override
				public void onClick(View v)
				{
					setCurrentTextView(finalI);
					if(mViewPager != null){
						mViewPager.setCurrentItem(finalI);
					}
				}
			});
			addView(tv);
		}
	}

	/**
	 * 设置当前的选中的Textview
	 * @param position
     */
	public void setCurrentTextView(int position) {
		if (getChildCount() > 0){
			for(int i = 0 ;i < getChildCount(); i++){
				TextView tv = (TextView) getChildAt(i);
				if(i == position){
					tv.setTextColor(getContext().getResources().getColor(COLOR_TEXT_SELECT));
				}else {
					tv.setTextColor(getContext().getResources().getColor(COLOR_TEXT_NORMAL));
				}
			}
		}
	}

	public void setViewPager(ViewPager mViewPager) {
		this.mViewPager = mViewPager;
	}
}

2.使用方法

mIndicator = (LockGpSimpleViewPagerIndicator) findViewById(R.id.lockgp_acitivyt_wallpager_category_detail_tab);
        mIndicator.setViewPager(detailVp);
        mIndicator.setTitles(detailItem);
        mIndicator.setCurrentTextView(postion);

在viewpager的这个方法中添加下面的代码可以实现下划线跟着滑动距离而偏移的动态效果
@Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if(mIndicator != null){
            mIndicator.scroll(position, positionOffset);
        }
    }

3.效果图