自定义View + viewPage 实现滚动 变换 字体颜色

先看效果图：

package com.miaozij.view_date02;

import android.annotation.SuppressLint;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Rect;

import android.util.AttributeSet;

import android.util.Log;

import android.util.TypedValue;

import android.widget.TextView;

@SuppressLint("AppCompatCustomView")

public class ColorTrackTextViewextends TextView {

private int mOriginColor = Color.RED;

    private int mChangeColor = Color.BLACK;

    private PaintmOriginPaint;

    private PaintmChangePaint;

    private float mCurrentProgress =0.0f;

    private int mTextSize =15;

    private DirectionmDirection = Direction.LEFT_TO_RIGHT;

    //实现不同朝向

    public enum Direction{

LEFT_TO_RIGHT,RIGHT_TO_LEFT;

    }

public ColorTrackTextView(Context context) {

this(context,null);

    }

// 在layout布局中使用 被调用

    public ColorTrackTextView(Context context, AttributeSet attrs) {

this(context, attrs,0);

    }

//在layout中调用，但是还配置了style属性

    public ColorTrackTextView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

        //获取自定义属性

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ColorTrackTextView);

        mOriginColor = typedArray.getColor(R.styleable.ColorTrackTextView_changeColor,mOriginColor);

        mChangeColor = typedArray.getColor(R.styleable.ColorTrackTextView_originColor,mChangeColor);

        //回收

        typedArray.recycle();

        mOriginPaint = getPaintByColor(mOriginColor);

        mChangePaint = getPaintByColor(mChangeColor);

    }

private PaintgetPaintByColor(int color){

Paint paint =new Paint();

        paint.setColor(color);

        paint.setAntiAlias(true);

        //防止抖动

        paint.setDither(true);

        Log.d("字体大小：",mTextSize+"");

        paint.setTextSize(sp2px(mTextSize));

        return paint;

    }

private int sp2px(int mTextSize) {

return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,mTextSize,getResources().getDisplayMetrics());

    }

@Override

    protected void onDraw(Canvas canvas) {

//根据进度把中间值算出来

        int middle = (int)(mCurrentProgress * getWidth());

        //从左变到右 左边是红色右边是黑色

        if(mDirection == Direction.LEFT_TO_RIGHT) {

drawText(canvas, 0, middle, mOriginPaint);

            //绘制变色

            drawText(canvas, middle, getWidth(), mChangePaint);

        }else {//从右向左 右边是红色 左边是黑色

            drawText(canvas,0,getWidth(), mOriginPaint);

            //绘制变色

            drawText(canvas,getWidth()- middle, getWidth(), mChangePaint);

        }

//        super.onDraw(canvas);

    }

private void drawText(Canvas canvas,int left,int right,Paint paint){

canvas.save();

        String text = getText().toString();

        //获取字体的宽度

        Rect changeBounds =new Rect();

        paint.getTextBounds(text,0,text.length(),changeBounds);

        int dx = getWidth() /2 - changeBounds.width() /2;

        Paint.FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();

        int dy = (fontMetricsInt.bottom - fontMetricsInt.top)/2 - fontMetricsInt.bottom;

        int baseLine = getHeight()/2 + dy;

        //绘制变色

//clipRect 栽剪 左边 一个画笔 右边一个画笔

//        Log.d("lll",left+",,,"+right);

        Rect changeRect =new Rect(left,0,right,getHeight());

        canvas.clipRect(changeRect);

        canvas.drawText(text,dx,baseLine,paint);

        canvas.restore();

    }

public void setDirection(Direction direction){

this.mDirection = direction;

    }

public void setProgress(float progress){

this.mCurrentProgress = progress;

        invalidate();

    }

public void setChangeColor(int color){

this.mChangeColor = color;

    }

public void setOriginColor(int color){

this.mOriginColor = color;

    }

public void setTextSize(int textSize){

this.mTextSize = sp2px(textSize);

        mChangePaint.setTextSize(this.mTextSize);

        mOriginPaint.setTextSize(this.mTextSize);

        invalidate();

    }

public void setTextColor(int color){

}

}

package com.miaozij.view_date02;

import android.animation.ObjectAnimator;

import android.animation.ValueAnimator;

import android.graphics.Color;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.view.ViewGroup;

import android.widget.HorizontalScrollView;

import android.widget.LinearLayout;

import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

import androidx.fragment.app.Fragment;

import androidx.viewpager.widget.ViewPager;

import java.util.ArrayList;

import java.util.List;

public class ViewPageActivityextends AppCompatActivity {

private ViewPagermViewPager;

    private ListfragmentArrayList;

    private ListitemList;

    private ViewPageContentAdaptermViewPageContentAdapter;

    private LinearLayoutmIndicatorContentView;

    private ListmIndicatorItemViewList;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_view_page);

        mViewPager = findViewById(R.id.view_page);

        mIndicatorContentView = findViewById(R.id.ll_top);

        initFragmentList();

        initIndicator();

    }

/**

* 初始化指示器

*/

    private void initIndicator() {

mIndicatorItemViewList =new ArrayList<>();

        for(int i=0;i

LinearLayout.LayoutParams layoutParams =new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);

            layoutParams.weight =1;

            ColorTrackTextView colorTrackTextView =new ColorTrackTextView(this);

            colorTrackTextView.setText(itemList.get(i));

            colorTrackTextView.setTextSize(20);

            if(i==0) {

colorTrackTextView.setOriginColor(Color.RED);

            }

colorTrackTextView.setChangeColor(Color.RED);

            colorTrackTextView.setLayoutParams(layoutParams);

            mIndicatorContentView.addView(colorTrackTextView);

            mIndicatorItemViewList.add(colorTrackTextView);

        }

}

private void initFragmentList() {

itemList =new ArrayList<>();

        fragmentArrayList =new ArrayList<>();

        itemList.add("直播");

        itemList.add("推荐");

        itemList.add("新闻");

        itemList.add("热门");

        for(int i=0;i

fragmentArrayList.add(ItemFragment.getInstance(itemList.get(i)));

        }

mViewPageContentAdapter =new ViewPageContentAdapter(getSupportFragmentManager(), fragmentArrayList);

        mViewPager.setAdapter(mViewPageContentAdapter);

        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

Log.d("TAG","position=> "+position+" positionOffset=> "+ positionOffset+" positionOffsetPixels=> "+positionOffsetPixels);

                if(position ==mIndicatorItemViewList.size()-1)return;

                ColorTrackTextView left =mIndicatorItemViewList.get(position);

                left.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT);

                left.setProgress(1-positionOffset);

                ColorTrackTextView right =mIndicatorItemViewList.get(position +1);

                right.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT);

                right.setProgress(positionOffset);

            }

@Override

            public void onPageSelected(int position) {

Log.d("TAG","position=> "+position);

            }

@Override

            public void onPageScrollStateChanged(int state) {

}

});

    }

}