之前写过一个倾斜角标的实现效果，那么这次带来另一种形式的角标实现，虽然与上次的展示形式差别不大，但是实现方式大大不同，先来看下效果图。
角标
实现原理
1.使用Path连接成一个三角形的形状，绘制Path；
2.绘制文字；
没了，就这些，很简单吧~
实现过程
这里以角标显示在右上角为例讲解一下实现的过程，从效果图来看，我们还需要考虑一个细节问题，那就是圆角，因为为了一定的扩展性我们必须把这个细节考虑在内，那么圆角的实现也很简单，在顶端添加一小段圆弧即可。
示意图
绘制背景
从示意图中看出，从1到2的位置lineTo，从2到3的位置addArc，从3到4以及再回到原点的位置lineTo，最后形成一个封闭空间，即可绘制完成。
path.moveTo(0, 0);
path.lineTo(getWidth() - mRadius, 0);
path.addArc(new RectF(getWidth() - mRadius, 0, getWidth(), mRadius), -90, 90);
path.lineTo(getWidth(), getHeight());
path.lineTo(0, 0);
path.close();
//绘制
canvas.drawPath(path, mPaint);
那么这里的圆弧我们需要设置一个变量mRadius来控制这个圆角的大小，再根据此值计算图中各个位置点的坐标值，然后操作Path，最后绘制即可。
绘制文字
OK，到了最后一步了，与以往的文字绘制不同，这次的文字有一个切斜的效果，所以我们考虑使用drawTextOnPath这个方法，该方法可以沿着Path路径绘制文本，来看一下参数都代表什么意思。
/**
* Draw the text, with origin at (x,y), using the specified paint, along the specified path. The
* paint's Align setting determins where along the path to start the text.
*
* @param text The text to be drawn
* @param path The path the text should follow for its baseline
* @param hOffset The distance along the path to add to the text's starting position
* @param vOffset The distance above(-) or below(+) the path to position the text
* @param paint The paint used for the text (e.g. color, size, style)
*/
public void drawTextOnPath(@NonNull String text, @NonNull Path path, float hOffset,
float vOffset, @NonNull Paint paint) {
super.drawTextOnPath(text, path, hOffset, vOffset, paint);
}
其中text指绘制的文本内容，path指路径，hOffset参数指定水平偏移、vOffset指定垂直偏移，paint即画笔。
根据我们想要的文字水平居中效果即可确定hOffset以及vOffset的值，代码如下：
if (!TextUtils.isEmpty(mText)) {
mPathText.moveTo(0, 0);
mPathText.lineTo(getWidth(), getHeight());
//测量文字的宽度
float textWidth = mPaintText.measureText(mText);
//求出对角线长度
float diagonalWidth = (float) Math.sqrt(getWidth() * getWidth() + getHeight() * getHeight());
//文字水平居中
float hOffset = (diagonalWidth - textWidth) / 2;
canvas.drawTextOnPath(mText, mPathText, hOffset, -mTextMarginBottom, mPaintText);
}
其中mTextMarginBottom的值是我自定义的一个可控变量，这里用来作为vOffset的实参传递进去。
为了提高控件的扩展性灵活性，我们还可以自定义一些属性去更灵活的控制，比如颜色尺寸等，代码如下：
<declare-styleable name="MarkerView">
<!--角标文字-->
<attr name="mv_text" format="string" />
<!--角标文字尺寸-->
<attr name="mv_textSize" format="dimension" />
<!--角标文字颜色-->
<attr name="mv_textColor" format="color" />
<!--角标背景颜色-->
<attr name="mv_backgroundColor" format="color" />
<!--角标背景圆角-->
<attr name="mv_backgroundRadius" format="dimension" />
<!--角标文字距离底部的距离-->
<attr name="mv_textMarginBottom" format="dimension" />
<!--角标所处位置-->
<attr name="mv_gravityPosition" format="enum">
<enum name="leftTop" value="1" />
<enum name="rightTop" value="2" />
</attr>
</declare-styleable>
然后在构造函数中使用TypedArray获取这些属性值就可以了，具体请看完整代码。
完整代码
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import com.zhuyong.progressbar.R;
public class MarkerView extends View {
/**
* 绘制角标的画笔
*/
private Paint mPaint;
/**
* 绘制角标文字的画笔
*/
private Paint mPaintText;
/**
* 文字距离底部的距离
*/
private float mTextMarginBottom = 5;
/**
* 圆角
*/
private float mRadius = 0;
/**
* 左上角还是右下角
*/
private int location;
/**
* 绘制在左上角
*/
public static final int LEFT_TOP = 1;
/**
* 绘制在右上角
*/
public static final int RIGHT_TOP = 2;
/**
* 背景Path
*/
private Path path = new Path();
/**
* 角标文字的路径Path
*/
private Path mPathText = new Path();
/**
* 背景色 默认红色
*/
private int mBackgroundColor = Color.RED;
/**
* 文字颜色
*/
private int mTextColor = Color.WHITE;
/**
* 文字尺寸
*/
private float mTextSize = 12;
/**
* 文字
*/
private String mText = "";
public MarkerView(Context context) {
this(context, null);
}
public MarkerView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public MarkerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//使用TypedArray获取自定义属性值
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MarkerView);
location = array.getInt(R.styleable.MarkerView_mv_gravityPosition, 2);
mRadius = array.getDimension(R.styleable.MarkerView_mv_backgroundRadius, mRadius);
mBackgroundColor = array.getColor(R.styleable.MarkerView_mv_backgroundColor, mBackgroundColor);
mTextMarginBottom = array.getDimension(R.styleable.MarkerView_mv_textMarginBottom, dip2px(context, mTextMarginBottom));
mText = array.getString(R.styleable.MarkerView_mv_text);
mTextColor = array.getColor(R.styleable.MarkerView_mv_textColor, mTextColor);
mTextSize = array.getDimension(R.styleable.MarkerView_mv_textSize, sp2px(context, mTextSize));
array.recycle();
init();
}
/**
* 初始化Paint
*/
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(mBackgroundColor);
mPaint.setStyle(Paint.Style.FILL);
mPaintText = new Paint();
mPaintText.setAntiAlias(true);
mPaintText.setColor(mTextColor);
mPaintText.setStyle(Paint.Style.FILL);
mPaintText.setTextSize(mTextSize);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (location == LEFT_TOP) {
drawLeftTop(canvas);
} else {
drawRightTop(canvas);
}
}
/**
* 绘制在左上角
*
* @param canvas
*/
private void drawLeftTop(Canvas canvas) {
path.moveTo(0, getHeight());
path.lineTo(0, mRadius);
path.addArc(new RectF(0, 0, mRadius, mRadius), -180, 90);
path.lineTo(getWidth(), 0);
path.lineTo(0, getHeight());
path.close();
canvas.drawPath(path, mPaint);
if (!TextUtils.isEmpty(mText)) {
mPathText.moveTo(0, getHeight());
mPathText.lineTo(getWidth(), 0);
//测量文字的宽度
float textWidth = mPaintText.measureText(mText);
//求出对角线长度
float diagonalWidth = (float) Math.sqrt(getWidth() * getWidth() + getHeight() * getHeight());
//文字水平居中
float hOffset = (diagonalWidth - textWidth) / 2;
canvas.drawTextOnPath(mText, mPathText, hOffset, -mTextMarginBottom, mPaintText);
}
}
/**
* 绘制在右上角
*
* @param canvas
*/
private void drawRightTop(Canvas canvas) {
path.moveTo(0, 0);
path.lineTo(getWidth() - mRadius, 0);
path.addArc(new RectF(getWidth() - mRadius, 0, getWidth(), mRadius), -90, 90);
path.lineTo(getWidth(), getHeight());
path.lineTo(0, 0);
path.close();
canvas.drawPath(path, mPaint);
if (!TextUtils.isEmpty(mText)) {
mPathText.moveTo(0, 0);
mPathText.lineTo(getWidth(), getHeight());
//测量文字的宽度
float textWidth = mPaintText.measureText(mText);
//求出对角线长度
float diagonalWidth = (float) Math.sqrt(getWidth() * getWidth() + getHeight() * getHeight());
//文字水平居中
float hOffset = (diagonalWidth - textWidth) / 2;
canvas.drawTextOnPath(mText, mPathText, hOffset, -mTextMarginBottom, mPaintText);
}
}
public float getmTextMarginBottom() {
return mTextMarginBottom;
}
public void setmTextMarginBottom(float mTextMarginBottom) {
this.mTextMarginBottom = mTextMarginBottom;
}
public float getmRadius() {
return mRadius;
}
public void setmRadius(float mRadius) {
this.mRadius = mRadius;
}
public int getLocation() {
return location;
}
public void setLocation(int location) {
this.location = location;
}
public int getmBackgroundColor() {
return mBackgroundColor;
}
public void setmBackgroundColor(int mBackgroundColor) {
this.mBackgroundColor = mBackgroundColor;
}
public int getmTextColor() {
return mTextColor;
}
public void setmTextColor(int mTextColor) {
this.mTextColor = mTextColor;
}
public float getmTextSize() {
return mTextSize;
}
public void setmTextSize(float mTextSize) {
this.mTextSize = mTextSize;
}
public String getmText() {
return mText;
}
public void setmText(String mText) {
this.mText = mText;
}
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
public static int sp2px(Context context, float spValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
}
}
