美文网首页
自定义View系列(五) 设置字体变色

自定义View系列(五) 设置字体变色

作者: Ayres | 来源:发表于2017-07-14 14:42 被阅读0次

    文字的测量高度


    图片.png

    宽度 测量调用 measureText
    文字居中显示

    高度的计算 :

    top + bottom -> bottom - top 最大高度
    ascent+descent --》 decent - accent 正常高度
    (ascent+descent ) 因为ascent为负数 所以 ---》descent-ascent

      Height/2  + (decent - accent)/2 - decent
      = Height/2 + decent/2  -accent/2 -decent
     = Height/2 - (decent + accent)/2
    

    所以高度居中的基准

        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float baseline = getHeight()/2 - (fontMetrics.descent + fontMetrics.ascent)/2;
    

    文字居中

        float left = getWidth()/2 -width/2;
        float right = left + width*mPercent;
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float baseline = getHeight()/2 - (fontMetrics.descent + fontMetrics.ascent)/2;
        canvas.drawText(mText,left,baseline ,paint);
    

    1.自定义属性

    attrs.xml文件中

     <declare-styleable name="ColorTrackTextView">
        <attr name="originColor" format="color"/>
        <attr name="changeColor" format="color"/>
     </declare-styleable>
    

    自定义类ColorTrackTextView

    public class ColorTrackTextView extends TextView {
    // 1. 实现一个文字两种颜色 - 绘制不变色字体的画笔
    private Paint mOriginPaint;
    //  实现一个文字两种颜色 - 绘制变色字体的画笔
    private Paint mChangePaint;
    
    public ColorTrackTextView(Context context) {
        this(context,null);
    }
    public ColorTrackTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public ColorTrackTextView(Context context, 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();
    }
    /**
     * 根据颜色获取画笔
     */
    private Paint getPaintByColor(int color) {
        Paint paint = new Paint();
        // 设置颜色
        paint.setColor(color);
        // 设置抗锯齿
        paint.setAntiAlias(true);
        // 防抖动
        paint.setDither(true);
        // 设置字体的大小  就是TextView的字体大小
        paint.setTextSize(getTextSize());
        return paint;
    }
    

    2.绘制Text

      //clipRect 可以裁剪 左边用一个画笔去画  右边用另一个画笔去画 不断地改变中间值
      @Override
      protected void onDraw(Canvas canvas) {
     //        super.onDraw(canvas);
        //裁剪区域
        //根据进度把中间值计算出来
        // 根据进度把中间值算出来
        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();
        paint.getTextBounds(text, 0, text.length(), bounds);
        // 获取字体的宽度
        int x = getWidth() / 2 - bounds.width() / 2;
        // 基线baseLine
        Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
        int dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        int baseLine = getHeight() / 2 + dy;
        canvas.drawText(text, x, baseLine, paint);// 这么画其实还是只有一种颜色
        canvas.restore();
    }
    

    3.设置不同方向

       private Direction mDirection=Direction.LEFT_TO_RIGHT;
       public enum Direction{
        LEFT_TO_RIGHT,RIGHT_TO_LEFT
      }
    

    4.提供对外开放的方法

    public void setmDirection(Direction direction) {
        this.mDirection = direction;
    }
    
    public void setmCurrentProgress(float currentProgress) {
        this.mCurrentProgress = currentProgress;
    
        invalidate();
    }
    
    public void setChangeColor(int changeColor) {
        this.mChangePaint.setColor(changeColor);
    }
    
    public void setOriginColor(int originColor) {
        this.mOriginPaint.setColor(originColor);
    }
    

    5.具体使用

         tv = (ColorTrackTextView) findViewById(R.id.tv);
    
            ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, 1);
          valueAnimator.setDuration(2000);
           valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float animatedValue = (float) animation.getAnimatedValue();
                    tv.setmCurrentProgress(animatedValue);
            }
        });
        valueAnimator.start();
    
    图片.png

    相关文章

      网友评论

          本文标题:自定义View系列(五) 设置字体变色

          本文链接:https://www.haomeiwen.com/subject/awqghxtx.html