android---自定义折线图

来源：互联网发布：seo网站结构分析工具编辑：程序博客网时间：2024/05/19 00:15

折线图的功能就是根据后台给的数据，画出折线图，横坐标是孩子的年龄（月为单位），纵坐标有两种数据，一个是身高一个是体重。

自定义折线图是通过继承view类，使用canvas和paint绘制出来，再加上给定的图片作为背景，不需要绘制坐标轴，不过需要通过一定的表

达式去计算图片在不同手机分辨率下的伸缩比例。

LineView.java 自定义控件类

package com.example.chartdemo;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import android.R.integer;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PaintFlagsDrawFilter;

import android.util.AttributeSet;

import android.view.View;

/**

* @author xu

* 2015/1/27

public class LineView extends View {

private final static String X_KEY = "Xpos";

private final static String Y_KEY = "Ypos";

private float roateWidth; //图片宽度缩放比例

private float roateHeight; //图片高度缩放比例

//身高折线点的列表

private List<Map<String, Integer>> mHeightListPoint = new ArrayList<Map<String,Integer>>();

//体重折线点的列表

private List<Map<String, Integer>> mWeightListPoint = new ArrayList<Map<String,Integer>>();

private Paint mHeightPaint = new Paint(); //绘制身高折线的画笔

private Paint mWeightPaint = new Paint(); //绘制体重折线的画笔

public LineView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

// TODO Auto-generated constructor stub

}

public LineView(Context context, AttributeSet attrs) {

super(context, attrs);

// TODO Auto-generated constructor stub

}

public LineView(Context context) {

super(context);

// TODO Auto-generated constructor stub

}

@Override

protected void onDraw(Canvas canvas) {

// TODO Auto-generated method stub

super.onDraw(canvas);

//绘制折线

drawWeightLine(canvas);

drawHeightLine(canvas);

}

/**

* @param x,y 坐标的横坐标和纵坐标

* 输入年龄和体重，画出相应的折线

public void setWeightLine(float x, float y)

{

int curX , curY;

curX = (int)(roateWidth*widthChange(x));

curY = (int)(roateHeight*weightChange(y));

Map<String, Integer> temp = new HashMap<String, Integer>();

temp.put(X_KEY, curX);

temp.put(Y_KEY, curY);

mWeightListPoint.add(temp);

invalidate();

}

/**

* @param x,y 坐标的横坐标和纵坐标

* 输入年龄和身高，画出相应的折线

public void setHeightLine(float x, float y)

{

int curX , curY;

curX = (int)(roateWidth*widthChange(x));

curY = (int)(roateHeight*heightChange(y));

Map<String, Integer> temp = new HashMap<String, Integer>();

temp.put(X_KEY, curX);

temp.put(Y_KEY, curY);

mHeightListPoint.add(temp);

invalidate();

}

/**

* 绘制体重折线

* @param canvas

private void drawWeightLine(Canvas canvas)

{

mWeightPaint.setColor(Color.BLACK);

mWeightPaint.setAntiAlias(true);

mWeightPaint.setStrokeWidth(1.50f);

for (int index=0; index<mWeightListPoint.size(); index++)

{

if (index > 0)

{

canvas.drawLine(mWeightListPoint.get(index-1).get(X_KEY), mWeightListPoint.get(index-1).get(Y_KEY),

mWeightListPoint.get(index).get(X_KEY), mWeightListPoint.get(index).get(Y_KEY), mWeightPaint);

canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG));

}

/**

* 绘制身高折线

* @param canvas

private void drawHeightLine(Canvas canvas)

{

mHeightPaint.setColor(Color.RED);

mHeightPaint.setAntiAlias(true);

mHeightPaint.setStrokeWidth(1.50f);

for (int index=0; index<mHeightListPoint.size(); index++)

{

if (index > 0)

{

canvas.drawLine(mHeightListPoint.get(index-1).get(X_KEY), mHeightListPoint.get(index-1).get(Y_KEY),

mHeightListPoint.get(index).get(X_KEY), mHeightListPoint.get(index).get(Y_KEY), mHeightPaint);

canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG));

}

/**

* @param x 孩子的体重

* @return 坐标对应的点

private float weightChange(float x)

{

return (float) (496.0f-26.1f*x/2);

}

/**

* @param a 孩子的身高

* @return 坐标对应的点

private float heightChange(float a)

{

return (float) (706.0f-26.1f*a/5);

}

/**

* @param b 孩子的年龄

* @return 坐标对应的点

private float widthChange(float b)

{

return (float)(90.0f+26.1f*b);

}

/**

* @param roateWidth

* @param roateHeight

* 设置图片缩放比例

public void setRoate(float roateWidth,float roateHeight)

{

this.roateWidth = roateWidth;

this.roateHeight = roateHeight;

}

}

布局使用层次布局和横向ScrollView，将两种图片分别放在上层和下层当做坐标轴

<FrameLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/hha"

android:layout_centerInParent="true"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<HorizontalScrollView

android:layout_width="match_parent"

android:layout_height="match_parent">

<com.example.chartdemo.LineView

android:id="@+id/dd"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/bagraph_boy_ad"/>

</HorizontalScrollView>

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/bagraph_frame_ad2" />

</FrameLayout>

在MainActivity.java调用，需要获得手机的分辨率，获得对应压缩后图片的大小，然后和原图片对比获得压缩比例。

package com.example.chartdemo;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.view.Display;

import android.view.ViewGroup.LayoutParams;

import android.view.ViewTreeObserver;

import android.widget.FrameLayout;

import android.widget.Toast;

import android.app.Activity;

public class MainActivity extends Activity {

private static final int MSG_DATA_CHANGE = 0x11;

private LineView mLineView;

private Handler mHandler;

private int mX = 0;

private int Width; //屏幕的宽

private int Height; //屏幕的长

private FrameLayout layout; //动态设置布局大小，

private float roateWidth; //宽度的缩放比例

private float roateHeight; //长度的缩放比例

private Handler handler = new Handler()

{

@Override

public void handleMessage(Message msg) {

// TODO Auto-generated method stub

super.handleMessage(msg);

if(msg.what == 200)

{

mLineView.setHeightLine(0.0f, 45.0f);

mLineView.setHeightLine(1.0f, 49.0f);

mLineView.setHeightLine(2.0f, 55.0f);

mLineView.setHeightLine(3.0f, 60.0f);

mLineView.setHeightLine(4.0f, 70.0f);

mLineView.setHeightLine(5.0f, 75.0f);

mLineView.setHeightLine(6.0f, 78.0f);

mLineView.setHeightLine(7.0f, 80.0f);

mLineView.setHeightLine(8.0f, 83.0f);

mLineView.setHeightLine(9.0f, 85.0f);

mLineView.setHeightLine(10.0f, 88.0f);

mLineView.setHeightLine(11.0f, 90.0f);

mLineView.setHeightLine(12.0f, 92.0f);

mLineView.setHeightLine(13.0f, 95.0f);

mLineView.setWeightLine(0.0f, 2.0f);

mLineView.setWeightLine(1.0f, 3.0f);

mLineView.setWeightLine(2.0f, 4.0f);

mLineView.setWeightLine(3.0f, 5.0f);

mLineView.setWeightLine(4.0f, 6.0f);

mLineView.setWeightLine(5.0f, 6.5f);

mLineView.setWeightLine(6.0f, 7.0f);

mLineView.setWeightLine(7.0f, 8.0f);

mLineView.setWeightLine(8.0f, 8.5f);

mLineView.setWeightLine(9.0f, 8.9f);

mLineView.setWeightLine(10.0f, 9.0f);

mLineView.setWeightLine(11.0f, 9.5f);

mLineView.setWeightLine(12.0f, 9.9f);

mLineView.setWeightLine(13.0f, 10.2f);

}

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mLineView = (LineView) this.findViewById(R.id.dd);

layout = (FrameLayout)findViewById(R.id.hha);

LayoutParams lp = layout.getLayoutParams();

Display display = getWindowManager().getDefaultDisplay();

Width = display.getWidth();

Height =display.getHeight();

lp.height = Height/2;

lp.width = Width;

layout.setLayoutParams(lp);

//获得控件的大小

ViewTreeObserver vto = mLineView.getViewTreeObserver();

vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {

@Override

public boolean onPreDraw() {

mLineView.getViewTreeObserver().removeOnPreDrawListener(this);

//获得控件的高和宽

int height = mLineView.getMeasuredHeight();

int width = mLineView.getMeasuredWidth();

roateWidth = (float)width/1979; //寬度縮放比例

roateHeight = (float)height/526; //高度縮放比例

mLineView.setRoate(roateWidth, roateHeight);

//划线

handler.sendEmptyMessage(200);

return true;

}

});

}

实现的效果图：

0 0