自定义View-滑动字体变色

思路分析

01.效果展示和思路分析
画笔Paint的使用
思路：TextView 可行？系统只提供一种显示颜色，需要自定义
自定义View继承自谁？extends View: onMesasure() onDraw();
extends TextView: 这个方法可以省略onMesasure()，比如textColor颜色 字体大小等等自定义属性会少很多；(用这种）
1.一个文字两种颜色， 画笔画出来;
2.能够从左到右，从右到左
3.整合到ViewPager
自定义属性 不变化的颜色， originColor 变化的颜色changeColor；
02.一个文字两种颜色
两个画笔画，用的是裁剪

03.实现不同朝向
左边是不变色的，右边是变色的。
左边是不变色的，右边是变色的

04.结合ViewPager和任务布置
LinearLayout(代码添加变色的View) +　ViewPager

完整代码

自定义属性attrs

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ColorTrackTextView">
        <attr name="originColor" format="color"/>
        <attr name="changeColor" format="color"/>
    </declare-styleable>

</resources>

自定义view： ColorTrackTextView

package com.example.day04;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.TextView;



import androidx.annotation.Nullable;

public class ColorTrackTextView extends androidx.appcompat.widget.AppCompatTextView {
    //1.不变颜色的画笔
    private Paint mOriginPaint;

    //2.改变颜色的画笔
    private Paint mChangePaint;
    //3.当前进度
    private float mCurrentProgress=0.0f;

    //4.实现不同朝向
    private Direction mDirection=Direction.LEFT_TO_RIGHT;

    public enum Direction {
        LEFT_TO_RIGHT, RIGHT_TO_LEFT,
    }

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

    public ColorTrackTextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public ColorTrackTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint(context,attrs);
    }
    /**
     * 初始化画笔
     */
    private void initPaint(Context context,AttributeSet attrs){
        TypedArray array=context.obtainStyledAttributes(attrs,R.styleable.ColorTrackTextView);
        int originColor=array.getColor(R.styleable.ColorTrackTextView_originColor,getTextColors().getDefaultColor());
        int changeColor=array.getColor(R.styleable.ColorTrackTextView_changeColor,getTextColors().getDefaultColor());
        mOriginPaint=getPaintByColor(originColor);
        mChangePaint=getPaintByColor(changeColor);
        array.recycle();
    }
    /**
     * 1.根据颜色获取画笔
     */
    private Paint getPaintByColor(int color){
        Paint paint=new Paint();
        //设置颜色
        paint.setColor(color);
        //抗锯齿
        paint.setAntiAlias(true);
        //防抖动
        paint.setDither(true);
        //设置字体的大小， 就是TextView的字体大小
        paint.setTextSize(getTextSize());
        return paint;
    }

    //1.一个文字两种颜色
    //利用clipRect的api可以裁剪文字区域， 左边用一个画笔，右边用一个画笔，不断改变中间值
    @Override
    protected void onDraw(Canvas canvas) {
        //不用系统的，自己画
//        canvas.clipRect();裁剪区域
        canvas.save();
        //根据进度把中间值算出来
        int middle=(int)(mCurrentProgress*getWidth());
        if (mDirection == Direction.LEFT_TO_RIGHT) {
            drawText(canvas,mChangePaint,0,middle);
            //绘制变色的
            drawText(canvas,mOriginPaint,middle,getWidth());
        }else {
            //右边是
            drawText(canvas,mChangePaint,getWidth()-middle,getWidth());
            //绘制变色的
            drawText(canvas,mOriginPaint,0,getWidth()-middle);
        }

    }

    /**
     * 绘制Text
     * @param canvas
     * @param paint
     * @param start
     * @param end
     */
    private void drawText(Canvas canvas,Paint paint,int start, int end){
        canvas.save();
        //绘制不变色的
        Rect rect = new Rect(start,0,end,getHeight());
        canvas.clipRect(rect);
        String text = getText().toString();
        Rect bounds=new Rect();
        mChangePaint.getTextBounds(text,0,text.length(),bounds);
        //获取字体的宽度
        int x=getWidth()/2-bounds.width()/2;
        //基线baseLine
        Paint.FontMetricsInt fontMetricsInt=mChangePaint.getFontMetricsInt();
        int dy=(fontMetricsInt.bottom-fontMetricsInt.top)/2-fontMetricsInt.bottom;
        int baseLine=getHeight()/2+dy;
        canvas.drawText(text,x,baseLine,paint);//这样还是只有一种颜色
        canvas.restore();
    }
    public void setDirection(Direction direction){
        this.mDirection=direction;
    }
    public void setCurrentProgress(float currentProgress){
        this.mCurrentProgress=currentProgress;
        invalidate();
    }
    public void setChangeColor(int changeColor){
        this.mChangePaint.setColor(changeColor);
    }
    public void setOriginColor(int originColor){
        this.mOriginPaint.setColor(originColor);
    }
}

ItmeFragment

package com.example.day04;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class ItmeFragment extends Fragment {

    public static ItmeFragment newInstance(String item){
        ItmeFragment itmeFragment=new ItmeFragment();
        Bundle bundle=new Bundle();
        bundle.putString("title",item);
        itmeFragment.setArguments(bundle);
        return itmeFragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_item,null);
        TextView tv=view.findViewById(R.id.text);
        Bundle bundle=getArguments();
        tv.setText(bundle.getString("title"));
        return view;
    }
}

ViewPagerActivity

package com.example.day04;

import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.ViewGroup;
import android.widget.LinearLayout;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerActivity extends AppCompatActivity {
    private String[] items={"直播","推荐","视频","图片","段子","精华"};
    private LinearLayout mIndicatorContainer;//变成通用的
    private List<ColorTrackTextView> mIndicators;
    private ViewPager mViewPager;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);
        mIndicators=new ArrayList<>();
        mIndicatorContainer=findViewById(R.id.indicator_view);
        mViewPager=findViewById(R.id.view_pager);
        initIndicator();
        initViewpager();
    }
    private  void initViewpager(){
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return ItmeFragment.newInstance(items[position]);
            }

            @Override
            public int getCount() {
                return items.length;
            }

            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {

            }
        });
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                Log.e("TAG","position ->"+position+"positionOffset ->"+positionOffset);
                //position代表当前的位置。positionOffset代表滚动的百分比0-1百分比
                //1.左边 位置position
                ColorTrackTextView left=mIndicators.get(position);
                left.setDirection(ColorTrackTextView.Direction.RIGHT_TO_LEFT);
                left.setCurrentProgress(1-positionOffset);

                try {
                    ColorTrackTextView right=mIndicators.get(position+1);
                    right.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT);
                    right.setCurrentProgress(positionOffset);
                }catch (Exception e){

                }

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
    /**
     * 初始化可变色的指示器
     */
    private void initIndicator(){
        for (int i = 0; i < items.length; i++) {
            //动态添加颜色跟踪的TextView
            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            params.weight=1;
            ColorTrackTextView colorTrackTextView=new ColorTrackTextView(this);
            //设置颜色
            colorTrackTextView.setTextSize(20);
            colorTrackTextView.setChangeColor(Color.RED);
            colorTrackTextView.setText(items[i]);
            colorTrackTextView.setLayoutParams(params);
            //把新的加入LinearLayout容器
            mIndicatorContainer.addView(colorTrackTextView);
            //加入集合
            mIndicators.add(colorTrackTextView);
        }
    }
}

activity_view_pager.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="10dp"
        android:layout_marginBottom="10dp"
        android:id="@+id/indicator_view"
        />
    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/view_pager"
        android:layout_weight="1"/>

</LinearLayout>

fragment_item.xml

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

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="你好"
        android:textSize="50dp"
        android:gravity="center"
        android:textStyle="bold"/>
</LinearLayout>