Android中实现虚线边框包裹文字的两种方式

下面介绍实现下图所示效果的两种方式：

第一种是通过写shape布局文件来实现

给TextView设置background时引用此布局文件即可实现效果，shape布局文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

    <!-- 虚线边框的宽度，颜色等 -->
    <stroke
        android:dashGap="3dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="#63a219" >
    </stroke>

    <!-- 矩形的圆角半径 -->
    <corners android:radius="10dp" />

</shape>

stroke标签下为虚线框的主要设置，dashGap表示中间隔开一段距离，即定义了样式为虚线，效果图如下：

第二种方式是通过自定义View使之继承View，然后在onDraw方法中将虚线和文字用Paint画笔画出。

主要代码如下：

public class DashedSurroundTextView extends View {

    /**
     * mTextColor  文字颜色   mBorderColor 虚线边界颜色  mBorderWidth虚线边界宽度
     * mTextSizen  文字大小   mText  文字内容
     */
    private int mTextColor;
    private int mBorderColor;
    private float mBorderWidth;
    private float mTextSize;
    private String mText;

    private float start_x = 0;
    private float start_y = 0;
    private float padding = 5;

    private float baseLineLong = 10;
    private float radiusX = 20;
    private float radiusY = 20;

...

 public DashedSurroundTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取自定义参数
        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.DashedSurroundTextView);
        //虚线border颜色
        mBorderColor = typedArray.getColor(R.styleable.DashedSurroundTextView_border_color, Color.argb(0, 0, 0, 0));
        //虚线border宽度
        mBorderWidth = typedArray.getDimension(R.styleable.DashedSurroundTextView_border_width, 0);
        //字体颜色
        mTextColor = typedArray.getColor(R.styleable.DashedSurroundTextView_textColor, Color.argb(0, 0, 0, 0));
        //字体大小
        mTextSize = typedArray.getDimension(R.styleable.DashedSurroundTextView_textSize, 0);
        //显示文字
        mText = typedArray.getString(R.styleable.DashedSurroundTextView_text);
    }

...

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

        //创建文字画笔
        Paint textP = new Paint();
        textP.setColor(mTextColor);
        textP.setStyle(Paint.Style.FILL);
        textP.setTextSize(mTextSize);

        //StrokeWidth无需设置
        //textP.setStrokeWidth();

        //计算文字所占位置的大小
        Rect bounds = new Rect();
        textP.getTextBounds(mText, 0, mText.length(), bounds);
        canvas.drawText(mText, start_x, start_y + bounds.height() - padding, textP);

        //创建边界虚线画笔
        Paint borderP = new Paint();
        borderP.setColor(mBorderColor);
        borderP.setStyle(Paint.Style.FILL_AND_STROKE);
        borderP.setStrokeWidth(mBorderWidth);
        borderP.setAntiAlias(true);

        //画外面虚线边界
        RectF oval3 = new RectF(start_x, start_y, start_x + bounds.width() + padding * 2, start_y + bounds.height() + padding * 2);
        PathEffect effects = new DashPathEffect(new float[]{baseLineLong, baseLineLong}, 0);
        borderP.setPathEffect(effects);
        canvas.drawRoundRect(oval3, radiusX, radiusY, borderP);
    }

...

}

效果图如下：

虚线框的画线设置style为Paint.Style.FILL_AND_STROKE
new DashPathEffect(new float[]{baseLineLong, baseLineLong}, 0)表示画线先画长度为baseLineLong的实线，再画长度为baseLineLong的虚线，后面0是偏移量。
文字的画法较简单，计算好坐标即可。

完整示例代码地址：https://github.com/immrwk/DashedSurroundTextView