一起Talk Android吧（第四百七十回：自定义View实例一：带圆圈的文字)

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

文章目录

使用场景
实现思路
示例代码

各位看官们大家好上一回中咱们说的例子是绘制功能",这一回中咱们说的例子是" 自定义View实例带圆圈的文字"。闲话休提言归正转让我们一起Talk Android吧

使用场景

在象棋类游戏中需要在文字外面添加一个圆圈,最初的想法是给TextVeiw添加圆圈背景这个方法确实可行后来想换一种思路做一个自带圆圈的TextView。于是就
需要通过自定义View来实现。

实现思路

首先画出文字然后在文字外围画一个圆圈文字使用现有的TextView组件画圆圈使用画布的方法。此思路属于自定义View思路中的第一个思路扩展系统控件。因此
测量和布局功能使用TextView自有的功能只需要重写绘制功能在绘制功能中画一个圆圈就可以。

示例代码

有了思路后就依据思路来操作下面是具体的操作方法和示例代码

定义一个类该继承自TextView
实现类的构造方法在构造方法中初始化画笔相关内容
重写父类的onDraw()方法在该方法中画一个圆圆

public class CustomText extends androidx.appcompat.widget.AppCompatTextView {
    private int mWidth;
    private int mHeight;
    private int mMargin;
    private Paint mPaint;

    public CustomText(@NonNull Context context) {
        super(context);
        init();
    }

    public CustomText(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomText(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLUE);
        mMargin = 4;

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mWidth = getWidth();
        mHeight = getHeight();

        canvas.drawCircle(mWidth/2,mHeight/2,mWidth/2-mMargin,mPaint);
    }

在上面的代码中通过控件的长度和宽度计算出圆圈的圆心位置和半径长度。这样就可以直接使用画布的drawCircle()方法画出圆圈了。另外还有一些内容需要说明。

代码中的变量mMargin用来控制文字和圆圆之间的距离大家可以自行设定。
这个程序还有一个缺点无法扩展到多个文字就是说文字的数量只能是一个如果超过一个后圆圈就显示不全了我们计算圆圈的半径时使用的是控件的宽度文字变长后控件宽度变大圆圈的半径也随着变大但是文字的高度没有变所以圆圈显示不完整。

   <com.ui.CustomText
        android:text="马"
        android:gravity="center"
        android:layout_width="30dp"
        android:layout_height="30dp">
    </comui.CustomText>