android---自定义折线图

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

自定义折线图是通过继承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; 

        } 

   }); 

      

}  

   

    

}

 实现的效果图：