之前寫過一個(gè)傾斜角標(biāo)的實(shí)現(xiàn)效果轻纪，那么這次帶來另一種形式的角標(biāo)實(shí)現(xiàn)叠纷，雖然與上次的展示形式差別不大，但是實(shí)現(xiàn)方式大大不同讲岁，先來看下效果圖我擂。

角標(biāo)

實(shí)現(xiàn)原理

1.使用Path連接成一個(gè)三角形的形狀，繪制Path校摩；
2.繪制文字；

沒了衙吩，就這些互妓，很簡(jiǎn)單吧~

實(shí)現(xiàn)過程

這里以角標(biāo)顯示在右上角為例講解一下實(shí)現(xiàn)的過程坤塞，從效果圖來看，我們還需要考慮一個(gè)細(xì)節(jié)問題摹芙，那就是圓角，因?yàn)闉榱艘欢ǖ臄U(kuò)展性我們必須把這個(gè)細(xì)節(jié)考慮在內(nèi)浮禾，那么圓角的實(shí)現(xiàn)也很簡(jiǎn)單交胚，在頂端添加一小段圓弧即可盈电。

示意圖

繪制背景

從示意圖中看出，從1到2的位置lineTo匆帚，從2到3的位置addArc，從3到4以及再回到原點(diǎn)的位置lineTo吸重，最后形成一個(gè)封閉空間互拾，即可繪制完成嚎幸。

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);

那么這里的圓弧我們需要設(shè)置一個(gè)變量mRadius來控制這個(gè)圓角的大小，再根據(jù)此值計(jì)算圖中各個(gè)位置點(diǎn)的坐標(biāo)值鞭铆，然后操作Path，最后繪制即可车遂。

繪制文字

OK封断，到了最后一步了舶担，與以往的文字繪制不同，這次的文字有一個(gè)切斜的效果衣陶，所以我們考慮使用drawTextOnPath這個(gè)方法柄瑰，該方法可以沿著Path路徑繪制文本，來看一下參數(shù)都代表什么意思教沾。

/**
 * 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指繪制的文本內(nèi)容，path指路徑授翻，hOffset參數(shù)指定水平偏移或悲、vOffset指定垂直偏移堪唐，paint即畫筆。

根據(jù)我們想要的文字水平居中效果即可確定hOffset以及vOffset的值淮菠，代碼如下：

if (!TextUtils.isEmpty(mText)) {
    mPathText.moveTo(0, 0);
    mPathText.lineTo(getWidth(), getHeight());
    //測(cè)量文字的寬度
    float textWidth = mPaintText.measureText(mText);
    //求出對(duì)角線長度
    float diagonalWidth = (float) Math.sqrt(getWidth() * getWidth() + getHeight() * getHeight());
    //文字水平居中
    float hOffset = (diagonalWidth - textWidth) / 2;
    canvas.drawTextOnPath(mText, mPathText, hOffset, -mTextMarginBottom, mPaintText);
}

其中mTextMarginBottom的值是我自定義的一個(gè)可控變量，這里用來作為vOffset的實(shí)參傳遞進(jìn)去合陵。
為了提高控件的擴(kuò)展性靈活性理澎，我們還可以自定義一些屬性去更靈活的控制曙寡，比如顏色尺寸等寇荧，代碼如下：

<declare-styleable name="MarkerView">
    <!--角標(biāo)文字-->
    <attr name="mv_text" format="string" />
    <!--角標(biāo)文字尺寸-->
    <attr name="mv_textSize" format="dimension" />
    <!--角標(biāo)文字顏色-->
    <attr name="mv_textColor" format="color" />
    <!--角標(biāo)背景顏色-->
    <attr name="mv_backgroundColor" format="color" />
    <!--角標(biāo)背景圓角-->
    <attr name="mv_backgroundRadius" format="dimension" />
    <!--角標(biāo)文字距離底部的距離-->
    <attr name="mv_textMarginBottom" format="dimension" />
    <!--角標(biāo)所處位置-->
    <attr name="mv_gravityPosition" format="enum">
        <enum name="leftTop" value="1" />
        <enum name="rightTop" value="2" />
    </attr>
</declare-styleable>

然后在構(gòu)造函數(shù)中使用TypedArray獲取這些屬性值就可以了，具體請(qǐng)看完整代碼揩抡。

完整代碼

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 {

    /**
     * 繪制角標(biāo)的畫筆
     */
    private Paint mPaint;
    /**
     * 繪制角標(biāo)文字的畫筆
     */
    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();
    /**
     * 角標(biāo)文字的路徑Path
     */
    private Path mPathText = new Path();
    /**
     * 背景色 默認(rèn)紅色
     */
    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);
            //測(cè)量文字的寬度
            float textWidth = mPaintText.measureText(mText);
            //求出對(duì)角線長度
            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());
            //測(cè)量文字的寬度
            float textWidth = mPaintText.measureText(mText);
            //求出對(duì)角線長度
            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);
    }
}