当前位置：首页 > news >正文

自定义view - 玩转字体变色

news 2025/8/14 3:37:17

自定义View步骤：
1>：values__attrs.xml，定义自定义属性；
2>：在第三个构造方法中获取自定义属性；
3>：onMeasure【不是必须的】；
4>：onDraw：绘制代码全都在onDraw中写的；
这篇文章主要是结合属性动画自定义一个文字变色的view。先来看效果图。
在这里插入图片描述技术分析：
不能用TextView，因为系统的TextView只能有一种颜色，需要ColorTraceTextView，继承TextView，而不是继承View，原因是：
1>：继承TextView不用自己手动实现onMeasure、onDraw，系统已经实现了；
2>：textColor、textSize属性TextView已经实现了，不用自己实现；
3>: 自定义属性a.不变的颜色 origincolor b.变化的颜色 changcolor

1.字体颜色

自定义属性：attrs.xml

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

使用属性：avtivity_main.xml

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="16dp"android:paddingLeft="16dp"android:paddingRight="16dp"android:paddingTop="16dp"android:orientation="vertical"tools:context=".MainActivity"><com.example.view_day04.ColorTrackTextViewandroid:id="@+id/ColorTrackTextView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="hello world"android:textSize="20sp"app:changeColor ="@color/purple_200"app:originColor = "@color/black"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="左到右"android:onClick="leftToRight"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="右到左"android:onClick="rightToLeft"/></LinearLayout>

2.自定义View–初始化、获取画笔、绘制、实现不同朝向

ColorTrackTextView.java

2.1.初始化、画笔、绘制

public class ColorTrackTextView extends TextView{// 绘制不变色的画笔private Paint mOriginPaint ;// 绘制变色的画笔private Paint mChangePaint ;private float mCurrentProgress = 0.0f;private Direction mDirection;//实现不同朝向public enum Direction {LEFT_TO_RIGHT,RIGHT_TO_LEFT}public ColorTrackTextView(Context context) {this(context, null);}public ColorTrackTextView(Context context, @Nullable @org.jetbrains.annotations.Nullable AttributeSet attrs) {this(context, attrs, 0);}public ColorTrackTextView(Context context, @Nullable @org.jetbrains.annotations.Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initPaint(context, attrs);}private void initPaint(Context context, AttributeSet attrs){TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ColorTrackText);// 此处颜色传递默认值，防止你在布局文件中没有指定颜色int originColor = typedArray.getColor(R.styleable.ColorTrackText_originColor, getTextColors().getDefaultColor());int changeColor = typedArray.getColor(R.styleable.ColorTrackText_changeColor, getTextColors().getDefaultColor());mOriginPaint = getPaintByColor(originColor);mChangePaint = getPaintByColor(changeColor);typedArray.recycle();}private Paint getPaintByColor(int color) {Paint paint = new Paint() ;// 给画笔设置颜色paint.setColor(color);// 设置抗锯齿paint.setAntiAlias(true);// 仿抖动paint.setDither(true);// 设置文字大小,拿到布局中的Textsizepaint.setTextSize(getTextSize());return paint;}//利用cliprect可以裁剪，左边用一个画笔去画，右边用另一个画笔去画 不断地改变中间值@Overrideprotected void onDraw(Canvas canvas) {//根据进度把中间值是算出来int middle = (int)(mCurrentProgress * getWidth());if (mDirection == Direction.LEFT_TO_RIGHT) {//绘制不变色的drawText(canvas,mOriginPaint,0, middle);//绘制变色的drawText(canvas,mChangePaint,middle, getWidth());} else {// 右-左：drawText(canvas , mChangePaint , getWidth()-middle , getWidth());drawText(canvas , mOriginPaint , 0 , getWidth()-middle);}}/*** 画文字*/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() ;paint.getTextBounds(text,0,text.length(),bounds);// 获取字体宽度int x = getWidth()/2 - bounds.width()/2;// 基线计算方式Paint.FontMetricsInt fontMetricsInt = paint.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 color){this.mChangePaint.setColor(color);}}