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; 
        } 
   }); 
      
}  
   
    
}

 实现的效果图：