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

Posted 2023-01-17 talk_8

文章目录

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

各位看官们大家好，上一回中咱们说的例子是绘制功能",这一回中咱们说的例子是"

自定义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>

上面的代码是自定义控件在布局中的使用方法，注意使用时控件的文字需要居中，最好指定控件的长度和宽度，这样才有一个好的显示效果。

运行程序后就会显示一个带圆圈的马字。我在这里就不演示运行结果了，希望大家自己动手去实践。

看官们，关于"自定义View实例：带圆圈的文字"的例子咱们就介绍到这里，欲知后面还有什么例子，且听下回分解！