自定义view之心率线

先发个图：

我拿着设计图问美工MM，中间这波浪是什么鬼。她说是心率线。额，，，，好吧，无语，画呗。

再怎么说你也弄个正弦波出来啊，算了，看你颜值的份上。。。

效果图：

基本原理图如下，在view的右侧非可视区内加载脉冲数组，一个脉冲数组记录了脉冲那几个点在view中的高度

1.  定义attr属性，并在构造体初始化。

attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="HeartRateLine">
        <attr name="pulses" format="integer"/>
        <attr name="pointsOfEachPulse" format="integer"/>
        <attr name="speed" format="integer"/>     
    </declare-styleable>    
</resources>

2.onMeasure不重写，直接onDraw()， layout_width和layout_height最好赋确定值，下面放整个view的代码。

HeartRateLine.java:

public class HeartRateLine extends View {
	
	//脉冲个数
	private int pulses;
	//每个脉冲的点数，用于画path
	private int pointsOfEachPulse;
	//心率线每移动一个点距所需的时间
	private int speed;
	private Paint paint;
	
	private int[] pointsHeight;
	private int points;
	private boolean isInit=false;
	private int count;

	public HeartRateLine(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		// TODO Auto-generated constructor stub
		
		TypedArray array=context.obtainStyledAttributes(attrs, R.styleable.HeartRateLine);
		pulses=array.getInt(R.styleable.HeartRateLine_pulses, 5);
		pointsOfEachPulse=array.getInt(R.styleable.HeartRateLine_pointsOfEachPulse, 10);
		speed=array.getInt(R.styleable.HeartRateLine_speed, 100);		
		
		array.recycle();
		
		paint=new Paint();
		paint.setColor(Color.RED);
		paint.setAntiAlias(true);
		paint.setStrokeWidth(1f);
		paint.setStyle(Style.STROKE);
		
		//在view可视区内的点数
		points=pulses*pointsOfEachPulse;
		//+pointsOfEathPulse是增加在View的非可视区内的点数（即在非可视区加载一个脉冲），
		//+1是为了数组前后依次赋值时避免到最后一个点赋值越界的情况
		pointsHeight=new int[points+pointsOfEachPulse+1];		
		
	}

	public HeartRateLine(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
		// TODO Auto-generated constructor stub
	}

	public HeartRateLine(Context context) {
		this(context, null);
		// TODO Auto-generated constructor stub
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		
		//点与点之间的间隔
		int intervalBetweenPoints=getWidth()/(pulses*pointsOfEachPulse-1);
		
		//初始化所有点的高，使之全部等于高的一半
		if(!isInit){
			for(int i=0; i<pointsHeight.length; i++){
				pointsHeight[i]=getHeight()/2;
			}
			isInit=true;
		}
		
		//创建一条路径，并按点与点的间隔递增和poitsHeight数据得到点的位置
		Path path=new Path();
		path.moveTo(0, getHeight()/2);
		for(int i=0; i<pointsHeight.length; i++){
			path.lineTo(intervalBetweenPoints*i, pointsHeight[i]);
		}
		
		//画路径
		canvas.drawPath(path, paint);
		
		//使pointsHeight前后依次赋值并重绘，使路径一个点距一个点距地动起来，
		//且每一个pulse周期(即pointsOfEachPulse),则在view的右边不可视区域加载新的pulse
		postDelayed(new Runnable() {
			
			@Override
			public void run() {
				// TODO Auto-generated method stub
				for(int i=0; i<points+pointsOfEachPulse; i++){
					pointsHeight[i]=pointsHeight[i+1];
				}
				if(count==pointsOfEachPulse){
					//随机一个高度以内的数值
					int height=(int) (Math.random()*getHeight()/2);
					
					//在pointsOfEachPulse这几个点之内画好你想要的pulse形状
					//这里实例只是简单地上下放一个随机高度而已	
					//这里要确保pointsOfEachPulse>3,否则越界
					for(int i=0; i<pointsOfEachPulse; i++){
						if(i==1){
							pointsHeight[points+i]=getHeight()/2-height;
						}else if(i==2){
							pointsHeight[points+i]=getHeight()/2+height;
						}else{
							pointsHeight[points+i]=getHeight()/2;
						}						
					}					
					count=0;
				}
				count++;
				
				invalidate();
			}
		}, speed);
	}

}

我只是简单地画了一个闪电状的脉冲图形，其实还可以增加脉冲点数，利用CornerPathEffect可以画出正弦波图形的，这里就简单显示一下而已。

代码下载：github