Android导航滑动文字渐变+底部指示条

1.XML文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:lv="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:orientation="horizontal">

        <com.cysd.fr_edu.view.ColorTrackView
            android:id="@+id/microcontest_first"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            lv:progress="1"
            lv:text="@string/Preliminaries"
            lv:text_change_color="@color/black"
            lv:text_origin_color="@color/gray"
            lv:text_size="12sp" />

        <com.cysd.fr_edu.view.ColorTrackView
            android:id="@+id/microcontest_second"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            lv:text="@string/Finals"
            lv:text_change_color="@color/black"
            lv:text_origin_color="@color/gray"
            lv:text_size="12sp" />
    </LinearLayout>

    <ImageView
        android:id="@+id/microcontest_tab_img"
        android:layout_width="100dp"
        android:layout_height="2dp"
        android:scaleType="center"
        android:src="@color/blue" />

    <android.support.v4.view.ViewPager
        android:id="@+id/microcontest_vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"></android.support.v4.view.ViewPager>

</LinearLayout>

2.java代码部分：

（1）.文字渐变核心类

public class ColorTrackView extends View {

	private int mTextStartX;
	private int mTextStartY;

	public enum Direction {
		LEFT, RIGHT, TOP, BOTTOM;
	}

	private int mDirection = DIRECTION_LEFT;

	private static final int DIRECTION_LEFT = 0;
	private static final int DIRECTION_RIGHT = 1;
	private static final int DIRECTION_TOP = 2;
	private static final int DIRECTION_BOTTOM = 3;

	public void setDirection(int direction) {
		mDirection = direction;
	}

	private String mText = "";
	private Paint mPaint;
	private int mTextSize = sp2px(30);

	private int mTextOriginColor = 0xff000000;
	private int mTextChangeColor = 0xffff0000;

	private Rect mTextBound = new Rect();
	private int mTextWidth;
	private int mTextHeight;

	private float mProgress;

	public ColorTrackView(Context context) {
		super(context, null);
	}

	public ColorTrackView(Context context, AttributeSet attrs) {
		super(context, attrs);

		mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

		TypedArray ta = context.obtainStyledAttributes(attrs,
				R.styleable.ColorTrackView);
		mText = ta.getString(R.styleable.ColorTrackView_text);
		mTextSize = ta.getDimensionPixelSize(
				R.styleable.ColorTrackView_text_size, mTextSize);
		mTextOriginColor = ta.getColor(
				R.styleable.ColorTrackView_text_origin_color, mTextOriginColor);
		mTextChangeColor = ta.getColor(
				R.styleable.ColorTrackView_text_change_color, mTextChangeColor);
		mProgress = ta.getFloat(R.styleable.ColorTrackView_progress, 0);

		mDirection = ta
				.getInt(R.styleable.ColorTrackView_direction, mDirection);

		ta.recycle();

		mPaint.setTextSize(mTextSize);

	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

		measureText();

		int width = measureWidth(widthMeasureSpec);
		int height = measureHeight(heightMeasureSpec);
		setMeasuredDimension(width, height);

		mTextStartX = getMeasuredWidth() / 2 - mTextWidth / 2;
		mTextStartY = getMeasuredHeight() / 2 - mTextHeight / 2;
	}

	private int measureHeight(int measureSpec) {
		int mode = MeasureSpec.getMode(measureSpec);
		int val = MeasureSpec.getSize(measureSpec);
		int result = 0;
		switch (mode) {
		case MeasureSpec.EXACTLY:
			result = val;
			break;
		case MeasureSpec.AT_MOST:
		case MeasureSpec.UNSPECIFIED:
			result = mTextBound.height();
			result += getPaddingTop() + getPaddingBottom();
			break;
		}
		result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;
		return result;
	}

	private int measureWidth(int measureSpec) {
		int mode = MeasureSpec.getMode(measureSpec);
		int val = MeasureSpec.getSize(measureSpec);
		int result = 0;
		switch (mode) {
		case MeasureSpec.EXACTLY:
			result = val;
			break;
		case MeasureSpec.AT_MOST:
		case MeasureSpec.UNSPECIFIED:
			// result = mTextBound.width();
			result = mTextWidth;
			result += getPaddingLeft() + getPaddingRight();
			break;
		}
		result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;
		return result;
	}

	private void measureText() {
		mTextWidth = (int) mPaint.measureText(mText);
		FontMetrics fm = mPaint.getFontMetrics();
		mTextHeight = (int) Math.ceil(fm.descent - fm.top);

		mPaint.getTextBounds(mText, 0, mText.length(), mTextBound);
		mTextHeight = mTextBound.height();
	}

	public void reverseColor() {
		int tmp = mTextOriginColor;
		mTextOriginColor = mTextChangeColor;
		mTextChangeColor = tmp;
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		int r = (int) (mProgress * mTextWidth + mTextStartX);
		int t = (int) (mProgress * mTextHeight + mTextStartY);

		if (mDirection == DIRECTION_LEFT) {
			drawChangeLeft(canvas, r);
			drawOriginLeft(canvas, r);
		} else if (mDirection == DIRECTION_RIGHT) {
			drawOriginRight(canvas, r);
			drawChangeRight(canvas, r);
		} else if (mDirection == DIRECTION_TOP) {
			drawOriginTop(canvas, t);
			drawChangeTop(canvas, t);
		} else {
			drawOriginBottom(canvas, t);
			drawChangeBottom(canvas, t);
		}

	}

	private boolean debug = false;

	private void drawText_h(Canvas canvas, int color, int startX, int endX) {
		mPaint.setColor(color);
		if (debug) {
			mPaint.setStyle(Style.STROKE);
			canvas.drawRect(startX, 0, endX, getMeasuredHeight(), mPaint);
		}
		canvas.save(Canvas.CLIP_SAVE_FLAG);
		canvas.clipRect(startX, 0, endX, getMeasuredHeight());// left, top,
																// right, bottom
		canvas.drawText(mText, mTextStartX,
				getMeasuredHeight() / 2
						- ((mPaint.descent() + mPaint.ascent()) / 2), mPaint);
		canvas.restore();
	}

	private void drawText_v(Canvas canvas, int color, int startY, int endY) {
		mPaint.setColor(color);
		if (debug) {
			mPaint.setStyle(Style.STROKE);
			canvas.drawRect(0, startY, getMeasuredWidth(), endY, mPaint);
		}

		canvas.save(Canvas.CLIP_SAVE_FLAG);
		canvas.clipRect(0, startY, getMeasuredWidth(), endY);// left, top,
		canvas.drawText(mText, mTextStartX,
				getMeasuredHeight() / 2
						- ((mPaint.descent() + mPaint.ascent()) / 2), mPaint);
		canvas.restore();
	}

	private void drawChangeLeft(Canvas canvas, int r) {
		drawText_h(canvas, mTextChangeColor, mTextStartX,
				(int) (mTextStartX + mProgress * mTextWidth));
	}

	private void drawOriginLeft(Canvas canvas, int r) {
		drawText_h(canvas, mTextOriginColor, (int) (mTextStartX + mProgress
				* mTextWidth), mTextStartX + mTextWidth);
	}

	private void drawChangeRight(Canvas canvas, int r) {
		drawText_h(canvas, mTextChangeColor,
				(int) (mTextStartX + (1 - mProgress) * mTextWidth), mTextStartX
						+ mTextWidth);
	}

	private void drawOriginRight(Canvas canvas, int r) {
		drawText_h(canvas, mTextOriginColor, mTextStartX,
				(int) (mTextStartX + (1 - mProgress) * mTextWidth));
	}

	private void drawChangeTop(Canvas canvas, int r) {
		drawText_v(canvas, mTextChangeColor, mTextStartY,
				(int) (mTextStartY + mProgress * mTextHeight));
	}

	private void drawOriginTop(Canvas canvas, int r) {
		drawText_v(canvas, mTextOriginColor, (int) (mTextStartY + mProgress
				* mTextHeight), mTextStartY + mTextHeight);
	}

	private void drawChangeBottom(Canvas canvas, int t) {
		drawText_v(canvas, mTextChangeColor,
				(int) (mTextStartY + (1 - mProgress) * mTextHeight),
				mTextStartY + mTextHeight);
	}

	private void drawOriginBottom(Canvas canvas, int t) {
		drawText_v(canvas, mTextOriginColor, mTextStartY,
				(int) (mTextStartY + (1 - mProgress) * mTextHeight));
	}

	public float getProgress() {
		return mProgress;
	}

	public void setProgress(float progress) {
		this.mProgress = progress;
		invalidate();
	}

	public int getTextSize() {
		return mTextSize;
	}

	public void setTextSize(int mTextSize) {
		this.mTextSize = mTextSize;
		mPaint.setTextSize(mTextSize);
		requestLayout();
		invalidate();
	}
	
	public void setText(String text) {
		this.mText = text;
		requestLayout();
		invalidate();
	}

	public int getTextOriginColor() {
		return mTextOriginColor;
	}

	public void setTextOriginColor(int mTextOriginColor) {
		this.mTextOriginColor = mTextOriginColor;
		invalidate();
	}

	public int getTextChangeColor() {
		return mTextChangeColor;
	}

	public void setTextChangeColor(int mTextChangeColor) {
		this.mTextChangeColor = mTextChangeColor;
		invalidate();
	}

	private int dp2px(float dpVal) {
		return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
				dpVal, getResources().getDisplayMetrics());
	}

	private int sp2px(float dpVal) {
		return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
				dpVal, getResources().getDisplayMetrics());
	}

	private static final String KEY_STATE_PROGRESS = "key_progress";
	private static final String KEY_DEFAULT_STATE = "key_default_state";

	@Override
	protected Parcelable onSaveInstanceState() {
		Bundle bundle = new Bundle();
		bundle.putFloat(KEY_STATE_PROGRESS, mProgress);
		bundle.putParcelable(KEY_DEFAULT_STATE, super.onSaveInstanceState());
		return bundle;
	}

	@Override
	protected void onRestoreInstanceState(Parcelable state) {

		if (state instanceof Bundle) {
			Bundle bundle = (Bundle) state;
			mProgress = bundle.getFloat(KEY_STATE_PROGRESS);
			super.onRestoreInstanceState(bundle
					.getParcelable(KEY_DEFAULT_STATE));
			return;
		}
		super.onRestoreInstanceState(state);
	}
}
(2).准备数据源
mTabs.add(microcontest_first);
mTabs.add(microcontest_second);
private List<ColorTrackView> mTabs = new ArrayList<ColorTrackView>(); private ArrayList<Fragment> fragmentArrayList; protected void inItData() {        fragmentArrayList = new ArrayList<>();        PreliminariesFragment preliminariesFragment = new PreliminariesFragment();        fragmentArrayList.add(preliminariesFragment);        FinalsFragment finalsFragment = new FinalsFragment();        fragmentArrayList.add(finalsFragment);
        microcontest_first = (ColorTrackView) findViewById(R.id.microcontest_first);
        microcontest_second = (ColorTrackView) findViewById(R.id.microcontest_second);
        mTabs.add(microcontest_first);
        mTabs.add(microcontest_second);
    }






(3).设置滑动条的宽度为屏幕的1/2(根据Tab的个数而定)

 /**
     * 设置滑动条的宽度为屏幕的1/2(根据Tab的个数而定)
     */
    private void initTabLineWidth() {
        DisplayMetrics dpMetrics = new DisplayMetrics();
        getWindow().getWindowManager().getDefaultDisplay()
                .getMetrics(dpMetrics);
        screenWidth = dpMetrics.widthPixels;
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) microcontest_tab_img
                .getLayoutParams();
        lp.width = screenWidth / 2;
        microcontest_tab_img.setLayoutParams(lp);
    }

(4).初始化页卡内容区

 /**
     * 初始化页卡内容区
     */
    private void initViewPager() {
        microcontest_vp.setAdapter(new MicroContestVPAdapter(getSupportFragmentManager(), fragmentArrayList));
        //让ViewPager缓存2个页面
        microcontest_vp.setOffscreenPageLimit(2);

        //设置默认打开第一页
        microcontest_vp.setCurrentItem(0);

        //设置viewpager页面滑动监听事件
        microcontest_vp.setOnPageChangeListener(new MyOnPageChangeListener());

    }
(5).页卡滑动监听

 /**
     * 页卡切换监听
     *
     * @author weizhi
     * @version 1.0
     */
    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) microcontest_tab_img
                    .getLayoutParams();

            if (currIndex == 0 && position == 0)// 0->1
            {
                lp.leftMargin = (int) (positionOffset * (screenWidth * 1.0 / 2) + currIndex
                        * (screenWidth / 2));

            } else if (currIndex == 1 && position == 0) // 1->0
            {
                lp.leftMargin = (int) (-(1 - positionOffset)
                        * (screenWidth * 1.0 / 2) + currIndex
                        * (screenWidth / 2));

            }

            microcontest_tab_img.setLayoutParams(lp);
            if (positionOffset > 0) {
                ColorTrackView left = mTabs.get(position);
                ColorTrackView right = mTabs.get(position + 1);

                left.setDirection(1);
                right.setDirection(0);
                Log.e("TAG", positionOffset + "");
                left.setProgress(1 - positionOffset);
                right.setProgress(positionOffset);
            }

        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }