安卓绘制动态文字

前言：

利用安卓画板绘制文字，外部添加点击事件，改变文字属性的值，实现绘制动态文字

概述：

• 环境：Android Studio 3.42
• 语言：Java
• 特点：简单，易懂，效果爆炸

展示：

image.png

原理：首先绘制一个外圆，再在中心绘制文字，通过set，get方法，外部点击实现比值rate的变化，再重新赋值给text

代码详解

自定义view类，绘制圆和文字

public class CircleViewText extends View {

属性

    Paint mPaint;//绘制圆
    TextPaint textPaint;//绘制文字
    private int lineSize = 10;//画笔大小
    private float rate;//比率
    String text = rate*100+"%";//显示文本
    //视图中心坐标
    float centerX;
    float centerY;
    int number = 0;

    public CircleViewText(Context context) {

        super(context);
        init();
    }

初始化画笔

    private void init(){
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG|Paint.DITHER_FLAG);
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(lineSize);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setColor(Color.MAGENTA);
        textPaint.setTextSize(40);
    }

设置比值rate,改变文本text的值（外部点击事件实现），也可以通过动画自动变化，不需要认为去点击操纵，下一篇文章会提到，点击这里查看安卓组合动画

 
public float getRate() {
        return rate;
    }

    public void setRate(float rate) {
        this.rate = rate;
        //比值不超过1
        if (rate>1.01){
            rate = 1;
        }
        //转化为整型
        int count = (int)(rate * 100);
        text = count + "%";//显示文本
        invalidate();
    }

Paint使用FontMetricsInt获取和文字有关的各基线整数值

public static class FontMetricsInt {
        /**
         * The maximum distance above the baseline for the tallest glyph in
         * the font at a given text size
         */
        public int   top;
        /**
         * The recommended distance above the baseline for singled spaced text.
         */
        public int   ascent;
        /**
         * The recommended distance below the baseline for singled spaced text.
         */
        public int   descent;
        /**
         * The maximum distance below the baseline for the lowest glyph in
         * the font at a given text size.
         */
        public int   bottom;
        /**
         * The recommended additional space to add between lines of text.
         */
        public int   leading;

        @Override public String toString() {
            return "FontMetricsInt: top=" + top + " ascent=" + ascent +
                    " descent=" + descent + " bottom=" + bottom +
                    " leading=" + leading;
        }
    }

它的各基准线（别人画的，这里引用下，实在不懂，可以点击这里查看）

image.png
以base为基线，参照上图

属性	含义
top	给定文本大小时，字体中最高字形高于基线的最大距离。
ascent	高于基线的推荐距离。
dscent	低于基线的推荐距离。
bottom	给定文本大小时，字体中最低字形低于基线的最大距离。
leading	建议在文本行之间添加的额外空间

注意：ascent+dscent = 文字的高度Height，而且ascent值为负，dscent的值为正，所以我们要想文字垂直居中对齐，需要在
X坐标加上文字宽度的一半，然后在Y坐标减去ascent值的一半，实际Y坐标向下移动了一半 ascent的距离

容器ViewGroup，添加CircleView到容器里，并添加点击事件，改变文字值

public class GroupView extends ViewGroup {

    Context context;
    CircleView mCircleView;

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

    public GroupView(Context context, AttributeSet attrs) {

        super(context, attrs);
        this.context = context;
    }

    //对子视图进行布局
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        mCircleView = new CircleView(context);
        mCircleView.layout(0,0,getWidth(),getHeight());
        addView(mCircleView);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        float rate = mCircleView.getRate();
        if (event.getAction() == MotionEvent.ACTION_DOWN)
        {
            mCircleView.setRate(rate += 0.05);
        }

        return true;
    }
}

最后在xml文件里调用

    <me.jrl.demo33.GroupView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true">
    </me.jrl.demo33.GroupView>

总结:通过这个项目，我们能够初步了解安卓绘制文字的简单方法和属性，下一篇文章将实现安卓绘制贝塞尔曲线，谢谢大家的阅读~。