ViewPager随着手指联动，且字体随之变色

前言

在此次项目中，总结了一下在ViewPager+Fragment的情况下，手指滑动ViewPager，使得指针一起联动，并且字体随之变色的效果，参考了鸿洋大神的两篇文章和其他开源代码，此次做了比较完整的处理，以后如果有需要的话，可以直接拿来用。

代码&& 实现

具体的一些代码块贴上来仅供参考

自定义的ScrollTabView，继承自view，类似指针，会随着手指的移动进行实时滑动

	private int mTabNum,mCurrentNum;
    private float mWidth,mTabWidth,mOffset;

    private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private int mBeginColor,mEndColor;
    private LinearGradient mGradient;
    public ScrollTabView(Context context) {
        this(context,null);
    }

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

    public void setTabNum(int num){
        mTabNum = num;
    }

    public void setCurrentNum(int num){
        mCurrentNum = num;
        mOffset = 0;
    }

    public void setOffset(int position,float offset){
        if(offset == 0){
            return;
        }

        mCurrentNum = position;
        mOffset = offset;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(mTabWidth == 0){
            mWidth = getWidth();
            mTabWidth = mWidth / mTabNum;
        }

        //根据位置和偏移量来计算滑动条的位置
        float left = (mCurrentNum + mOffset) * mTabWidth;
        float right = left + mTabWidth;
        float top = getPaddingTop();
        float bottom = getHeight() - getPaddingBottom();

        LinearGradient gradient = new LinearGradient(left,getHeight(),right,getHeight(),mBeginColor,mEndColor, Shader.TileMode.CLAMP);
        mPaint.setShader(gradient);

        canvas.drawRect(left,top,right,bottom,mPaint);
    }

    public void setSelectedColor(int preColor,int nextColor){
        mBeginColor = preColor;
        mEndColor = nextColor;
    }

ThreeActivity的部分代码块，配合ScrollTabView使用

private void initEvents() {
        mViewPager.setAdapter(mAdapter);
        highLightTextView(0);
        mTextView.setText(mDatas.get(0));

        id_tab_line_iv.setTabNum(mDatas.size());
        id_tab_line_iv.setCurrentNum(0);
        id_tab_line_iv.setSelectedColor(Color.BLUE,Color.YELLOW);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                id_tab_line_iv.setOffset(position,positionOffset);
                if (positionOffset > 0)
                {
                    ColorTrackView left = mTabs.get(position);
                    ColorTrackView right = mTabs.get(position + 1);

                    left.setDirection(1);
                    right.setDirection(0);
                    left.setProgress( 1-positionOffset);
                    right.setProgress(positionOffset);
                }
            }

            @Override
            public void onPageSelected(int position) {
                resetTextViewColor();
                highLightTextView(position);
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }


    /**
     * 高亮文本
     * @param position
     */
    protected void highLightTextView(int position)
    {
        View view = mTabs.get(position);
        if (view instanceof ColorTrackView)
        {
            ((ColorTrackView) view).setTextSize(48);
            mTextView.setText(mDatas.get(position));
        }
    }

    /**
     * 重置文本颜色
     */
    private void resetTextViewColor()
    {
        for (int i = 0; i < mTabs.size(); i++)
        {
            View view = mTabs.get(i);
            if (view instanceof ColorTrackView)
            {
                ((ColorTrackView) view).setTextSize(40);
            }
        }
    }

最后是鸿洋大神写的ColorTrackView这个类，主要处理字体变色这个效果，这个代码块我就不贴了

最后

Github项目地址，如果有什么不对的地方，欢迎留言指正,不胜感激.