android自定义统计带触摸,自定义View完成统计视图

当使用原生View达不到某些预定效果的时候,我们可以采用自定义View的方式向其中添加一些我们想要的特殊效果,比如我们想要在一个View中显示统计结果,如下图所示:

图1:

图2:

图3

现在我们根据图3实现一个View

第一步: 创建一个自定义View继承View或其子类

public class RoundViewextends View {

//主动创建对象时调用此构造方法

public RoundView(Context context) {

this(context, null);

}

private RoundView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

}

//使用findViewById()创建对象时调用此构造方法

private RoundView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

}

在自定义View中声明数据源类型

private List datas;

//其中包含3个参数 int型的区域颜色 String型的区域名称 float类型的值

我们为了更方便的创建数据源对象,现在在 此View中 添加一个静态的生成数据源对象的方法

public static ContentValues newValues(String name, float value, int color) {

ContentValues values = new ContentValues();

values.put("name", name);

values.put("value", value);

values.put("color", color);

return values;

}

第二步:重写onDraw()方法实现iew的重绘功能

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

height = this.getHeight();//获取当前View的高度

width = this.getWidth();//获取当前View的宽度 单位是像素

radius = (height > width ? width : height) * 2 / 6 - 2

* (top > left ? top : left);//设置绘制的圆为高宽中最小值的三分之一

paintRound(canvas);//描绘圆形的方法

paintTitle(canvas);//描绘标题的方法

paintComment(canvas);//描绘评论的方法

}

详细的画圆方法

/**

* 绘制圆形区域以及标题

*/

private void paintRound(Canvas canvas) {

// 整理总数

dealDatas();

paintData(canvas);

}

/**

* 整理所有参数,获取所有值的总和

*/

private void dealDatas() {

sum = 0;

for (ContentValues values : datas) {

sum += values.getAsFloat("value");

}

}

/**

* 根据datas中的数据更新View

*/

private void paintData(Canvas canvas) {

curAngle = 0;

RectF oval = new RectF(left, top, left + 2 * radius, top + 2 * radius);

//绘制圆形时可以使用一个矩形对象作为框架将圆形放入其中

for (int i = 0; i 

ContentValues values = datas.get(i);

float f = values.getAsFloat("value");

float angle = (float) (f / sum * 360);

//根据此数值占总数的比例来决定其在整个圆形中的角都

paintRound.setColor(values.getAsInteger("color"));

canvas.drawArc(oval, curAngle, angle, true, paintRound);

//该方法的第一个参数为参考矩形,第二个参数为起始角度,第三个参数为绘画角度,

//第四个参数为是否包含原点(若选择false表示不绘制原点只画一条弧度线)

curAngle += angle;

//增加起始角度供下一个数据使用

paintPoint(canvas, values.getAsString("name") + " " + f, i);

//在圆形的右侧绘制相应的名称和值

}

}

/**

* 在右侧绘制详细信息

*

* @param canvas

* @param asString

* @param asInteger

*/

private void paintPoint(Canvas canvas, String asString, int i) {

canvas.drawPoint(3 * left + 2 * radius, 2 * top + 2 * textSize * i,

paintRound);

canvas.drawText(asString, 3 * left + 2 * radius + textSize, 2 * top + 2

* textSize * i, paintWrite);

}

基本功能已经实现,源代码 请移步至 我的代码分享进行下载

用法详细说明: 此处所有的View均不可直接写在布局xml文件中,需要先在xml文件中指定一个FrameLayout

初始化时

layout = (FrameLayout) findViewById(R.id.fl);//获取FrameLayout对象

通过工厂类获取自定义对象

BorkenLineView newBorkenLineView = StatisticsFactory

.getInstance(layout)//将layout作为父控件传入

.newBorkenLineView(getApplicationContext());

newBorkenLineView.setDatas(getDatas())//设置数据源

.setValuesRange(-100, 0, 10)//设置显示数据区间

.setTitleText("折线报表")//设置标题

.setTitle(80, Color.BLUE, 4)//设置标题属性

.setPaintType(BorkenLineView.FIXNUMBER)//设置图例大小是匹配控件还是自定义

.setSize(300, 600)//若上一个设置为匹配控件则此设置无效(不会抛出异常)

.setCommentText("评论")//对于此统计结果的评论

.setComment(Color.RED, 20)//评论的属性设置

.flush();//刷新View重绘布局

总结RoundView(饼状图)对外提供的方法

public RoundView setDatas(List datas)

public RoundView setData(ContentValues value)

public RoundView setComment(String comment)

public void flush()

public RoundView setTitle(String title)

public static ContentValues newValues(String name, float value, int color)

ColumnsView 柱状图对外提供的方法

public void setDatas(List> datas)

public void setData(Map data)

public ColumnsView setColumnWeidth(float columnWeidth)//设置列宽

public ColumnsView setHeight(float viewHeight)//图形高度

public ColumnsView setTitle(String title)

public ColumnsView setValuesRange(float low, float high, int number)

public ColumnsView(Context context)

public void flush()

BorkenLineView折线图对外提供的方法

public BorkenLineView addData(Map map)

public BorkenLineView setDatas(List> datas)

public BorkenLineView setComment(int color, int textSize)

public BorkenLineView setValuesRange(float low, float high, int number)

public BorkenLineView setPaintType(int type)

public BorkenLineView setSize(float columnsHeigth, float columnsWidth)

public BorkenLineView setTitle(float titleSize, int color, int width)

public BorkenLineView setTitleText(String title)

public BorkenLineView setCommentText(String comment)

public void flush()