Android自定义View------柱状统计图

关于自定义View，相信多数开发者都已经非常熟悉了，网络上的例子也非常多，各种炫酷吊炸天的自定义View也层出不穷。本文只是一个初级学习教程，对于初学者有参考价值。

下面正式进入主题。

本文采用自定义View的方式实现柱状统计图BarGraphView，实现了柱状统计图的基本功能，因为本身是为了学习自定义View，因此扩展性比较差，只能作为自定义View的参考。

上效果图：

View显示到屏幕上主要经过这三个过程

(1)Measure（测量）

首先View需要测量自身的大小，包括长和宽。 当View类的成员函数measure决定要重新测量当前View的宽度和高度之后，会去调用另外一个成员函数onMeasure来真正执行测量宽度和高度的操作。因此，自定义View大多都需要覆写onMeasure方法来测量View的大小。onMeasure方法如下：

  @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

其中widthMeasureSpec和heightMeasureSpec两个参数为父视图的建议大小。 参数measureSpec的值其实是由两部分内容来组成的，最高2位表示一个测量模式，而低30位表示一个宽度值或者高度值，测量模式有三种，分别是MeasureSpec.EXACTLY、MeasureSpec.UNSPECIFIED和MeasureSpec.AT_MOST，这里就不讲三种模式的区别了。在BarGraphView中将会参考这个两个数值来确定BarGraphView的大小。

(2)Layout(布局)

这个过程只在View容器（ViewGroup及其子类）有用，因为非容器类View在屏幕中的位置操作由父控件来决定，所以不需要覆写onLayout()方法。

(3)Draw（绘制）

最后绘制View的过程，在这个过程里主要通过Paint对象在Canvas上面绘制相应图像，最终把View展现在屏幕上。 对于自定义View来说，通常需要覆写onDraw()方法绘制View。

    @Override
    public void onDraw(Canvas canvas) {
    }

该方法提供了一块画布，我们只需要创建一个画笔在画布上绘图案即可。

好了，了解了上述过程，接下来我们开始实现BarGraphView。

BarGraphView主要代码集中在Draw的过程，通过onDraw方法把统计图绘制到屏幕上来。

经过分析，把柱状图分为以下几部分

1.横/纵坐标轴

2.横/纵坐标轴刻度线

3.横/纵坐标轴刻度值

4.横/纵坐标轴箭头

5.标题

6.柱状图

针对不同部分利用drawLine()(画直线)、drawText()(画文字)、drawPath()(画多边形)以及drawRect()(画矩形)的方法分别绘制相应图案。

以下是BarGraphView类代码，可以直接看注释。

package com.eleven.demo.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

import com.eleven.demo.R;

/**
 * Created by Eleven on 2015/5/3.
 */
public class BarGraphView extends View {

    private final String TAG = BarGraphView.class.getName();
    //画笔
    private Paint mPaint;
    //标题
    private String title;
    //标题颜色
    private int titleColor;
    //标题大小
    private float titleSize;
    //X坐标轴最大值
    private float maxAxisValueX = 900;
    //X坐标轴刻度线数量
    private int axisDivideSizeX = 9;
    //Y坐标轴最大值
    private float maxAxisValueY = 700;
    //Y坐标轴刻度线数量
    private int axisDivideSizeY = 7;
    //视图宽度
    private int width;
    //视图高度
    private int height;
    //坐标原点位置
    private final int originX = 100;
    private final int originY = 800;
    //柱状图数据
    private int columnInfo[][];

    public BarGraphView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //创建画笔
        mPaint = new Paint();
        //获取配置的属性值
        TypedArray mArray = context.obtainStyledAttributes(attrs, R.styleable.BarGraphView);
        title = mArray.getString(R.styleable.BarGraphView_barGraph_title);
        titleColor = mArray.getColor(R.styleable.BarGraphView_barGraph_titleColor, Color.BLACK);
        titleSize = mArray.getDimension(R.styleable.BarGraphView_barGraph_titleSize, 36);
    }

    /**
     * 设置X轴的最大值及刻度线数量（包括0坐标刻度）
     *
     * @param maxValue   X轴的最大值
     * @param divideSize 刻度线数量
     */
    public void setAxisX(float maxValue, int divideSize) {
        maxAxisValueX = maxValue;
        axisDivideSizeX = divideSize;
    }

    /**
     * 设置Y轴的最大值及刻度线数量（包括0坐标刻度）
     *
     * @param maxValue   Y轴的最大值
     * @param divideSize 刻度线数量
     */
    public void setAxisY(float maxValue, int divideSize) {
        maxAxisValueY = maxValue;
        axisDivideSizeY = divideSize;
    }

    /**
     * 设置柱状图数据
     *
     * @param columnInfo
     */
    public void setColumnInfo(int[][] columnInfo) {
        this.columnInfo = columnInfo;
    }

    @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = MeasureSpec.getSize(widthMeasureSpec) - 200;
        height = MeasureSpec.getSize(heightMeasureSpec) - 800;
    }

    @Override
    public void onDraw(Canvas canvas) {
        drawAxisX(canvas, mPaint);
        drawAxisY(canvas, mPaint);
        drawAxisScaleMarkX(canvas, mPaint);
        drawAxisScaleMarkY(canvas, mPaint);
        drawAxisArrowsX(canvas, mPaint);
        drawAxisArrowsY(canvas, mPaint);
        drawAxisScaleMarkValueX(canvas, mPaint);
        drawAxisScaleMarkValueY(canvas, mPaint);
        drawColumn(canvas, mPaint);
        drawTitle(canvas, mPaint);
    }

    /**
     * 绘制横坐标轴（X轴）
     *
     * @param canvas
     * @param paint
     */
    private void drawAxisX(Canvas canvas, Paint paint) {
        paint.setColor(Color.BLACK);
        //设置画笔宽度
        paint.setStrokeWidth(5);
        //设置画笔抗锯齿
        paint.setAntiAlias(true);
        //画横轴(X)
        canvas.drawLine(originX, originY, originX + width, originY, paint);
    }

    /**
     * 绘制纵坐标轴(Y轴)
     *
     * @param canvas
     * @param paint
     */
    private void drawAxisY(Canvas canvas, Paint paint) {
        //画竖轴(Y)
        canvas.drawLine(originX, originY, originX, originY - height, paint);//参数说明：起始点左边x,y，终点坐标x,y，画笔
    }

    /**
     * 绘制横坐标轴刻度线(X轴)
     *
     * @param canvas
     * @param paint
     */
    private void drawAxisScaleMarkX(Canvas canvas, Paint paint) {
        float cellWidth = width / axisDivideSizeX;
        for (int i = 0; i < axisDivideSizeX - 1; i++) {
            canvas.drawLine(cellWidth * (i + 1) + originX, originY, cellWidth * (i + 1) + originX, originY - 10, paint);
        }
    }

    /**
     * 绘制纵坐标轴刻度线(Y轴)
     *
     * @param canvas
     * @param paint
     */
    private void drawAxisScaleMarkY(Canvas canvas, Paint paint) {
        float cellHeight = height / axisDivideSizeY;
        for (int i = 0; i < axisDivideSizeY - 1; i++) {
            canvas.drawLine(originX, (originY - cellHeight * (i + 1)), originX + 10, (originY - cellHeight * (i + 1)), paint);
        }
    }

    /**
     * 绘制横坐标轴刻度值(X轴)
     *
     * @param canvas
     * @param paint
     */
    private void drawAxisScaleMarkValueX(Canvas canvas, Paint paint) {
        //设置画笔绘制文字的属性
        paint.setColor(Color.GRAY);
        paint.setTextSize(28);
        paint.setFakeBoldText(true);

        float cellWidth = width / axisDivideSizeX;
        float cellValue = maxAxisValueX / axisDivideSizeX;
        for (int i = 1; i < axisDivideSizeX; i++) {
            canvas.drawText(String.valueOf(cellValue * i), cellWidth * i + originX - 35, originY + 30, paint);
        }
    }

    /**
     * 绘制纵坐标轴刻度值(Y轴)
     *
     * @param canvas
     * @param paint
     */
    private void drawAxisScaleMarkValueY(Canvas canvas, Paint paint) {
        float cellHeight = height / axisDivideSizeY;
        float cellValue = maxAxisValueY / axisDivideSizeY;
        for (int i = 1; i < axisDivideSizeY; i++) {
            canvas.drawText(String.valueOf(cellValue * i), originX - 80, originY - cellHeight * i + 10, paint);
        }
    }

    /**
     * 绘制横坐标轴箭头(X轴)
     *
     * @param canvas
     * @param paint
     */
    private void drawAxisArrowsX(Canvas canvas, Paint paint) {
        //画三角形（X轴箭头）
        Path mPathX = new Path();
        mPathX.moveTo(originX + width + 30, originY);//起始点
        mPathX.lineTo(originX + width, originY - 10);//下一点
        mPathX.lineTo(originX + width, originY + 10);//下一点
        mPathX.close();
        canvas.drawPath(mPathX, paint);
    }

    /**
     * 绘制纵坐标轴箭头(Y轴)
     *
     * @param canvas
     * @param paint
     */
    private void drawAxisArrowsY(Canvas canvas, Paint paint) {
        //画三角形（Y轴箭头）
        Path mPathX = new Path();
        mPathX.moveTo(originX, originY - height - 30);//起始点
        mPathX.lineTo(originX - 10, originY - height);//下一点
        mPathX.lineTo(originX + 10, originY - height);//下一点
        mPathX.close();
        canvas.drawPath(mPathX, paint);
    }

    /**
     * 绘制柱状图
     *
     * @param canvas
     * @param paint
     */
    private void drawColumn(Canvas canvas, Paint paint) {
        if(columnInfo == null)
            return;
        float cellWidth = width / axisDivideSizeX;
        for (int i = 0; i < columnInfo.length; i++) {
            paint.setColor(columnInfo[i][1]);
            float leftTopY = originY - height * columnInfo[i][0] / maxAxisValueY;
            canvas.drawRect(originX + cellWidth * (i + 1), leftTopY, originX + cellWidth * (i + 2), originY, mPaint);//左上角x,y右下角x,y，画笔
        }
    }

    /**
     * 绘制标题
     *
     * @param canvas
     * @param paint
     */
    private void drawTitle(Canvas canvas, Paint paint) {

        //画标题
        if (title != null) {
            //设置画笔绘制文字的属性
            mPaint.setColor(titleColor);
            mPaint.setTextSize(titleSize);
            mPaint.setFakeBoldText(true);
            canvas.drawText(title, 300, originY + 150, paint);
        }
    }
}

MainActivity的布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:eleven="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <com.eleven.demo.widget.BarGraphView
        android:id="@+id/custom_view"
        android:layout_width="600dp"
        android:layout_height="wrap_content"
        eleven:barGraph_title="自定义柱状图"
        eleven:barGraph_titleSize="24sp"
        eleven:barGraph_titleColor="@android:color/black"/>
</RelativeLayout>

MainActivity中使用

public class MainActivity extends ActionBarActivity {
    private BarGraphView mBarGraphView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView(){
        mBarGraphView = (BarGraphView)findViewById(R.id.custom_view);
        mBarGraphView.setAxisX(900, 9);
        mBarGraphView.setAxisY(700,7);

        int columnInfo[][] = new int[][]{{600, Color.BLUE},{500, Color.GREEN},{400, Color.RED},{300, Color.BLUE},
                {500, Color.YELLOW},{300, Color.LTGRAY},{200, Color.BLUE}};
        mBarGraphView.setColumnInfo(columnInfo);
    }

该自定义View的实现中使用了自定义属性的方式定义了三个属性值，关于attrs.xml文件的使用方式参考 http://blog.csdn.net/jiangwei0910410003/article/details/17006087

时间： 2024-11-10 07:11:27

Android自定义View------柱状统计图的相关文章

Android：使用canvas绘柱状统计图(自动计算宽高及分度值、可左右滑动)

本例实现了一个简单的柱状统计图,如下:        特点: 1.根据数据源自动计算每个条目的高度.宽度.间距,自动计算分度值. 2.当条目数较多时,可左右滑动查看全部内容,图形.文字同步滑动,并且松手后会渐渐的停下来(而不是立刻停下来). 代码: (1)核心代码:BarChartView.java package com.sina.appbarchart; import android.app.Activity; import android.content.Context; import a

Android自定义View探索(一)—生命周期

Activity代码: public class FiveActivity extends AppCompatActivity { private MyView myView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Log.e("log", "Activity生命周期:onCreate"); setConte

Android 自定义View视图

创建全新的视图将满足我们独特的UI需求. 本文介绍在指南针开发中会用到的罗盘的界面UI,通过继承View类实现的自定义视图,以此来深刻了解自定义视图. 实现效果图: 源代码: 布局文件activity_main(其中CompassView继承View类): <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.

android自定义View （一）MeasureSpec

A MeasureSpec encapsulates the layout requirements passed from parent to child. Each MeasureSpec represents a requirement for either the width or the height. A MeasureSpec is comprised of a size and a mode. There are three possible modes: UNSPECIFIED

(转)[原] Android 自定义View 密码框 例子

遵从准则 暴露您view中所有影响可见外观的属性或者行为. 通过XML添加和设置样式 通过元素的属性来控制其外观和行为,支持和重要事件交流的事件监听器 详细步骤见:Android 自定义View步骤 样子 支持的样式 可以通过XML定义影响外边和行为的属性如下 边框圆角值,边框颜色,分割线颜色,边框宽度,密码长度,密码大小,密码颜色 <declare-styleable name="PasswordInputView"> <attr name="border

Android自定义View——圆形进度条式按钮

介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实

android 自定义View【2】对话框取色&amp;色盘取色的实现

android 自定义View[2]对话框取色&色盘取色的实现    上一篇文章基本介绍了android自定义view的流程:继承view,复写view的一些方法.实现简单的自定义view.这篇文章主要介绍的是系统对话框取色功能,然后顺便介绍升级版,色盘取色[类似于ps中的吸管,对图片点击相应位置,获取那个位置的颜色]. 一.概述:通过该例子了解以下内容: 1.进一步了解android 自定义view. 2.知道如何获取图片上的颜色值. 3.监听屏幕touch,实现移动的时候自动取色.[onDr

Android自定义View（二、深入解析自定义属性）

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51468648 本文出自:[openXu的博客] 目录: 为什么要自定义属性 怎样自定义属性 属性值的类型format 类中获取属性值 Attributeset和TypedArray以及declare-styleable ??在上一篇博客<Android自定义View(一.初体验)>中我们体验了自定义控件的基本流程: 继承View,覆盖构造方法 自定义属性 重写onMeasure方法测量宽

Android 自定义 view（三）&mdash;&mdash; onDraw

前言: 上一篇已经介绍了用自己定义的属性怎么简单定义一个view<Android 自定义view(二) -- attr 使用>,那么接下来我们继续深究自定义view,下一步将要去简单理解自定义view的两个比较重要的方法 onDraw(Canvas canvas) ,在探究 onDraw方法之前,我们必须先深入了解两个类Paint和Canvas .   第一:认识Paint 在探究onDraw之前首先必须要认识两个类,这里给出非常不错的两个资料参考网站,我也是从这里得到想要知道的东西,简单的说

[原] Android 自定义View 密码框 例子

遵从准则 暴露您view中所有影响可见外观的属性或者行为. 通过XML添加和设置样式 通过元素的属性来控制其外观和行为,支持和重要事件交流的事件监听器 详细步骤见:Android 自定义View步骤 样子 支持的样式 可以通过XML定义影响外边和行为的属性如下 边框圆角值,边框颜色,分割线颜色,边框宽度,密码长度,密码大小,密码颜色 <declare-styleable name="PasswordInputView"> <attr name="border