看到这个View很有意思:
于是决定自己下手实现一个:
效果如下图
具体的实现不是很复杂,详细请看代码:
package com.discountframeview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
/**
* @Description: 打折框
* @Author: Liangchaojie
* @Create On 2017/12/28 17:46
*/
public class DiscountFrameView extends View{
private Paint paintLeft;//画左边文字的画笔
private Paint paintCenter;
private Paint mPaint;//画打折斜三角和矩形的画笔
public DiscountFrameView(Context context) {
this(context,null);
}
public DiscountFrameView(Context context, @Nullable AttributeSet attrs) {
this(context,attrs,0);
}
public DiscountFrameView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
paintLeft = new Paint(Paint.ANTI_ALIAS_FLAG);
paintCenter = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
//画矩形
drawRec(canvas,mPaint,width,height);
//画斜三角
drawObliqueTriangle(canvas,mPaint);
//画斜三角内部的文字
drawObliqueTriangleText(canvas);
//画中间的文字
drawText(canvas);
}
private void drawRec(Canvas canvas, Paint mPaint, int width, int height) {
mPaint.setColor(getResources().getColor(R.color.background));
canvas.drawRect(0,0,width,height,mPaint);
}
private void drawObliqueTriangle(Canvas canvas, Paint mPaint) {
mPaint.setColor(getResources().getColor(R.color.red));
Path path=new Path();
path.moveTo(0,0);
path.lineTo(getHeight(),0);
path.lineTo(0,getHeight());
path.close();
canvas.drawPath(path,mPaint);
}
private void drawObliqueTriangleText(Canvas canvas) {
paintLeft.setColor(Color.WHITE);
paintLeft.setTextSize(40);
Path p1 = new Path();
p1.moveTo(0,getHeight());
p1.lineTo(getHeight(),0);
//沿着path去画文字容易很多,注意这里hOffest和vOffest是指沿着path的方向水平或者垂直偏移的大小,向下为正,向上为负
canvas.drawTextOnPath("7.5折",p1, (float) (Math.sqrt(2)*getHeight()/4),-6,paintLeft);
}
private void drawText(Canvas canvas) {
paintCenter.setColor(getResources().getColor(R.color.black));
paintCenter.setTextSize(60);
paintCenter.setFakeBoldText(true);
Rect rect1=new Rect();
paintCenter.getTextBounds("3个月300元",0,"3个月300元".length(),rect1);
int x = getWidth()/2-rect1.centerX();
int y = getHeight()/2 - rect1.centerY();
canvas.drawText("3个月300元",x,y, paintCenter);
paintCenter.setColor(getResources().getColor(R.color.grey));
paintCenter.setTextSize(40);
paintCenter.setFakeBoldText(false);
paintCenter.setFlags(Paint.STRIKE_THRU_TEXT_FLAG);
Rect rect2=new Rect();
paintCenter.getTextBounds("360元",0,"360元".length(),rect2);
int x1 = getWidth()/2-rect1.centerX()+rect1.width();
int y1 = getHeight()/2 - rect2.centerY();
canvas.drawText("360元",x1,y1, paintCenter);
}
}