自定义view之心率线

先发个图：

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

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

效果图：

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

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

attrs.xml:

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; i3,否则越界
					for(int i=0; i

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

代码下载：github