Paste_Image.png

大概的原理圖如上镜盯，將綠色部分繪制出來后，再將文本斜著居中繪制到紅色中心點處揩页。
以左圖為例旷偿，設View的寬=高=width=height，為正方形

1.繪制陰影區(qū)

Path p = new Path();
p.moveTo(0, 0);
p.lineTo(width / 2, 0);
p.lineTo(width, height / 2);
p.lineTo(width, height);
p.close();
Paint backGroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
backGroundPaint.setColor(Color.RED);
backGroundPaint.setStyle(Paint.Style.FILL);
canvas.drawPath(p, backGroundPaint);

2.計算中心點位置

int x = width/8*3;
int y = x;

3.繪制文字

Paint  textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setColor(textColor);
textPaint.setTextSize(textSize);
String textContent="角標";
canvas.drawText(textContent, 5 * width / 8, 3 * width /8 , textPaint);

因為文字居中有個Baseline碍沐，因此在繪制文字的時候要獲取文字的高度狸捅，在Y軸上做偏移處理

Rect mrect = new Rect();
textPaint.getTextBounds(textContent, 0, textContent.length(), mrect);
canvas.drawText(textContent, 3 * width / 8, 3 * width /8 + mrect.height() / 2, textPaint);

4.按照上面的步驟做完后，文字是呈水平居中的累提，因此我們還有做旋轉處理以達到文字是斜著居中在陰影區(qū)的
在繪制文字之前將畫布進行逆時針旋轉45度即可

canvas.rotate(-45, 3 * width / 8, 3 * width / 8);
canvas.drawText(textContent, 3 * width / 8, 3 * width /8 + mrect.height() / 2, textPaint);

貼個代碼尘喝，其中定義了styleable

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CornerFlagView">
        <!--文本大小-->
        <attr name="cfv_textSize" format="dimension"/>
        <!--文本內容-->
        <attr name="cfv_textContent" format="string"/>
        <!--文本顏色-->
        <attr name="cfv_textColor" format="color"/>
        <!--背景顏色-->
        <attr name="cfv_backgroundColor" format="color"/>
        <!--陰影是否占滿上角-->
        <attr name="cfv_fullCorner" format="boolean"/>
        <!--傾斜放向-->
        <attr name="cfv_orientation" format="enum">
            <!--右角標，向左側傾斜-->
            <enum name="right" value="0"/>
            <!--左角標斋陪，向右側傾斜-->
            <enum name="left" value="1"/>
        </attr>
    </declare-styleable>
</resources>

JAVA代碼

package com.uqi.qiqi.widget;
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.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import com.uqi.qiqi.R;
/** * Created by Shuxin on 2016/7/29. */
public class CornerFlagView extends View {
    private Context xContext;
    /**     * View 的寬高     **/
    private int width, height;
    /**     * 需要繪制的文本     */
    private String textContent = "";
    /**     * 文本的字體大小     */
    private float textSize = 22;
    /**     * 背景的顏色     */
    private int backGroundColor = Color.RED;
    /**     * 文本顏色     **/
    private int textColor = Color.WHITE;
    /**     * 是否占滿全角     */
    private boolean isFullCorner = false;
    /**     * 文本方向朽褪，只有向左傾斜和向右傾斜     **/
    private int orientation = 0;
    /**     * 處理文本的畫筆     */
    private Paint textPaint;
    /**     * 處理背景的畫筆     */
    private Paint backGroundPaint;
    /**     *屏幕密度    */ 
    private float scale;
    public void setTextContent(String pTextContent) {
        this.textContent = pTextContent;
        invalidate();
    }
    public void setBackGroundColor(int pBackGroundColor) {
        this.backGroundColor = pBackGroundColor;
        invalidate();
    }
    public void setTextColor(int pTextColor) {
        this.textColor = pTextColor;
        invalidate();
    }
    public void setTextSize(float pTextSize) {
        this.textSize = pTextSize;
        invalidate();
    }
    public CornerFlagView(Context context) {
        super(context);
        this.xContext = context;
        intPaint();
    }
    public CornerFlagView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.xContext = context;
        initAttr(attrs);
        intPaint();
    }
    public CornerFlagView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.xContext = context;
        initAttr(attrs);
        intPaint();
    }
    private void initAttr(AttributeSet attrs) {
        TypedArray ta = xContext.obtainStyledAttributes(attrs, R.styleable.CornerFlagView);
        textSize = ta.getDimension(R.styleable.CornerFlagView_cfv_textSize, 22);
        textContent = ta.getString(R.styleable.CornerFlagView_cfv_textContent);
        textColor = ta.getColor(R.styleable.CornerFlagView_cfv_textColor, Color.BLACK);
        backGroundColor = ta.getColor(R.styleable.CornerFlagView_cfv_backgroundColor, Color.RED);
        isFullCorner = ta.getBoolean(R.styleable.CornerFlagView_cfv_fullCorner, false);
        orientation = ta.getInt(R.styleable.CornerFlagView_cfv_orientation, 0);
        ta.recycle();
    }
    private void intPaint() {
        scale=xContext.getResources().getDisplayMetrics().density;
        backGroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        backGroundPaint.setColor(backGroundColor);
        backGroundPaint.setStyle(Paint.Style.FILL);

        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      Paint pTextPaint = new Paint();
      pTextPaint.setTextAlign(Paint.Align.CENTER);
      pTextPaint.setTextSize(textSize);
      Rect mrect = new Rect();
      pTextPaint.getTextBounds(textContent, 0, textContent.length(), mrect);
      int specmode = MeasureSpec.getMode(widthMeasureSpec);
      if(specmode == MeasureSpec.AT_MOST){
          int padding =  (int)(8*scale+0.5f);
          int contentWidth = mrect.width()+ padding;
          int contentHeight = mrect.height() + padding;
          int width = (int)Math.sqrt(contentWidth*contentWidth+contentHeight*contentHeight);
          setMeasuredDimension(width,width);
      }else {
          setMeasuredDimension(widthMeasureSpec,widthMeasureSpec);
      }
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        backGroundPaint.setColor(backGroundColor);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
        if (textContent == null) textContent = "";
        Path p = new Path();
        if (orientation == 0) {
            p.moveTo(0, 0);
            if (!isFullCorner) {
                p.lineTo(width / 2, 0);
                p.lineTo(width, height / 2);
            } else {
                p.lineTo(width, 0);
            }
            p.lineTo(width, height);
            p.close();
        } else {
            p.moveTo(width, 0);
            if (!isFullCorner) {
                p.lineTo(width / 2, 0);
                p.lineTo(0, height / 2);
            } else {
                p.lineTo(0, 0);
            }
            p.lineTo(0, height);
            p.close();
        }
        canvas.drawPath(p, backGroundPaint);
        Rect mrect = new Rect();
        textPaint.getTextBounds(textContent, 0, textContent.length(), mrect);
        if (orientation == 0) {
            canvas.rotate(45, 5 * width / 8, 3 * width / 8);
            canvas.drawText(textContent, 5 * width / 8, 3 * width /8 + mrect.height() / 2, textPaint);
        } else {
            canvas.rotate(-45, 3 * width / 8, 3 * width / 8);
            canvas.drawText(textContent, 3 * width / 8, 3 * width /8 + mrect.height() / 2, textPaint);
        }
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        this.width = w;
        this.height = w;
    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.uqi.qiqi.MainActivity">
    <com.uqi.qiqi.widget.CornerFlagView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cfv_backgroundColor="#cf0"
        app:cfv_orientation="right"
        app:cfv_textContent="未領取"
        app:cfv_textColor="#fff"
        app:cfv_fullCorner="false"
        app:cfv_textSize="16sp" 
       />
    <com.uqi.qiqi.widget.CornerFlagView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cfv_backgroundColor="#abc"
        app:cfv_orientation="left"
        app:cfv_textContent="已領取"
        app:cfv_textColor="#000"
        app:cfv_fullCorner="false"
        app:cfv_textSize="16sp"
        />
    <com.uqi.qiqi.widget.CornerFlagView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cfv_backgroundColor="#1af"
        app:cfv_orientation="right"
        app:cfv_textContent="未領取"
        app:cfv_textColor="#dca"
        app:cfv_fullCorner="true"
        app:cfv_textSize="17sp"
        />
    <com.uqi.qiqi.widget.CornerFlagView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cfv_backgroundColor="#34a"
        app:cfv_orientation="left"
        app:cfv_textContent="已領取"
        app:cfv_textColor="#cda"
        app:cfv_fullCorner="true"
        app:cfv_textSize="18sp"
        />
</LinearLayout>

Paste_Image.png