Android自定义View实现折线图效果
程序员文章站
2024-03-07 21:15:39
下面就是结果图（每种状态用一个表情图片表示）：
一、主页面的布局文件如下：
下面就是结果图（每种状态用一个表情图片表示）：
一、主页面的布局文件如下：
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity" xmlns:app="http://schemas.android.com/apk/res/ting.example.linecharview"> <ting.example.linecharview.linecharview android:id="@+id/test" android:layout_width="match_parent" android:layout_height="match_parent" app:xytextcolor="@color/bg" app:xytextsize="20sp" app:interval="80dp" /> </relativelayout>
其中linecharview就是自定义的view，而app:xx就是这个view的各种属性。
二、在values的attrs文件中加入如下xml，来定义linecharview的各种属性：
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="linechar"> <attr name="xylinecolor" format="color"/><!-- xy坐标轴颜色 --> <attr name="xylinewidth" format="dimension"/><!-- xy坐标轴宽度 --> <attr name="xytextcolor" format="color"/><!-- xy坐标轴文字颜色 --> <attr name="xytextsize" format="dimension"/><!-- xy坐标轴文字大小 --> <attr name="linecolor" format="color"/><!-- 折线图中折线的颜色 --> <attr name="interval" format="dimension"/><!-- x轴各个坐标点水平间距 --> <attr name="bgcolor" format="color"/><!-- 背景颜色 --> </declare-styleable> </resources>
三、接下来建个类linecharview 继承view，并申明如下变量：
<span style="white-space:pre"> </span>private int xori;//圆点x坐标 private int yori;//圆点y坐标 private int xinit;//第一个点x坐标 private int minxinit;//在移动时，第一个点允许最小的x坐标 private int maxxinit;//在移动时，第一个点允许允许最大的x坐标 private int xylinecolor;//xy坐标轴颜色 private int xylinewidth;//xy坐标轴大小 private int xytextcolor;//xy坐标轴文字颜色 private int xytextsize;//xy坐标轴文字大小 private int linecolor;//折线的颜色 private int interval;//坐标间的间隔 private int bgcolor;//背景颜色 private list<string> x_coords;//x坐标点的值 private list<string> x_coord_values;//每个点状态值 private int width;//控件宽度 private int heigth;//控件高度 private int imagewidth;//表情的宽度 private float textwidth;//y轴文字的宽度 float startx=0;//滑动时候，上一次手指的x坐标
在构造函数中读取各个属性值：
public linecharview(context context, attributeset attrs) {
super(context, attrs);
typedarray typedarray= context.obtainstyledattributes(attrs, r.styleable.linechar);
xylinecolor=typedarray.getcolor(r.styleable.linechar_xylinecolor, color.gray);
xylinewidth=typedarray.getint(r.styleable.linechar_xylinewidth, 5);
xytextcolor=typedarray.getcolor(r.styleable.linechar_xytextcolor, color.black);
xytextsize=typedarray.getlayoutdimension(r.styleable.linechar_xytextsize, 20);
linecolor=typedarray.getcolor(r.styleable.linechar_linecolor, color.gray);
interval=typedarray.getlayoutdimension(r.styleable.linechar_interval, 100);
bgcolor=typedarray.getcolor(r.styleable.linechar_bgcolor, color.white);
typedarray.recycle();
x_coords=new arraylist<string>();
x_coord_values=new arraylist<string>();
}
四、接下来可以重写onlayout方法，来计算控件宽高和坐标轴的原点坐标，坐标轴原点的x坐标可以通过y轴文字的宽度，y轴宽度，和距离y的水平距离进行计算，这里y轴文字只有4种状态(a、b、c、d)，可以使用下面方法来计算出原点的x坐标：
paint paint=new paint();
paint.settextsize(xytextsize);
textwidth= paint.measuretext("a");
xori=(int) (textwidth+6+2*xylinewidth);//6 为与y轴的间隔
原点的y坐标也可以用类似的方法计算出来：
yori=heigth-xytextsize-2*xylinewidth-3; //3为x轴的间隔，heigth为控件高度。
当需要展示的数据量多时候，无法全部展示时候，需要通过滑动折线图进行展示，我们只需要控制第一点x坐标，就可以通过interval这个属性计算出后面每个点的坐标，但是为了防止将所有的数据滑动出界面外，需要在滑动时进行控制，其实就是控制第一个点x坐标的范围，第一个点的x坐标的最小值可以通过控件的宽度减去原点x坐标再减去所有折线图的水平距离，代码如下：
minxinit=width-xori-x_coords.size()*interval;
控件在默认第一个展示时，第一个点与y轴的水平距离等于interval的一半，在滑动时候如果第一个点出现在这个位置了，就不允许再继续向右滑动，所以第一个点x坐标的最大值就等这个起始x坐标。
xinit=interval/2+xori; maxxinit=xinit;
重写onlayout方法的代码如下：
@override
protected void onlayout(boolean changed, int left, int top, int right,
int bottom) {
if(changed){
width=getwidth();
heigth=getheight();
paint paint=new paint();
paint.settextsize(xytextsize);
textwidth= paint.measuretext("a");
xori=(int) (textwidth+6+2*xylinewidth);//6 为与y轴的间隔
yori=heigth-xytextsize-2*xylinewidth-3;//3为x轴的间隔
xinit=interval/2+xori;
imagewidth= bitmapfactory.decoderesource(getresources(), r.drawable.facea).getwidth();
minxinit=width-xori-x_coords.size()*interval;
maxxinit=xinit;
setbackgroundcolor(bgcolor);
}
super.onlayout(changed, left, top, right, bottom);
}
五、接下来就可以画折线、x坐标轴上的小圆点和折线上表情
代码如下：
//画x轴坐标点，折线，表情
@suppresslint("resourceascolor")
private void drawx (canvas canvas) {
paint x_coordpaint =new paint();
x_coordpaint.settextsize(xytextsize);
x_coordpaint.setstyle(paint.style.fill);
path path=new path();
//画坐标轴上小原点，坐标轴文字
for(int i=0;i<x_coords.size();i++){
int x=i*interval+xinit;
if(i==0){
path.moveto(x, getyvalue(x_coord_values.get(i)));
}else{
path.lineto(x, getyvalue(x_coord_values.get(i)));
}
x_coordpaint.setcolor(xylinecolor);
canvas.drawcircle(x, yori, xylinewidth*2, x_coordpaint);
string text=x_coords.get(i);
x_coordpaint.setcolor(xytextcolor);
canvas.drawtext(text, x-x_coordpaint.measuretext(text)/2, yori+xytextsize+xylinewidth*2, x_coordpaint);
}
x_coordpaint.setstyle(paint.style.stroke);
x_coordpaint.setstrokewidth(xylinewidth);
x_coordpaint.setcolor(linecolor);
//画折线
canvas.drawpath(path, x_coordpaint);
//画表情
for(int i=0;i<x_coords.size();i++){
int x=i*interval+xinit;
canvas.drawbitmap(getybitmap(x_coord_values.get(i)), x-imagewidth/2, getyvalue(x_coord_values.get(i))-imagewidth/2, x_coordpaint);
}
//将折线超出x轴坐标的部分截取掉
x_coordpaint.setstyle(paint.style.fill);
x_coordpaint.setcolor(bgcolor);
x_coordpaint.setxfermode(new porterduffxfermode( porterduff.mode.src_over));
rectf rectf=new rectf(0, 0, xori, heigth);
canvas.drawrect(rectf, x_coordpaint);
}
以上代码首先通过遍历x_coords和x_coord_values这两个list集合，来画坐标点，折线，表情，由于在向左滑动的时候有可能会将坐标点，折线绘制到y轴的左边，所以需要对其进行截取。其中getyvalue和getybitmap方法，可以通过x_coord_values的值计算y坐标和相应的表情。两方法如：
//得到y坐标
private float getyvalue(string value)
{
if(value.equalsignorecase("a")){
return yori-interval/2;
}
else if(value.equalsignorecase("b")){
return yori-interval;
}
else if(value.equalsignorecase("c")){
return (float) (yori-interval*1.5);
}
else if(value.equalsignorecase("d")){
return yori-interval*2;
}else{
return yori;
}
}
//得到表情图
private bitmap getybitmap(string value){
bitmap bitmap=null;
if(value.equalsignorecase("a")){
bitmap=bitmapfactory.decoderesource(getresources(), r.drawable.facea);
}
else if(value.equalsignorecase("b")){
bitmap=bitmapfactory.decoderesource(getresources(), r.drawable.faceb);
}
else if(value.equalsignorecase("c")){
bitmap=bitmapfactory.decoderesource(getresources(), r.drawable.facec);
}
else if(value.equalsignorecase("d")){
bitmap=bitmapfactory.decoderesource(getresources(), r.drawable.faced);
}
return bitmap;
}
六、画好了坐标点，折线，表情，接下来就简单，就可以画x y轴了，x y轴只要确定的原点坐标，就非常简单了，代码如下：
//画坐标轴
private void drawxy(canvas canvas){
paint paint=new paint();
paint.setcolor(xylinecolor);
paint.setstrokewidth(xylinewidth);
canvas.drawline(xori, 0, xori, yori, paint);
canvas.drawline(xori, yori, width, yori, paint);
}
七、最后就可以画y轴上的坐标小原点和y轴的文字了：
//画y轴坐标点
private void drawy(canvas canvas){
paint paint=new paint();
paint.setcolor(xylinecolor);
paint.setstyle(paint.style.fill);
for(int i=1;i<5 ;i++){
canvas.drawcircle(xori, yori-(i*interval/2), xylinewidth*2, paint);
}
paint.settextsize(xytextsize);
paint.setcolor(xytextcolor);
canvas.drawtext("d",xori-textwidth-6-xylinewidth , yori-(2*interval)+xytextsize/2, paint);
canvas.drawtext("c",xori-textwidth-6-xylinewidth , (float) (yori-(1.5*interval)+xytextsize/2), paint);
canvas.drawtext("b",xori-textwidth-6-xylinewidth , yori-interval+xytextsize/2, paint);
canvas.drawtext("a",xori-textwidth-6-xylinewidth , (float) (yori-(0.5*interval)+xytextsize/2), paint);
}
八、写完了以上三个方法：只需要重写ondraw方法，就可以进行绘制了。
@override
protected void ondraw(canvas canvas) {
drawx(canvas);
drawxy(canvas);
drawy(canvas);
}
九、为了可以进行水平滑动，需要重写控件的ontouchevent方法，在滑动时候，实时计算手指滑动的距离来改变第一个点的x坐标，然后调用invalidate();就可以刷新控件，重新绘制达到滑动效果。
@override
public boolean ontouchevent(motionevent event) {
//如果不用滑动就可以展示所有数据，就不让滑动
if(interval*x_coord_values.size()<=width-xori){
return false;
}
switch (event.getaction()) {
case motionevent.action_down:
startx=event.getx();
break;
case motionevent.action_move:
float dis=event.getx()-startx;
startx=event.getx();
if(xinit+dis>maxxinit){
xinit=maxxinit;
}else if(xinit+dis<minxinit){
xinit=minxinit;
}else{
xinit=(int) (xinit+dis);
}
invalidate();
break;
}
return true;
}
十、最后添加一个设置数据源的方法，设置x_coords，x_coord_values这个两个list集合，在设置完成之后调用invalidate() ，进行控件刷新：
/**
* 设置坐标折线图值
* @param x_coords 横坐标坐标点
* @param x_coord_values 每个点的值
*/
public void setvalue( list<string> x_coords ,list<string> x_coord_values) {
if(x_coord_values.size()!=x_coords.size()){
throw new illegalargumentexception("坐标轴点和坐标轴点的值的个数必须一样!");
}
this.x_coord_values=x_coord_values;
this.x_coords=x_coords;
invalidate();
}
总结
以上就是android自定义view实现折线图效果的全部内容，希望对大家开发android能有所帮助。
下一篇： asp.net 分页链接方法