安卓炫酷柱状图开发

话不多说先效果图，关于如何画椭圆，画直线了，也就一行代码，难度不大，难度最大是要如何排版，计算每个子图的left，top，right，bottom，这就需要有点数学功底了

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

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

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

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<String> listRange = new ArrayList<String>();
    private List<Integer> listColors = new ArrayList<Integer>();
    private String name;
    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) {
        this.listNumber.clear();
        this.listNumber.addAll(listNumber);
        this.listRange.clear();
        //initNumber();
        listRange.add("水分含量%");
        listRange.add("温度状况°C");
        listRange.add("植物高度h");
        listColors.add(0xFF185be2);
        listColors.add(0xFFea3d08);
        listColors.add(0xFF26de9a);
        postInvalidate();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        drawBackGroudLines(canvas);

            //画矩形图
        drawRectFView(canvas);

    }

    //画矩形图
    private void drawRectFView(Canvas canvas) {
        mPaint.setColor(paintColors);
        float pointWidth = (mWidth)/7f;
        float pointHeight = (float) (mHeight-20) / 100f;

        //绘制文字
        mPaint.setTextSize(30);
        mPaint.setColor(0xFF00fffd);
        for (int i = 0; i < 11; i++) {
            String text = i * 10 + "";
            canvas.drawText(text, 10, mHeight+10 - i * 10 * pointHeight, mPaint);
        }


        //绘制虚线
        for (int i = 0; i < 11; i++) {
            mPaint.setStyle(Paint.Style.STROKE);//空心
            mPaint.setColor(0xFF00fffd);  //画笔颜色
            Path path = new Path(); //路径
            path.moveTo(70, mHeight - i * 10 * pointHeight);  //画笔起点位置点         d
            path.lineTo(mWidth, mHeight - i * 10 * 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);
        }
        //画完虚线后再设置一下画笔
        mPaint.setColor(paintColors);
        mPaint.setStyle(Paint.Style.STROKE);//空心
        for (int i = 0; i < listNumber.size(); i++) {
            mPaint.setColor(0xFF62666c);
            mPaint.setStyle(Paint.Style.STROKE);//空心
            mPaint.setTextSize(50);
            float left=pointWidth*(i*2+1);
            float right=pointWidth+left;
            canvas.drawRoundRect(left, 20, right, mHeight,20,20 ,mPaint);
            mPaint.setColor(0xaF00fffd);
            mPaint.setTextSize(30);
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawRoundRect(left, pointHeight*(100-listNumber.get(i))+20, right,mHeight,20, 20, mPaint);
            canvas.drawText(String.valueOf(listRange.get(i)), left+(pointWidth-150)/2f, getHeight()-10, mPaint);
            canvas.drawText(String.valueOf(listNumber.get(i)),  left+(pointWidth-40)/2f,   pointHeight*(100-listNumber.get(i))-3, mPaint);
        }
    }
    private void drawBackGroudLines(Canvas canvas) {
        //背景颜色
        mPaint.setColor(0xFF373d4a);
        canvas.drawRect(0, 0, mWidth, getHeight(), mPaint);
        mPaint.setColor(0xFF00fffd);
        canvas.drawLine(70, 0, 70, mHeight, mPaint);
        canvas.drawLine(70, 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() - 40;
    }
}

接下来的是布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main3"
android:layout_width="match_parent"
android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#373d4a"
tools:context="com.example.andream.learnone.Main3Activity">
<com.example.andream.learnone.HistogramCharView
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_marginTop="20dp"
    android:id="@+id/histogramCharView"/>
    <TextView
        android:layout_width="wrap_content"
        android:text="植物生长状况"
        android:textSize="18sp"
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:textColor="#00fffd"
        android:layout_height="wrap_content" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="100dp"
        android:background="#00fffd"
        android:text="数据改变"
        android:layout_gravity="bottom"
        android:onClick="close"
        />
</LinearLayout>

接下来的是主界面代码

public class Main3Activity extends AppCompatActivity {
private HistogramCharView histogramCharView;
    private List<Integer> datas;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        datas = new ArrayList<Integer>();
        datas.add(46);
        datas.add(34);
        datas.add(13);
        // 画笔颜色的数组
        int paintColor = 0xFF26de9a;
       histogramCharView = (HistogramCharView) findViewById(R.id.histogramCharView);
        histogramCharView.setData(datas);
    }
    //关闭页面
    public void close(View view) {
        datas.clear();
        datas.add(64);
        datas.add(25);
        datas.add(30);
        // 画笔颜色的数组
        int paintColor = 0xFF26de9a;

        histogramCharView.setData(datas);
    }

}

就这样就实现了，大家慢慢研究吧，一定也可以画出根据好看的图像

参考 ：http://blog.csdn.net/wenzhi20102321/article/details/66971269