Paste_Image.png
大概的原理图如上，将绿色部分绘制出来后，再将文本斜着居中绘制到红色中心点处。
以左图为例，设View的宽=高=width=height，为正方形
1.绘制阴影区
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.按照上面的步骤做完后，文字是呈水平居中的，因此我们还有做旋转处理以达到文字是斜着居中在阴影区的
在绘制文字之前将画布进行逆时针旋转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
