1. 程式人生 > >安卓簡單繪製直方圖思路

安卓簡單繪製直方圖思路

最近看了看HenCoder Android 開發進階:自定義 View 1-1 繪製基礎,作者講的很全面,受益匪淺,順手寫了下常用Drawxxx()方法,練習了一下,以免忘記了。

這裡說一下比價複雜的直方圖,雖然很多第三方可以直接拿來用,但是我還是自己隨便寫了個Demo,知其所以然。


程式碼很簡單:

public class Practice10HistogramView extends View {
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private float interval = 25;
    private float perWidth = 100;

    public Practice10HistogramView(Context context) {
        super(context);
    }

    public Practice10HistogramView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public Practice10HistogramView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        綜合練習
//        練習內容:使用各種 Canvas.drawXXX() 方法畫直方圖

        RectF rectF1 = new RectF(100 + 1 * interval + 0 * perWidth,600 - 5,100 + 1 * perWidth + 1 * interval,600);
        RectF rectF2 = new RectF(100 + 2 * interval + 1 * perWidth,600 - 30,100 + 2 * perWidth + 2 * interval,600);
        RectF rectF3 = new RectF(100 + 3 * interval + 2 * perWidth,600 - 30,100 + 3 * perWidth + 3 * interval,600);
        RectF rectF4 = new RectF(100 + 4 * interval + 3 * perWidth,600 - 200,100 + 4 * perWidth + 4 * interval,600);
        RectF rectF5 = new RectF(100 + 5 * interval + 4 * perWidth,600 - 300,100 + 5 * perWidth + 5 * interval,600);
        RectF rectF6 = new RectF(100 + 6 * interval + 5 * perWidth,600 - 450,100 + 6 * perWidth + 6 * interval,600);
        RectF rectF7 = new RectF(100 + 7 * interval + 6 * perWidth,600 - 180,100 + 7 * perWidth + 7 * interval,600);
        paint.setColor(Color.GREEN);
        paint.setStyle(Paint.Style.FILL);

        canvas.drawRect(rectF1,paint);
        canvas.drawRect(rectF2,paint);
        canvas.drawRect(rectF3,paint);
        canvas.drawRect(rectF4,paint);
        canvas.drawRect(rectF5,paint);
        canvas.drawRect(rectF6,paint);
        canvas.drawRect(rectF7,paint);
        paint.setColor(Color.WHITE);
        canvas.drawLines(new float[]{100,20,100,600,100,600,1000,600},paint);

        paint.setTextSize(18);
        canvas.drawText("Froyo",100 + 1 * interval + 0.5f * perWidth,620,paint);
        canvas.drawText("GB",100 + 2 * interval + 1.5f * perWidth,620,paint);
        canvas.drawText("ICS",100 + 3 * interval + 2.5f * perWidth,620,paint);
        canvas.drawText("JB",100 + 4 * interval + 3.5f * perWidth,620,paint);
        canvas.drawText("KitKat",100 + 5 * interval + 4.5f * perWidth,620,paint);
        canvas.drawText("L",100 + 6 * interval + 5.5f * perWidth,620,paint);
        canvas.drawText("M",100 + 7 * interval + 6.5f * perWidth,620,paint);

        paint.setTextSize(30);
        canvas.drawText("直方圖",500,700,paint);





    }

具體實現效果如下:


上面是效果圖,下面是程式碼具體實現的圖。