2019-03-05 自定义View绘制线性表

      自定义View绘图,学的就是用的,怎么方便怎么来,就像随手涂鸦一样,以后都不会再

拾起,所以没怎么封装,也不标准。
第一次写个稍微完整点的例子,写的不好还请多多指教..

1、先来效果图:

2019-03-05 自定义View绘制线性表_第1张图片
图1
2019-03-05 自定义View绘制线性表_第2张图片
图2



素材1
素材2
素材3

2、图1的源码:

package com.lipy.linechart;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.support.annotation.Nullable;

import android.util.AttributeSet;

import android.util.TypedValue;

import android.view.View;

import android.widget.Switch;

import java.util.ArrayList;

import java.util.List;

public class TrendLineChartView extends View {

    private List trendData;    //走势数据

    private Paint redPaint,blackPaint,greenPaint; //圆点画笔

    private Paint realLinePaint,dashLinePaint;  //实线和灰线画笔

    private int defaultPadding = this.dp2px(getContext(),5); //默认内边距

    private int dotRadius = this.dp2px(getContext(),4);    //圆点的半径

    /**

    * 设置走势数据

    * 列表首项是最远天数,画在图表的最左边

    * 数据值对应  1:红点,0:绿点,-1:黑点

    */

    public void setTrendData(List trendData){

        this.trendData = trendData;

        invalidate();

    }

    public TrendLineChartView(Context context) {

        this(context,null);

    }

    public TrendLineChartView(Context context, @Nullable AttributeSet attrs) {

        super(context, attrs);

        init();

    }

    private void init() {

        dashLinePaint = new Paint();

        dashLinePaint.setColor(Color.GRAY);

        dashLinePaint.setAlpha(100);

        dashLinePaint.setStrokeWidth(1.5f);

        realLinePaint = new Paint(dashLinePaint);

        realLinePaint.setColor(Color.parseColor("#555555"));

        realLinePaint.setAntiAlias(true);

        realLinePaint.setStrokeWidth(1.8f);

        redPaint = new Paint(realLinePaint);

        redPaint.setColor(Color.RED);

        redPaint.setStyle(Paint.Style.FILL);

        greenPaint = new Paint(redPaint);

        greenPaint.setColor(Color.GREEN);

        blackPaint = new Paint(greenPaint);

        blackPaint.setColor(Color.BLACK);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        drawBackground(canvas);

        drawData(canvas);

    }

    //绘制数据

    private void drawData(Canvas canvas) {

        int width = canvas.getWidth();

        int height = canvas.getHeight();

        if (trendData == null){

            return;

        }

        if (trendData.size() <= 1){

            //数据只有一条时,默认画在中间

            canvas.drawCircle(width/2,getDrawHeight(height,trendData.get(0)),dotRadius,getPaint(trendData.get(0)));

        }

        else{

            float space = (width-defaultPadding*2)/(trendData.size()-1);

            //画折线

            for (int i = 0; i < trendData.size()-1; i++) {

                canvas.drawLine(defaultPadding+i*space,getDrawHeight(height,trendData.get(i)),defaultPadding+(i+1)*space,getDrawHeight(height,trendData.get(i+1)),realLinePaint);

            }

            //画圆点

            for (int i = 0; i < trendData.size(); i++) {

                canvas.drawCircle(defaultPadding+i*space,getDrawHeight(height,trendData.get(i)),dotRadius,getPaint(trendData.get(i)));

            }

        }

    }

    //画三条虚线组成的背景

    private void drawBackground(Canvas canvas) {

        int width = canvas.getWidth();

        int height = canvas.getHeight();

        canvas.drawLine(defaultPadding,defaultPadding,width-defaultPadding,defaultPadding,dashLinePaint);

        canvas.drawLine(defaultPadding,height/2,width-defaultPadding,height/2,dashLinePaint);

        canvas.drawLine(defaultPadding,height-defaultPadding,width-defaultPadding,height-defaultPadding,dashLinePaint);

    }

    /**

    * 更具trendData数据获得对应颜色的画笔

    */

    private Paint getPaint(int result){

        if (result == -1){

            return blackPaint;

        }

        else if (result == 0){

            return  greenPaint;

        }

        else if (result == 1){

            return redPaint;

        }

        return greenPaint;

    }

    /**

    * @param height    控件的总高度

    * @param result    数据的走势

    * @return  计算出该圆点的Y坐标

    */

    private int getDrawHeight(int height,int result){

        if (result == -1){

            return height - defaultPadding;

        }

        else if (result == 0){

            return  height/2;

        }

        else if (result == 1){

            return defaultPadding;

        }

        return height/2;

    }

    private int dp2px(Context context, int dip) {

        final float scale = context.getResources().getDisplayMetrics().density;

        return (int) (dip * scale + 0.5f);

    }

    private int sp2px(Context context, float spValue) {

        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spValue, context.getResources().getDisplayMetrics());

    }

}

3、图2的源码:

package com.lipy.linechart;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.BitmapShader;

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.graphics.drawable.ShapeDrawable;

import android.graphics.drawable.shapes.PathShape;

import android.support.annotation.Nullable;

import android.util.AttributeSet;

import android.util.Log;

import android.util.TypedValue;

import android.view.View;

import java.util.Arrays;

import java.util.List;

public class HitRateLineGridView extends View {

    private List hitRateData;    //命中率数据,  固定的4条数据。

    private String[] xLabels;  //x轴的标签

    private int maxIndex = 0;  //命中率最高的一项的索引,设置数据时就会计算

    private Bitmap bmLeftTip, bmCenterTip,bmRightTip;      //位于三个不同方位的提示图片

    private Paint hollowCirclePaint,solidCirclePaint; //空心元和实心圆画笔

    private Paint labelFontPaint,tipFontPaint;  //标签文字画笔和提示文字画笔

    private Paint realLinePaint,dashLinePaint;  //折线画笔和背景灰线画笔

    private Paint shaderBgPaint;    //阴影背景画笔

    private int dataColor = Color.parseColor("#d92e48"); //数据颜色,红色

    private int defaultPadding = this.dp2px(getContext(),20); //默认边距

    private int fontSize = this.sp2px(getContext(),8); //默认字体颜色

    private Path shaderPath;    //渐变阴影的路径,在绘制折线的时候记录路径

    /**

    * 设置命中率数据,取最近的7天

    * 不需要这个方法,已标记为过时

    */

    @Deprecated

    public void setHitRateData(List hitRateData){

        this.hitRateData = hitRateData;

        if (hitRateData.size()<=7){

            //this.hitRateData = hitRateData;

            //++计算统计后再赋值给 hitRateData变量

        }

        else{

            //this.hitRateData = hitRateData.subList(hitRateData.size() - 7,hitRateData.size());

            //++计算统计后再赋值给 hitRateData变量

        }

        invalidate();

    }

    /**

    * 设置命中率数据,已经统计过的数据,注意!只接收固定的4条数据

    *分别是近7天的命中率,近5天的命中率,近3天的命中率,和近2天的命中率

    */

    public void setHitRateDataCounted(List hitRateData){

        this.hitRateData = hitRateData;

        for (int i = 0; i < hitRateData.size(); i++) {

            if (hitRateData.get(maxIndex) < hitRateData.get(i)){

                maxIndex = i;

            }

        }

        invalidate();

    }

    /**

    * @param xLabels x轴底部的标签,最多取前4个

    */

    private void setXLabels(String[] xLabels){

        if (xLabels.length<=4){

            this.xLabels = xLabels;

        }

        else{

            this.xLabels = Arrays.copyOfRange(xLabels,0,4);

        }

        invalidate();

    }

    public HitRateLineGridView(Context context) {

        this(context,null);

    }

    public HitRateLineGridView(Context context, @Nullable AttributeSet attrs) {

        super(context, attrs);

        init();

    }

    private void init() {

        dashLinePaint = new Paint();

        dashLinePaint.setColor(Color.GRAY);

        dashLinePaint.setAlpha(100);

        dashLinePaint.setStrokeWidth(1.5f);

        labelFontPaint = new Paint();

        labelFontPaint.setColor(Color.GRAY);

        labelFontPaint.setTextSize(fontSize);

        setXLabels(new String[]{"近7","近5","近3","近2"} );

        realLinePaint = new Paint();

        realLinePaint.setColor(dataColor);

        realLinePaint.setStrokeWidth(4f);

        realLinePaint.setAntiAlias(true);

        solidCirclePaint = new Paint(realLinePaint);

        solidCirclePaint.setStrokeWidth(1.5f);

        //solidCirclePaint.setStyle(Paint.Style.FILL);    //设置实心

        hollowCirclePaint = new Paint(realLinePaint);

        hollowCirclePaint.setColor(Color.WHITE);    //采取在一个大实心圆里画一个小白圆来实现空心圆效果的策略

        hollowCirclePaint.setStrokeWidth(1.8f);

        //hollowCirclePaint.setStyle(Paint.Style.STROKE); //设置空心

        tipFontPaint = new Paint();

        tipFontPaint.setTextSize(sp2px(getContext(),10));

        tipFontPaint.setColor(Color.WHITE);

        bmLeftTip = getTipBitmap(R.drawable.bubble_red_left,defaultPadding * 3,defaultPadding);

        bmCenterTip = getTipBitmap(R.drawable.bubble_red_mid,defaultPadding * 3,defaultPadding);

        bmRightTip = getTipBitmap(R.drawable.bubble_red_right,defaultPadding * 3,defaultPadding);

        shaderPath = new Path();

        shaderBgPaint = new Paint();

        shaderBgPaint.setAntiAlias(true);

        shaderBgPaint.setStyle(Paint.Style.FILL);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        drawBackground(canvas);

        drawXLabels(canvas);

        drawData(canvas);

    }

    //绘制渐变阴影

    private void drawShader(Canvas canvas) {

        int width = canvas.getWidth();

        int height = canvas.getHeight();

        LinearGradient lg = new LinearGradient(width/2,height,width/2,0,

            Color.parseColor("#00d92e48"),

            Color.parseColor("#99d92e48"),

            Shader.TileMode.CLAMP);// CLAMP重复最后一个颜色至最后

        shaderBgPaint.setShader(lg);

        canvas.drawPath(shaderPath,shaderBgPaint);

    }

    //绘制数据

    private void drawData(Canvas canvas) {

        int width = canvas.getWidth();

        int height = canvas.getHeight();

        int gridHeight = height - defaultPadding*2;

        if (hitRateData == null){

            return;

        }

        float w_space = (width-defaultPadding*2)/3;

        //画折线

        for (int i = 0; i < 3; i++) {

            float startX = defaultPadding+i*w_space;

            float startY = (100-hitRateData.get(i)) *gridHeight/100 + defaultPadding;

            float stopX = defaultPadding+(i+1)*w_space;

            float stopY = (100-hitRateData.get(i+1))*gridHeight/100 + defaultPadding;

            canvas.drawLine(startX,startY,stopX,stopY,realLinePaint);

            //阴影

            if (i == 0){

                shaderPath.moveTo(startX,startY);

            }

            else if(i == 1){

                shaderPath.lineTo(startX,startY);

            }

            else if (i == 2){

                shaderPath.lineTo(startX,startY);

                shaderPath.lineTo(stopX,stopY);

                shaderPath.lineTo(stopX,height-defaultPadding);

                shaderPath.lineTo(defaultPadding,height-defaultPadding);

                shaderPath.close();

            }

        }

        //画阴影

        drawShader(canvas);

        //画圆点

        for (int i = 0; i < 4; i++) {

            if (i == maxIndex){    //最大项单独处理

                //画空心圆

                canvas.drawCircle(defaultPadding+i*w_space,(100-hitRateData.get(i))*gridHeight/100 + defaultPadding,dp2px(getContext(),5),solidCirclePaint);

                canvas.drawCircle(defaultPadding+i*w_space,(100-hitRateData.get(i))*gridHeight/100 + defaultPadding,dp2px(getContext(),3),hollowCirclePaint);

                //画提示图

                int tipTopValue = (100-hitRateData.get(i))*gridHeight/100 - dp2px(getContext(),6);  //提示图y轴方向的位置

                if (maxIndex == 0){

                    float tipLeftValue = i*w_space + dp2px(getContext(),1);

                    canvas.drawBitmap(bmLeftTip,tipLeftValue , tipTopValue, tipFontPaint);

                    canvas.drawText("命中率"+hitRateData.get(i)+"%", tipLeftValue + dp2px(getContext(),3), tipTopValue + dp2px(getContext(),12), tipFontPaint);

                }

                else if (maxIndex == 1){

                    float tipLeftValue = i*w_space - defaultPadding/2;

                    canvas.drawBitmap(bmCenterTip, tipLeftValue, tipTopValue, tipFontPaint);

                    canvas.drawText("命中率"+hitRateData.get(i)+"%", tipLeftValue + dp2px(getContext(),3), tipTopValue  + dp2px(getContext(),12), tipFontPaint);

                }

                else if(maxIndex == 2){

                    float tipLeftValue = i*w_space - defaultPadding/2;

                    canvas.drawBitmap(bmCenterTip, tipLeftValue, tipTopValue, tipFontPaint);

                    canvas.drawText("命中率"+hitRateData.get(i)+"%", tipLeftValue + dp2px(getContext(),3), tipTopValue  + dp2px(getContext(),12), tipFontPaint);

                }

                else if (maxIndex == 3){

                    float tipLeftValue = i*w_space - defaultPadding - dp2px(getContext(),1);

                    canvas.drawBitmap(bmRightTip, tipLeftValue, tipTopValue, tipFontPaint);

                    canvas.drawText("命中率"+hitRateData.get(i)+"%", tipLeftValue + dp2px(getContext(),3), tipTopValue  + dp2px(getContext(),12), tipFontPaint);

                }

            } else{

                canvas.drawCircle(defaultPadding+i*w_space,(100-hitRateData.get(i))*gridHeight/100 + defaultPadding,dp2px(getContext(),3),solidCirclePaint);

            }

        }

    }

    //绘制x轴下方的标签

    private void drawXLabels(Canvas canvas) {

        int width = canvas.getWidth();

        int height = canvas.getHeight();

        if (xLabels == null){

            return;

        }

        int space = (width-defaultPadding - defaultPadding) / 3;

        Path path = new Path();

        for (int i = 0; i < xLabels.length; i++) {

            // path.reset();    //用路径也没法实现垂直绘制文字,得拆分了画

            // path.moveTo(i*space + defaultPadding,height - defaultPadding + 3);

            //path.lineTo(i*space + defaultPadding,height - 3);

            // canvas.drawTextOnPath(xLabels[i],path,0f,0f,labelFontPaint);

            canvas.drawText(xLabels[i],i*space + defaultPadding/2 + 3,height- defaultPadding/2 + 3,labelFontPaint);

        }

    }

    //绘制背景4*3表格,

    private void drawBackground(Canvas canvas) {

        int width = canvas.getWidth();

        int height = canvas.getHeight();

        //画5横

        canvas.drawLine(defaultPadding,defaultPadding,width-defaultPadding,defaultPadding,dashLinePaint);

        canvas.drawLine(defaultPadding,(height - defaultPadding - defaultPadding)/4 + defaultPadding ,width-defaultPadding,(height - defaultPadding - defaultPadding)/4 + defaultPadding,dashLinePaint);

        canvas.drawLine(defaultPadding,height/2 ,width-defaultPadding, height/2,dashLinePaint);

        canvas.drawLine(defaultPadding,(height - defaultPadding - defaultPadding)*3/4 + defaultPadding ,width-defaultPadding,(height - defaultPadding - defaultPadding)*3/4 + defaultPadding,dashLinePaint);

        canvas.drawLine(defaultPadding,height-defaultPadding,width-defaultPadding,height-defaultPadding,dashLinePaint);

        //画4竖

        canvas.drawLine(defaultPadding,defaultPadding,defaultPadding,height - defaultPadding,dashLinePaint);

        canvas.drawLine((width - defaultPadding - defaultPadding) / 3 + defaultPadding,defaultPadding,(width - defaultPadding - defaultPadding) / 3 + defaultPadding,height - defaultPadding,dashLinePaint);

        canvas.drawLine((width - defaultPadding - defaultPadding) *2/ 3 + defaultPadding,defaultPadding,(width - defaultPadding - defaultPadding)*2 / 3 + defaultPadding,height - defaultPadding,dashLinePaint);

        canvas.drawLine(width-defaultPadding,defaultPadding,width-defaultPadding,height - defaultPadding,dashLinePaint);

    }

    /**

    * @param sourceId  图片的资源id

    * @param width  指定宽度

    * @param height  指定高度

    * @return  适应控件大小的图片

    */

    private Bitmap getTipBitmap(int sourceId,int width,int height){

        Bitmap bitmap = BitmapFactory.decodeResource(getContext().getResources(),sourceId);

        if (bitmap.getWidth() == width && bitmap.getHeight() == height){    //写这个判断,避createScaledBitmap()的坑

            return bitmap;

        }

        return Bitmap.createScaledBitmap(bitmap,width,height,true);

    }

    private int dp2px(Context context, int dip) {

        final float scale = context.getResources().getDisplayMetrics().density;

        return (int) (dip * scale + 0.5f);

    }

    private int sp2px(Context context, float spValue) {

        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spValue, context.getResources().getDisplayMetrics());

    }

}

4、后话:

        这也没啥技术含量,就是官方的api用用,基本的计算公式摆摆,也不多废话了。

反正用代码画图挺好玩的,文章里可能会有些你一时没想到的小技巧吧。

你可能感兴趣的:(2019-03-05 自定义View绘制线性表)