android viewPager 滑动标题颜色渐变效果

最新推荐文章于 2021-09-06 17:34:56 发布

xielinhua88

最新推荐文章于 2021-09-06 17:34:56 发布

阅读量3.5k

点赞数

分类专栏： android 文章标签： android viewpager

本文链接：https://blog.csdn.net/xielinhua88/article/details/51280576

版权

android 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

由于项目需要用到这样的需求：

用户滑动界面的时候上面的标题颜色也跟着渐渐的改变，类似于今日头条的效果
首先看一下效果先：

图片有点小具体效果可以下载demo；

好了现在开始！首先我们需要写一个了解一下需求：
1 需要写一个viewPager的标题并且随手势滑动
2 ViewPage滑动的过程中动态的渐变颜色

处理1 重写一个横向的ScrollView 并且监听viewpager的手势滑动；
处理2 使用canvas的clipRect的方法画区域块这里我使用到了这篇文章
Android 自定义控件玩转字体变色
好了开始贴代码了
自定义一个HorizontalScrollView的类用来实现viewpager的指示器

package com.example.administrator.opensouce;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class LineTabIndicator extends HorizontalScrollView {

    private ColorTrackView left;
    private ColorTrackView right;
    //判断是否是点击上面的标题跳转的
    public boolean isClickTo;

    public interface OnTabSelectedListener {
        void onTabSelected(int position);
    }

    //监听viewpager的滑动
    public OnPageChangeListener mOnPageChangeListener;
    private OnTabSelectedListener mTabSelectedListener;

    private LinearLayout mTabsContainer;
    private ViewPager mPager;

    private int tabCount;
    private int currentPosition = 0;
    private float currentPositionOffset = 0f;

    private Paint linePaint;
    private Paint diviPaint;

    private int indicatorColor = 0xFFF67E0A;//下划线（选择）
    private int underlineColor = 0x33000000;
    private int dividerColor = 0x00000000;//两个标签之间的分割线
    private int textSelectedColor = 0xFFF67E0A;//字体（选择）
    private int textUnselectColor = 0xFF000000;//字体（没有选中）

    private boolean enableExpand = true;//设置两个标签的padding
    private boolean enableDivider = true;//设置下划线
    private boolean indicatorOnTop = false;//是否画在文字的上面
    private boolean viewPagerScrollWithAnimation = true;
    private int tabTextSize = 16;
    private int scrollOffset = 52;
    private float indicatorHeight = 1.5f;
    private float underlineHeight = 1f;
    private int dividerPadding = 12;
    private int tabPadding = 24;
    private int dividerWidth = 1;
    private int lastScrollX = 0;
    private int margin = 22;
    private boolean isFirstIn = true;

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

    public LineTabIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LineTabIndicator(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        setFillViewport(true);
        setWillNotDraw(false);

        DisplayMetrics dm = getResources().getDisplayMetrics();

        mTabsContainer = new LinearLayout(context);
        mTabsContainer.setOrientation(LinearLayout.HORIZONTAL);
        LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT);
        params.height = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 50, dm);
        mTabsContainer.setLayoutParams(params);
        addView(mTabsContainer);

        scrollOffset = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);
        dividerPadding = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, dividerPadding, dm);
        tabPadding = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, tabPadding, dm);
        dividerWidth = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, dividerWidth, dm);
        indicatorHeight = TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, indicatorHeight, dm);
        underlineHeight = TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, underlineHeight, dm);
        margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                margin, dm);
        TypedArray ta = context.obtainStyledAttributes(attrs,
                R.styleable.LineTabIndicator);
        underlineColor = ta.getColor(R.styleable.LineTabIndicator_underlineColor, underlineColor);
        indicatorColor = ta.getColor(R.styleable.LineTabIndicator_indicatorColor, indicatorColor);
        dividerColor = ta.getColor(R.styleable.LineTabIndicator_dividerColor, dividerColor);
        textSelectedColor = ta.getColor(R.styleable.LineTabIndicator_textSelectedColor, textSelectedColor);
        textUnselectColor = ta.getColor(R.styleable.LineTabIndicator_textUnselectColor, textUnselectColor);
        enableExpand = ta.getBoolean(R.styleable.LineTabIndicator_enableExpand, enableExpand);
        enableDivider = ta.getBoolean(R.styleable.LineTabIndicator_enableDivider, enableDivider);
        indicatorOnTop = ta.getBoolean(R.styleable.LineTabIndicator_indicatorOnTop, indicatorOnTop);
        dividerPadding = ta.getInteger(R.styleable.LineTabIndicator_dividerPadding1, dividerPadding);
        tabPadding = ta.getInteger(R.styleable.LineTabIndicator_tabPadding, tabPadding);
        ta.recycle();

        linePaint = new Paint();
        linePaint.setAntiAlias(true);
        linePaint.setStyle(Style.FILL);

        diviPaint = new Paint();
        diviPaint.setAntiAlias(true);
        diviPaint.setStrokeWidth(dividerWidth);
    }

    public void setFirstIn(boolean firstIn) {
        isFirstIn = firstIn;
    }

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

        if (isInEditMode() || tabCount == 0) {
            return;
        }

        final int height = getHeight();

        linePaint.setColor(underlineColor);
        if (indicatorOnTop) {
            canvas.drawRect(0, 0, mTabsContainer.getWidth(), underlineHeight,
                    linePaint);
        } else {
            canvas.drawRect(0, height - underlineHeight,
                    mTabsContainer.getWidth(), height, linePaint);
        }

        linePaint.setColor(indicatorColor);
        float lineLeft;//线
        float lineRight;
        View currentTab = mTabsContainer.getChildAt(currentPosition);

        lineLeft = currentTab.getLeft();
        lineRight = currentTab.getRight();
        //第一个标签离左侧有10距离
        if (currentPosition == 0) {
            lineLeft = currentTab.getLeft() + 10;
        }

        if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {
            View nextTab = mTabsContainer.getChildAt(currentPosition + 1);
            final float nextTabLeft = nextTab.getLeft();
            final float nextTabRight = nextTab.getRight();

            lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset)
                    * lineLeft);
            lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset)
                    * lineRight);
        }
        //最后一个标签离右侧有10距离
        if (currentPosition == tabCount - 1) {
            lineRight = currentTab.getRight() - 10;
        }
        if (indicatorOnTop) {
            canvas.drawRect(lineLeft, 0, lineRight, indicatorHeight, linePaint);
        } else {
            canvas.drawRect(lineLeft, height - indicatorHeight, lineRight,
                    height, linePaint);
        }

        if (enableDivider) {
            diviPaint.setColor(dividerColor);
            for (int i = 0; i < tabCount - 1; i++) {
                View tab = mTabsContainer.getChildAt(i);
                canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(),
                        height - dividerPadding, diviPaint);
            }
        }
    }

    //关联viewpager
    public void setViewPager(ViewPager pager) {
        this.mPager = pager;

        if (pager.getAdapter() == null) {
            throw new IllegalStateException(
                    "ViewPager does not have adapter instance.");
        }
        pager.addOnPageChangeListener(new PageListener());

        notifyDataSetChanged();
    }

    public void setOnPageChangeListener(OnPageChangeListener listener) {
        this.mOnPageChangeListener = listener;
    }

    public void setOnTabReselectedListener(OnTabSelectedListener listener) {
        mTabSelectedListener = listener;
    }

    public void notifyDataSetChanged() {

        mTabsContainer.removeAllViews();

        tabCount = mPager.getAdapter().getCount();
        for (int i = 0; i < tabCount; i++) {
            addTab(i, mPager.getAdapter().getPageTitle(i).toString());
        }
        TabView childAt1 = (TabView) mTabsContainer.getChildAt(0);
        if (isFirstIn) {
            childAt1.getTextView().setProgress(1.0f);//第一个默认为选中的颜色
        }
        updateTabStyles();
    }


    public LinearLayout getmTabsContainer() {
        return mTabsContainer;
    }

    private class TabView extends RelativeLayout {
        private ColorTrackView mTabText;

        public TabView(Context context) {
            super(context);
            init();
        }

        public TabView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }

        public TabView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            init();
        }

        private void init() {
            View views = View.inflate(getContext(), R.layout.viewpager_title, null);
            mTabText = (ColorTrackView) views.findViewById(R.id.trackview);
            LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,
                    LayoutParams.MATCH_PARENT);
            params.leftMargin = margin / 2;
            params.rightMargin = margin / 2;
            this.addView(views, params);

        }

        public ColorTrackView getTextView() {
            return mTabText;
        }
    }

    private void addTab(final int position, String title) {
        TabView tab = new TabView(getContext());
        tab.getTextView().setText(title);
        tab.setFocusable(true);
        tab.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                final int oldSelected = mPager.getCurrentItem();

                if (oldSelected != position && mTabSelectedListener != null) {
                    mTabSelectedListener.onTabSelected(position);
                }
                isClickTo = true;
                mPager.setCurrentItem(position, viewPagerScrollWithAnimation);
            }
        });

        if (!enableExpand) {
            tab.setPadding(tabPadding, 0, tabPadding, 0);
        }
        mTabsContainer.addView(tab, position,
                enableExpand ? new LinearLayout.LayoutParams(0,
                        LayoutParams.MATCH_PARENT, 1.0f)
                        : new LinearLayout.LayoutParams(
                        LayoutParams.WRAP_CONTENT,
                        LayoutParams.MATCH_PARENT));
    }

    public void setTabText(int position, String text) {
        if (position < 0 || position > (mTabsContainer.getChildCount() - 1))
            throw new RuntimeException("tabs does not have this position.");

        View tab = mTabsContainer.getChildAt(position);
        if (tab instanceof ColorTrackView) {
            ((ColorTrackView) tab).setText(text);
        }
    }

    public boolean isIndicatorOnTop() {
        return indicatorOnTop;
    }

    public void setIndicatorOnTop(boolean indicatorOnTop) {
        this.indicatorOnTop = indicatorOnTop;
    }

    public boolean isEnableExpand() {
        return enableExpand;
    }

    public void setEnableExpand(boolean enableExpand) {
        this.enableExpand = enableExpand;
    }

    public boolean isEnableDivider() {
        return enableDivider;
    }

    public void setEnableDivider(boolean enableDivider) {
        this.enableDivider = enableDivider;
    }

    public void setViewPagerScrollWithAnimation(boolean enable) {
        this.viewPagerScrollWithAnimation = enable;
    }

    public boolean getViewPagerScrollWithAnimation() {
        return this.viewPagerScrollWithAnimation;
    }

    public void setCurrentItem(int item) {
        mPager.setCurrentItem(item, viewPagerScrollWithAnimation);
    }

    public void tabSelect(int index) {
        final int tabCount = mTabsContainer.getChildCount();
        for (int i = 0; i < tabCount; i++) {
            final View child = mTabsContainer.getChildAt(i);
            final boolean isSelected = (i == index);
            child.setSelected(isSelected);
            if (!isClickTo) {
                if (isSelected) {
                    ((TabView) child).getTextView().setTextChangeColor(textSelectedColor);
                } else {
                    ((TabView) child).getTextView().setTextOriginColor(textUnselectColor);
                    ((TabView) child).getTextView().setTextChangeColor(textSelectedColor);
                }
            } else {
                if (isSelected) {
                    ((TabView) child).getTextView().setTextOriginColor(textSelectedColor);
                } else {
                    ((TabView) child).getTextView().setTextOriginColor(textUnselectColor);
                    ((TabView) child).getTextView().setTextChangeColor(textSelectedColor);
                }
            }
        }
    }

    //刷新所有的颜色
    private void updateTabStyles() {
        for (int i = 0; i < tabCount; i++) {
            TabView childAt1 = (TabView) mTabsContainer.getChildAt(i);
            childAt1.getTextView().setBackgroundColor(Color.TRANSPARENT);
            childAt1.getTextView().setTextChangeColor(Color.BLACK);
            childAt1.getTextView().setTextOriginColor(Color.BLACK);
        }
        tabSelect(mPager.getCurrentItem());
    }

    private void scrollToChild(int position, int offset) {
        if (tabCount == 0) {
            return;
        }

        int newScrollX = mTabsContainer.getChildAt(position).getLeft() + offset;

        if (position > 0 || offset > 0) {
            newScrollX -= scrollOffset;
        }

        if (newScrollX != lastScrollX) {
            lastScrollX = newScrollX;
            scrollTo(newScrollX, 0);
        }
    }

    private class PageListener implements OnPageChangeListener {

        @Override
        public void onPageScrolled(int position, float positionOffset,
                                   int positionOffsetPixels) {
            currentPosition = position;
            currentPositionOffset = positionOffset;
            if (positionOffset > 0 && !isClickTo) {//滑动改变字体的渐变颜色
                TabView childAt1 = (TabView) mTabsContainer.getChildAt(position);
                TabView childAt2 = (TabView) mTabsContainer.getChildAt(position + 1);
                left = childAt1.getTextView();
                right = childAt2.getTextView();
                left.setDirection(1);
                right.setDirection(0);
                left.setProgress(1 - positionOffset);
                right.setProgress(positionOffset);

            }
            scrollToChild(position, (int) (positionOffset * mTabsContainer
                    .getChildAt(position).getWidth()));

            invalidate();

            if (mOnPageChangeListener != null) {
                mOnPageChangeListener.onPageScrolled(position, positionOffset,
                        positionOffsetPixels);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            if (state == ViewPager.SCROLL_STATE_IDLE) {
                scrollToChild(mPager.getCurrentItem(), 0);
            }

            if (mOnPageChangeListener != null) {
                mOnPageChangeListener.onPageScrollStateChanged(state);
            }
        }

        @Override
        public void onPageSelected(int position) {
            if (right != null)
                right.setProgress(0);
            if (left != null)
                left.setProgress(0);
            tabSelect(position);
            if (mOnPageChangeListener != null) {
                mOnPageChangeListener.onPageSelected(position);
            }
        }
    }

}

类中的一些属性可以在代码里面设置也可以在布局里设置

现在是指示器颜色渐变的类这里我直接使用的是鸿洋大神的类

package com.example.administrator.opensouce;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Bundle;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

/**
 * Created by Administrator on 2016/4/28 0028.
 */
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);
        Paint.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(Paint.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(Paint.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);
    }
}

属性文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--指示器文字的title-->
    <attr name="text" format="string" />
    <!--指示器文字的大小-->
    <attr name="text_size" format="dimension" />
    <!--指示器文字的默认颜色-->
    <attr name="text_origin_color" format="color|reference" />
    <!--指示器文字的渐变颜色-->
    <attr name="text_change_color" format="color|reference" />
    <!--渐变进度-->
    <attr name="progress" format="float" />
    <!--渐变方向-->
    <attr name="direction">
        <enum name="left" value="0" />
        <enum name="right" value="1" />
    </attr>
    <!--viewpager指示器的配置属性-->
    <declare-styleable name="LineTabIndicator">
        <!--下划线颜色-->
        <attr name="indicatorColor" format="color|reference" />
        <!--下划线颜色没有选中是的颜色-->
        <attr name="underlineColor" format="color|reference" />
        <!--标签之间相隔的颜色-->
        <attr name="dividerColor" format="color|reference" />
        <!--文字选中颜色-->
        <attr name="textSelectedColor" format="color|reference" />
        <!--文字默认颜色-->
        <attr name="textUnselectColor" format="color|reference" />
        <!--标签是否空隙-->
        <attr name="enableExpand" format="boolean" />
        <!--标签相隔的线空隙-->
        <attr name="enableDivider" format="boolean" />
        <!--下划线是否在文字的上面-->
        <attr name="indicatorOnTop" format="boolean" />
        <!--标签线空隙大小-->
        <attr name="dividerPadding1" format="integer" />
        <!--标签空隙大小-->
        <attr name="tabPadding" format="integer" />
    </declare-styleable>


    <!--viewpager颜色渐变-->
    <declare-styleable name="ColorTrackView">
        <attr name="text" />
        <attr name="text_size" />
        <attr name="text_origin_color" />
        <attr name="text_change_color" />
        <attr name="progress" />
        <attr name="direction" />
    </declare-styleable>

</resources>

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:xlh="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.opensouce.MainActivity">

    <com.example.administrator.opensouce.LineTabIndicator
        android:id="@+id/lineTab"
        xlh:dividerColor="#ff00"
        xlh:indicatorColor="#ff00"
        android:layout_width="match_parent"
        android:layout_height="55dp" />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/lineTab" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.administrator.opensouce.ColorTrackView
        android:id="@+id/trackview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:text="标题"
        app:text_change_color="#ffff0000"
        app:text_origin_color="#ff000000"
        app:text_size="52px" />
</LinearLayout>

主anctivitys


public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private static final int CHANNELREQUEST = 1;
    private static String[] titles = {"首页", "第二页", "末尾"};
    private ArrayList<ChannelItem> userChannelList;
    private ImageView button_more_columns;
    private LineTabIndicator lineTabIndicator;
    private MPagerAdapter adapter;
    private int count;
    private ViewPager viewpager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initViews();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    private void initViews() {
        lineTabIndicator = (LineTabIndicator) findViewById(R.id.lineTab);
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        button_more_columns = (ImageView) findViewById(R.id.button_more_columns);
        button_more_columns.setOnClickListener(this);
        adapter = new MPagerAdapter();
        viewpager.setAdapter(adapter);
        lineTabIndicator.setViewPager(viewpager);
        //滑动监听
        viewpager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction()==MotionEvent.ACTION_MOVE){
                    if (lineTabIndicator.isClickTo){
                        lineTabIndicator.isClickTo=false;
                    }
                }
                return false;
            }
        });
    }