Custom view progress bar text

Let's see the effect achieved first

Progress bar text

Implementation principle:

Draw two texts at the same position, the first one as the background color, cut the canvas before drawing the second text, and then draw the second text

Code

Custom View file WordView.java

public class WordView extends View {
    
    
    private String mText;//需要绘制的文字
    private int mTextFirstColor,mTextSecondColor;//文本的颜色
    private int mTextSize;//文本的大小
    private float account;
    private Rect mBound;
    private Paint mPaint;
    private Paint.FontMetrics fontMetrics;

    public WordView(Context context){
    
    
        this(context,null);
    }
    public WordView(Context context, AttributeSet attrs){
    
    
        this(context,attrs,0);
    }
    public WordView(Context context,AttributeSet attrs,int defStyleAttr){
    
    
        super(context,attrs,defStyleAttr);
        //获取自定义属性
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,R.styleable.WordView,defStyleAttr,0);
        mText = a.getString(R.styleable.WordView_mText);
        mTextFirstColor = a.getColor(R.styleable.WordView_mTextFirstColor,Color.GREEN);
        mTextSecondColor = a.getColor(R.styleable.WordView_mTextSecondColor,Color.WHITE);
        mTextSize = a.getDimensionPixelSize(R.styleable.WordView_mTextSize,100);
        account = a.getFloat(R.styleable.WordView_account,(float)0.5);
        a.recycle();
        mPaint = new Paint();
        mPaint.setTextSize(mTextSize);
        mBound = new Rect();
        mPaint.getTextBounds(mText,0,mText.length(),mBound);
        fontMetrics=mPaint.getFontMetrics();
    }

    @Override
    protected void onDraw(Canvas canvas){
    
    
        drawMyText(canvas);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    
    
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);   //获取宽的模式
        int heightMode = MeasureSpec.getMode(heightMeasureSpec); //获取高的模式
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);   //获取宽的尺寸
        int heightSize = MeasureSpec.getSize(heightMeasureSpec); //获取高的尺寸
        int width;
        int height ;
        if (widthMode == MeasureSpec.EXACTLY) {
    
    
            width = widthSize;
        } else {
    
    
            width = (int)(mBound.width()+(float)(fontMetrics.bottom*0.5));
        }
        if (heightMode == MeasureSpec.EXACTLY) {
    
    
            height = heightSize;
        } else {
    
    
            height = (int)(mBound.height()+(float)(fontMetrics.bottom*1.5));
        }
        setMeasuredDimension(width, height);
    }

    private void drawMyText(Canvas canvas){
    
    
        int width = canvas.getWidth();

        //字母顶部的坐标
        float TextTop = (float)(fontMetrics.ascent*0.87-fontMetrics.top+fontMetrics.descent*0.13);
        //字母高度
        float MyTextHigh=(float)((fontMetrics.descent-fontMetrics.ascent)*0.87);

        //红色的部分
        mPaint.setColor(mTextFirstColor);
        mPaint.setTextSize(mTextSize);
        canvas.drawText(mText,0,-fontMetrics.top,mPaint);

        //白色的部分
        mPaint.setColor(mTextSecondColor);
        canvas.save();
        canvas.clipRect(0,0,width,(float)(TextTop+MyTextHigh*(1.0-account)));
        canvas.drawText(mText,0,-fontMetrics.top,mPaint);
        canvas.restore();
    }

    public void setAccount(float account) {
    
    
        this.account = account;
        invalidate();
    }

}

attrs file wordview_attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="WordView">
        <attr name="mText" format="string"/>
        <attr name="mTextFirstColor" format="color"/>
        <attr name="mTextSecondColor" format="color"/>
        <attr name="mTextSize" format="dimension"/>
        <attr name="account" format="float"/>
    </declare-styleable>

</resources>

WordViewTestActivity.java

public class WordViewTestActivity extends AppCompatActivity {
    
    

    WordView word;
    SeekBar seekBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_word_view_test);
        seekBar = (SeekBar)findViewById(R.id.seekBar);
        word = (WordView)findViewById(R.id.word);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    
    
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
    
    
                word.setAccount((float)(i/100.0));
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
    
    

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
    
    

            }
        });
    }
}

activity_word_view_test.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cec1c1"
    tools:context=".WordViewTestActivity">

    <com.example.administrator.listviewadptwebjsonimg.WordView
        android:id="@+id/word"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        app:mText="I Love You"
        app:mTextFirstColor="#d60a47"
        app:mTextSecondColor="#FFFFFF"
        app:mTextSize="50sp"
        app:account="0.5"
        />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:progress="50"
        android:max="100"
        android:layout_below="@+id/word"/>

</RelativeLayout>