打折优惠券View

看到这个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);
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值