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