Android自定义View柱状图的绘制总结

冷不防 2022-06-18 00:40 551阅读 0赞

# Android自定义View柱状图的绘制总结 #

前面简单介绍了绘制折线图，博客：  
[http://blog.csdn.net/wenzhi20102321/article/details/64923994][http_blog.csdn.net_wenzhi20102321_article_details_64923994]

这里介绍一下柱状图，柱状图的绘制相对来说还是更简单一点的。  
效果，如图：  
![z][]  
输入任意一组的分数值，并设置颜色，就可以实现上面的效果。

# 一．需要的自定义View的基础知识 #

## （一）编写自定义MyView类 ##

### 1.这个MyView需要继承View。不用解释吧。 ###

### 2.需要重写两个方法，onSizeChange和onDraw方法，这里是不需要重写onMeasure方法的，因为这个自定义View的视图大小没有发生改变，但是如果需要也是可以重写的。 ###

### 自定义的View中三个最重要的方法解释： ###

onMeasure可以得到并控制本身和子View的大小  
onSizeChange可以得到自身视图View的大小  
onDraw绘制视图View的具体实现

### 执行顺序：onMeasure-》onSizeChange—》onDraw ###

## （二）绘制的方法API ##

### 1.绘制矩形 ###

canvas.drawRect(oval, mPaint);  
说明：第一个参数代表的是矩形显示的矩形面积。  
第二个参数设计画笔对象。

### 2.绘制文字 ###

canvas.drawText(“心跳的频率”, x, y, mPaint);  
说明：第一个参数是要绘制的文字，第二三个参数代表文字绘制开始的坐标，第四个参数代表画笔对象。

## （三）本文柱状图的思路分析： ##

使用的方法主要是 canvas.drawRect来绘制连续的柱状图形。

### 1.要算出每个范围占有的个数 ###

### 2.算出每个范围占有百分比数据 ###

### 3.x轴坐标的间隔是相同的，y轴的坐标是根据传入的数决定的。 ###

# 二．柱状图设计实例 #

## （一）自定义View类HistogramCharView ##

package com.example.charview;
    
    import android.content.Context;
    import android.graphics.*;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.view.View;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * 柱状图形
     */
    
    public class HistogramCharView extends View {
        
    
    
        private int mWidth;
        private int mHeight;
    
        private Paint mPaint;
        private int paintColors;
        private List<Integer> listNumber = new ArrayList<Integer>();
        private List<Integer> listRange = new ArrayList<Integer>();
        private List<Integer> listDegree = new ArrayList<Integer>();
        private String name;
        private List<String> rangeString = new ArrayList<String>();//范围的名称
    
        public HistogramCharView(Context context) {
            this(context, null);
        }
    
        public HistogramCharView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public HistogramCharView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }
    
        private void init() {
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setStrokeWidth(2f);
            mPaint.setColor(Color.WHITE);
            setBackgroundColor(Color.BLACK);
    
        }
    
        public void setData(List<Integer> listNumber, int paintColors, String name) {
            this.listNumber.clear();
            this.listNumber.addAll(listNumber);
    
            this.name = name;
            this.paintColors = paintColors;
            initNumber();
            postInvalidate();
        }
    
        //初始化数据
        private void initNumber() {
            judgeRange(0, 100, listRange, rangeString, listDegree);
        }
    
        //判断范围，传人最小值，最大值，输出的范围的集合，输入的文字名称的集合,输入百分比的数量的集合
        private void judgeRange(int minRange, int maxRange, List<Integer> listRange, List<String> listRangeString, List<Integer> listDegree) {
    
            int size = listNumber.size();
            while (minRange < maxRange) {
                int count = 0;
                for (int k = 0; k < size; k++) {
                    int judgeNumber = listNumber.get(k);
                    if (judgeNumber > minRange) {
                        if (judgeNumber <= minRange + 10) {
                            count++;
                        }
                    }
                }
                listRange.add(count);
                listRangeString.add(minRange + "-" + (minRange + 10));
                minRange += 10;
            }
            Log.e("TAG", "listRange" + listRange);
            int listSize = listRange.size();
    
            for (int i = 0; i < listSize; i++) {
                int degreeCount = 100 * listRange.get(i) / size;
                listDegree.add(degreeCount); //添加百分比
            }
            Log.e("TAG", "listRange" + listRange + listRange.size());
            Log.e("TAG", "listDegree" + listDegree + listDegree.size());
    
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            drawBackGroudLines(canvas);
            if (listRange.size() > 0) {
    
                //画一条直线
                canvas.drawLine(40, 0, 40, mHeight, mPaint);
    
                //画矩形图
                drawRectFView(canvas);
            }
    
        }
    
        //画矩形图
        private void drawRectFView(Canvas canvas) {
            mPaint.setColor(paintColors);
            int size = listRange.size();
            float pointWidth = mWidth / (2f * size + 1);
            float pointHeight = (float) mHeight / 100f;
            for (int i = 0; i < listRange.size(); i++) {
                float moveHeight = mHeight - pointHeight * listDegree.get(i);     //下移的距离
                RectF oval = new RectF((2 * i + 1) * pointWidth, moveHeight, (2 * i + 2) * pointWidth, pointHeight * listDegree.get(i) + moveHeight);
                canvas.drawRect(oval, mPaint);
    
                //绘制文字
                //百分数大于零才绘制出来
                if (listDegree.get(i) > 0) {
                    mPaint.setTextSize(30);
                    mPaint.setColor(Color.WHITE);
                    canvas.drawText(rangeString.get(i), (2 * i + 1) * pointWidth, getHeight(), mPaint);
                    mPaint.setColor(paintColors);
                    mPaint.setTextSize(50);
                    canvas.drawText(listDegree.get(i) + "%", (2 * i + 1) * pointWidth, moveHeight - 20, mPaint);
    
                }
    
            }
    
            //绘制文字
            mPaint.setTextSize(30);
            mPaint.setColor(Color.YELLOW);
            canvas.drawText(name + "百分比数据", 50, 50, mPaint);
            for (int i = 0; i < 20; i++) {
                String text = i * 5 + "";
                canvas.drawText(text, 10, mHeight - i * 5 * pointHeight, mPaint);
    
            }
    
    
            //绘制虚线
            for (int i = 1; i < 19; i++) {
                mPaint.setStyle(Paint.Style.STROKE);//空心
                mPaint.setColor(Color.DKGRAY);  //画笔颜色
                Path path = new Path(); //路径
                path.moveTo(0, mHeight - i * 5 * pointHeight);  //画笔起点位置点         d
                path.lineTo(mWidth, mHeight - i * 5 * pointHeight);     //画笔终点位置点
                //使用DashPathEffect来创建一个虚线的轮廓(短横线/小圆点)，而不是使用实线
                //float[] { 5, 5, 5, 5 }值控制虚线间距，密度
                PathEffect effects = new DashPathEffect(new float[]{
       3, 3, 3, 3}, 1);
                mPaint.setPathEffect(effects);
                canvas.drawPath(path, mPaint);
    
               /* 构造函数为DashPathEffect(float[] intervals, float offset)，
               其中intervals为虚线的ON和OFF数组，该数组的length必须大于等于2，
               phase为绘制时的偏移量。
               intervals数组的值越小，它的密度越大，就很紧密！
                */
            }
            //画完虚线后再设置一下画笔
            mPaint.setColor(paintColors);
            mPaint.setStyle(Paint.Style.FILL);
        }
    
        private void drawBackGroudLines(Canvas canvas) {
            //背景颜色,灰色
            mPaint.setColor(0x80CCCCCC);
            canvas.drawRect(0, 0, mWidth, mHeight, mPaint);
            canvas.drawLine(0, 0, mWidth, 0, mPaint);
            canvas.drawLine(0, mHeight, mWidth, mHeight, mPaint);
        }
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            mWidth = getWidth();
            mHeight = getHeight() - 20;
        }
    
    
    }

## （二）主方法类调用自定义View ##

package com.example.charview;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.os.Bundle;
    import android.view.View;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class MyActivity extends Activity {
        
    
    
        /**
         * 自定义图像的实现
         */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
               setContentView(R.layout.main);
            //数据
            List<Integer> datas = new ArrayList<Integer>();
            datas.add(66);
            datas.add(77);
            datas.add(66);
            datas.add(100);
            datas.add(64);
            datas.add(20);
            datas.add(44);
            datas.add(22);
            datas.add(99);
            datas.add(35);
            datas.add(35);
            datas.add(66);
            datas.add(6);
            datas.add(20);
    
    
            // 画笔颜色的数组
            int paintColor = Color.RED;
    
                HistogramCharView histogramCharView = (HistogramCharView) findViewById(R.id.histogramCharView);
            histogramCharView.setData(datas, paintColor[0], "成绩分布情况");
    
    
        }
    
    
        //关闭页面
        public void close(View view) {
            finish();
        }
    }

## （三）布局文件是非常简单的 ##

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:orientation="vertical"
                  android:layout_width="fill_parent"
                  android:layout_height="fill_parent"
            >
    
        <com.example.charview.HistogramCharView
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:id="@+id/histogramCharView"
                />
        <Button
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:text="关闭"
                android:onClick="close"
                />
    
    </LinearLayout>

这里的柱状图统计图算是很简单的了，使用的方法也是比较简单的，对于初级学习是很有帮助的。

[http_blog.csdn.net_wenzhi20102321_article_details_64923994]: http://blog.csdn.net/wenzhi20102321/article/details/64923994
[z]: /images/20220618/b49293d933c842af89180eff032c4bd3.png