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);}@Overrideprotected 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);}
}