Android(安卓)简单的统计图

效果图

直接上代码：

values 下创建attr.xml

写入：

上面不带百分比View代码：

import android.annotation.SuppressLint;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.RectF;import android.os.Build;import android.support.annotation.NonNull;import android.support.annotation.Nullable;import android.support.annotation.RequiresApi;import android.support.v4.content.ContextCompat;import android.util.AttributeSet;import android.view.View;import android.widget.FrameLayout;import com.shawyo.gzh.crm.R;import com.shawyo.gzh.crm.utils.L;public class MyStatisticsView extends View {    private Context mContext;    /** 背景画笔 **/    private Paint mBgPaint;    /** 画笔 **/    private Paint mPaint;    private int mMaxWidth;    private int mMaxHeight;    /** 颜色 **/    private int selectColor = 0;   /** 值 **/    private int value = 0;    public MyStatisticsView(Context context) {        super(context,null);        mContext = context;    }    public MyStatisticsView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs,0);        mContext = context;        TypedArray ta = mContext.getTheme().obtainStyledAttributes(attrs, R.styleable.MyStatisticsView, 0, 0);        if (ta!=null){            selectColor = ta.getColor(R.styleable.MyStatisticsView_select_color,0);            value = ta.getInt(R.styleable.MyStatisticsView_value,0);        }        ta.recycle();        init();    }    public MyStatisticsView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        mContext = context;        }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        mMaxWidth = MeasureSpec.getSize(widthMeasureSpec);        mMaxHeight = MeasureSpec.getSize(heightMeasureSpec);    }    private void init(){        mBgPaint = new Paint();        mBgPaint.setStyle(Paint.Style.FILL);        mBgPaint.setAntiAlias(true);        //背景颜色（自己定义）        mBgPaint.setColor(ContextCompat.getColor(mContext, R.color.line3));        mPaint = new Paint();        mPaint.setColor(selectColor);        mPaint.setStyle(Paint.Style.FILL);        mPaint.setAntiAlias(true);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        deawBG(canvas);        deawValue(canvas);    }    /**     * 画背景     */    private void deawBG(Canvas canvas){        if (mBgPaint==null){            return;        }        RectF rectF = new RectF();        rectF.top=0;        rectF.left=0;        rectF.bottom=mMaxHeight;        rectF.right=mMaxWidth;        canvas.drawRoundRect(rectF,mMaxWidth/2,mMaxWidth/2,mBgPaint);    }    /**     * 画值     */    private void deawValue(Canvas canvas){        if (mPaint==null){            return;        }        RectF rectF = new RectF();        rectF.left=0;        rectF.top=mMaxHeight/100*(100 - value);        rectF.bottom=mMaxHeight;        rectF.right=mMaxWidth;        canvas.drawRoundRect(rectF,mMaxWidth/2,mMaxWidth/2,mPaint);    }    public void setData(int value){        this.value = value;        invalidate();    }

public void setColor(int color){    this.selectColor = color;    invalidate();}

布局文件定义

代码中设置值

view.setData("值");

view.setColor("颜色");

---------------------------------------------------------------------------------------------------------

带百分比View

import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Rect;import android.graphics.RectF;import android.support.annotation.Nullable;import android.support.v4.content.ContextCompat;import android.util.AttributeSet;import android.view.View;import com.shawyo.gzh.crm.R;import com.shawyo.gzh.crm.utils.L;public class MyHorizontalStatisticsView extends View {    private Context mContext;    /** 背景画笔 **/    private Paint mBgPaint;    /** 画笔 **/    private Paint mPaint;    private Paint mTextPaint;    private int mMaxWidth;    private int mMaxHeight;    private int selectColor = 0;    private int value = 30;    private int height = 20;    /** 文字盖度 **/    private int mTextW;    /** 文字宽度 **/    private int mTextH;    public MyHorizontalStatisticsView(Context context) {        super(context,null);        mContext = context;    }    public MyHorizontalStatisticsView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs,0);        mContext = context;        TypedArray ta = mContext.getTheme().obtainStyledAttributes(attrs, R.styleable.MyStatisticsView, 0, 0);        if (ta!=null){            selectColor = ta.getColor(R.styleable.MyStatisticsView_select_color,0);            value = ta.getInt(R.styleable.MyStatisticsView_value,0);        }        ta.recycle();        init();    }    public MyHorizontalStatisticsView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        mContext = context;        TypedArray ta = mContext.getTheme().obtainStyledAttributes(attrs, R.styleable.MyStatisticsView, defStyleAttr, 0);        if (ta!=null){            selectColor = ta.getColor(R.styleable.MyStatisticsView_select_color,0);            value = ta.getInt(R.styleable.MyStatisticsView_value,0);        }        ta.recycle();        init();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        mMaxWidth = MeasureSpec.getSize(widthMeasureSpec);        mMaxHeight = mTextH+80;        setMeasuredDimension(mMaxWidth,mMaxHeight);    }    private void init(){        mBgPaint = new Paint();        mBgPaint.setStyle(Paint.Style.FILL);        mBgPaint.setAntiAlias(true);        //背景颜色（自己定义）        mBgPaint.setColor(ContextCompat.getColor(mContext, R.color.line3));        mPaint = new Paint();        mPaint.setColor(selectColor);        mPaint.setStyle(Paint.Style.FILL);        mPaint.setAntiAlias(true);        mTextPaint = new Paint();        //后面数值颜色（自己定义）        mTextPaint.setColor(ContextCompat.getColor(mContext, R.color.black3));        mTextPaint.setAntiAlias(true);        mTextPaint.setTextSize(sp2px(mContext,12));        mTextW = getTextWidth(value+"%",mTextPaint);        mTextH = getTexHeight(value+"%",mTextPaint);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        deawBG(canvas);        deawValue(canvas);    }    /**     * 画背景     */    private void deawBG(Canvas canvas){        if (mBgPaint==null){            return;        }        RectF rectF = new RectF();        rectF.top=(mMaxHeight-height)/2;        rectF.left=0;        rectF.bottom=(mMaxHeight-height)/2+height;        rectF.right=mMaxWidth - 2*mTextW;        canvas.drawRoundRect(rectF,height/2,height/2,mBgPaint);    }    /**     * 画值     */    private void deawValue(Canvas canvas){        if (mPaint==null){            return;        }        RectF rectF = new RectF();        rectF.left=0;        rectF.top=(mMaxHeight-height)/2;        rectF.bottom=(mMaxHeight-height)/2+height;        rectF.right=(mMaxWidth - 2*mTextW)/100 * value;        canvas.drawRoundRect(rectF,height/2,height/2,mPaint);        canvas.drawText(value+"%",mMaxWidth - mTextW-mTextW/2,(mMaxHeight-mTextH)/2+mTextH-6,mTextPaint);    }    /**     * 获取文字宽度     * @param text     * @param paint     * @return     */    private int getTextWidth(String text, Paint paint) {        // 文字所在区域的矩形        Rect rect = new Rect();        paint.getTextBounds(text, 0, text.length(), rect);        return rect.width();    }    /**     *   获取文字高度     */    private int getTexHeight(String text, Paint paint) {        // 文字所在区域的矩形        Rect rect = new Rect();        paint.getTextBounds(text, 0, text.length(), rect);        return rect.height();    }    /**     * 将sp值转换为px值，保证文字大小不变     * @param spValue     * @return     */    private int sp2px(Context context, float spValue) {        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;        return (int) (spValue * fontScale + 0.5f);    }    public void setData(int value){        this.value =value;        invalidate();    }public void setColor(int color){ this.selectColor = color; invalidate(); }}

定义同上个布局

注意：我这儿写的是先自己算好百分比，然后设置。没有做计算操作。传30 就显示30%

更多相关文章

随机推荐