Android实现掌盟战绩图（矩形进度条）

掌上英雄联盟App有一个页面我挺感兴趣的，就是荣誉详情页面，上面记录了你玩游戏所获得所有荣誉和战绩（如下图所示）

尤其是里面的胜54% 1193场 这个矩形进度条越看越喜欢，就想自己也自定义一个view，说干就干。

下面是我的粗糙的实现：

看起来还是有点差距，不过功能是和原图是一样的，大家先仔细看原图里面的细节然后下面详细我分享下实现过程：

思路：

View包括三部分，最底部是灰色外边框，中间是蓝色的梯形框（注意梯形颜色是渐变的）最外层是文字部分

这里需要提到的是梯形框

绘制梯形:

我们看到图上有两个梯形，AX1X3D和AX2CD这两个梯形有什么不一样呢？因为梯形的面积=矩形面积*progress/100，所以我们在前期绘制梯形的时候可以根据角度（Y1X1X3）和progress来确定X1和X3的坐标，但是如果X3的坐标达到了C，如果比例还在增加，总不能X3位置挪到C的右边吧？

那这个时候该怎么办呢？办法就是改变角（Y2X2C），X2往后B方向移动，这样角度变大，增加了梯形的面积，所以这里需要注意这两种情况。

源码：

package com.test.percentview;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import com.test.R;

import static android.graphics.Paint.ANTI_ALIAS_FLAG;

/**
 * @Description: 矩形进度条
 * @Author: Liangchaojie
 * @Create On 2017/12/13 9:05
 */

public class RectangleProgressBar extends View {
    private int progress;
    private double angelValue =30;//注意这里需要的是弧度,默认是30度
    private int color_in_start;
    private int color_in_end;
    private int color_out;
    private Paint mPaint = null;
    private Paint mPaintText = null;//专门用来画文字部分
    private Path mPath = null;

    public synchronized void setText1(String text1) {
        this.text1 = text1;
        init();
        invalidate();
    }

    public synchronized void setText2(String text2) {
        this.text2 = text2;
        init();
        invalidate();
    }

    private String text1="胜率55%";
    private String text2="1139场";
    public RectangleProgressBar(Context context) {
        this(context, null);
    }
    public RectangleProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RectangleProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RectangleProgressBar);
        angelValue = a.getInteger(R.styleable.RectangleProgressBar_bar_angel, 30);
        progress = a.getInteger(R.styleable.RectangleProgressBar_bar_progress, 50);
        a.recycle();
    }

    public synchronized void setProgress(int progress) {
        this.progress = progress;
        init();
        invalidate();
    }

    public synchronized void setAngelValue(int angelValue) {
        this.angelValue = angelValue;
        init();
        invalidate();
    }

    private void init() {
        mPaint = new Paint(ANTI_ALIAS_FLAG);
        mPaintText = new Paint(ANTI_ALIAS_FLAG);
        mPath = new Path();
        color_out = getResources().getColor(R.color.out_color);
        color_in_start = getResources().getColor(R.color.in_start_color);
        color_in_end = getResources().getColor(R.color.in_end_color);
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int w = getWidth();
        int h = getHeight();
        judgeAngel();//如果角度在0-90度之外就转换成默认的30度
        double angle =  (Math.PI * angelValue / 180);//角度转成弧度，因为tan方法只可以接受弧度单位

        //画最外面的边框
        drawOutRec(canvas, w, h);

        //画梯形
        drawLadderBig(canvas, w, h,angle);

        //画文本
        drawTextRec(canvas, h);
    }

    private void drawTextRec(Canvas canvas, int h) {
        mPaintText.setColor(Color.WHITE);
        mPaintText.setTextSize(60);
        mPaintText.setFakeBoldText(true);
        Rect rect1=new Rect();
        Rect rect2=new Rect();
        mPaintText.getTextBounds(text1,0,text1.length(),rect1);
        mPaintText.getTextBounds(text2,0,text2.length(),rect2);
        int x = 24;//默认距离左边8dp（8dp~24px）
        int text_right = 24 + rect1.right+24;
        int y = h/2 - rect1.centerY();
        canvas.drawText(text1,x,y, mPaintText);
        mPaintText.setFakeBoldText(false);
        canvas.drawText(text2,text_right,y, mPaintText);
    }

    private void drawLadderBig(Canvas canvas, int w, int h, double angle) {
        float x1 = (float) (w * progress/100 - h * Math.tan(angle) / 2);
        float x2 = (float)  (x1+h*Math.tan(angle));

        Log.i("TAG", "drawLadderBig:w "+w);
        Log.i("TAG", "drawLadderBig:progress "+progress);
        Log.i("TAG", "drawLadderBig:angelValue "+ angle);
        Log.i("TAG", "drawLadderBig:X1 "+x1);
        Log.i("TAG", "drawLadderBig:X2 "+x2);
        if(x2>w){//画下底已经固定的梯形
            x2 = w;
            x1 = 2 * w * progress / 100 - w;
            drawLadder(canvas,h,x1,x2);
        }else {
            drawLadder(canvas, h, x1, x2);//画上下底都不固定的梯形
        }
        Log.i("TAG", "drawLadderBig: ");
    }

    private void drawOutRec(Canvas canvas, int w, int h) {
        mPaint.setColor(color_out);
        canvas.drawRect(0,0,w,h,mPaint);
    }

    private void judgeAngel() {
        if(progress==0){
            angelValue = 0;
        }
        if(angelValue <0|| angelValue >=90){
            angelValue =30;
        }
    }

    private void drawLadder(Canvas canvas, int h, float x1, float x2) {
        @SuppressLint("DrawAllocation") Shader mShader = new LinearGradient(0,0,x2,h,new int[] {color_in_start,color_in_end},null,Shader.TileMode.REPEAT);
        mPaint.setShader(mShader);
        mPath.moveTo(0,0);
        mPath.lineTo(x1,0);
        mPath.lineTo(x2,h);
        mPath.lineTo(0,h);
        mPath.close();
        canvas.drawPath(mPath,mPaint);
    }
}