Teach you how to create an ECG effect view Android Custom view

Hello everyone, look at me like mushrooms ... Because I was moldy at school.

Thinking without learning is dangerous

Lili is right, I have strange doubts, mostly thinking and not to learn, in my book is not enough to think too much, mostly equal to white think, so the revolution did not succeed, comrades still need to work hard.

Okay, nonsense not to say, because the cloth always do an electrocardiogram, so do to practice practiced hand, in short, get the UI diagram is as follows:

The good results are as follows:

Get the diagram and do some simple analysis first. Uh..

• Drawing of the background table
• The drawing of an electrocardiogram

Drawing of the background table:

First Drawcolor the black, then use the loop to draw the line,

The drawing of an electrocardiogram:

It looks like path, it should be fine.

So the two steps are finished. Turns out, uh. It does draw, the key is how to let him move it. It's easy to think of Scrollby. And then you find out. The background has changed, too. If you encounter problems, you should solve them. So here's a little bit of an opportunist. Separates two view, that is, the background is a view, the line chart is a view.

First, create a view to do the background view. He has some attributes, because these view is originally a, then have a discounted view need the same attribute, so simply lazy to change to protected decoration.
Reprint Please specify source: http://blog.csdn.net/wingichoy/article/details/51023865

 Public  class cardiographview extends View {    //Brushes    protectedPaint Mpaint;//Discounted color    protected intMlinecolor = Color.parsecolor ("#76f112");//Grid color    protected intMgridcolor = Color.parsecolor ("#1b4200");//Small grid color    protected intMsgridcolor = Color.parsecolor ("#092100");//Background color    protected intMbackgroundcolor = Color.Black;//size of itself    protected intMwidth,mheight;//Grid width    protected intMgridwidth = -;//width of small grid    protected intMsgridwidth =Ten;//ECG discount    protectedPath MPath;

Define these properties, initialize the brush and path in the constructor

publicCardiographView(Context context) {        this(context,null);    }    publicCardiographView(Context context, AttributeSet attrs) {        this(context, attrs,0);    }    publicCardiographViewint defStyleAttr) {        super(context, attrs, defStyleAttr);        new Paint();        new Path();    }

Then get the width of your own. Note In order to simplify the example, there is no measurement

@Override    protectedvoidonSizeChanged(intintintint oldh) {        mWidth = w;        mHeight = h;        super.onSizeChanged(w, h, oldw, oldh);    }

The preparation is complete, start drawing the background, and create a drawbackground (Canvas canvas) method.
As you can imagine, use a For loop to draw a horizontal bar. The starting X coordinate of the horizontal line is 0, the ending x coordinate is mwidth, the Y coordinate is i*mgridwidth (grid width), we want to get the number of the grid, that is, width and height divided by the width of the grid, the specific operation to see the code:

private void Initbackground (CanvasCanvas) {Canvas. Drawcolor (Mbackgroundcolor);//Draw small grid        //Bar number        intVsnum = Mwidth/msgridwidth;//number of horizontal lines        intHsnum = Mheight/msgridwidth;        Mpaint.setcolor (Msgridcolor); Mpaint.setstrokewidth (2);//Draw Vertical Line         for(inti =0; i<vsnum+1; i++) {Canvas. DrawLine (i*msgridwidth,0, I*msgridwidth, Mheight,mpaint); }//Draw horizontal Line         for(inti =0; i1; i++) {Canvas. DrawLine (0, I*msgridwidth, Mwidth,i*msgridwidth, Mpaint); }//Bar number        intVnum = Mwidth/mgridwidth;//number of horizontal lines        intHnum = Mheight/mgridwidth;        Mpaint.setcolor (Mgridcolor); Mpaint.setstrokewidth (2);//Draw Vertical Line         for(inti =0; i<vnum+1; i++) {Canvas. DrawLine (i*mgridwidth,0, I*mgridwidth, Mheight,mpaint); }//Draw horizontal Line         for(inti =0; i1; i++) {Canvas. DrawLine (0, I*mgridwidth, Mwidth,i*mgridwidth, Mpaint); }    }

Here's how it works:

Uh... It looks like a bit of a look.

Now add path to it. Create a new view, write to the bottom of the relative layout

<?xml version= "1.0" encoding= "Utf-8"?><Relativelayout xmlns:android="Http://schemas.android.com/apk/res/android"    Xmlns:tools="Http://schemas.android.com/tools"    Android:layout_width="Match_parent"    Android:layout_height="Match_parent"    Android:paddingbottom="@dimen/activity_vertical_margin"    Android:paddingleft="@dimen/activity_horizontal_margin"    Android:paddingright="@dimen/activity_horizontal_margin"    Android:paddingtop="@dimen/activity_vertical_margin"    Tools:context="Com.wingsofts.cardiograph.MainActivity"><com.wingsofts.cardiograph.CardiographViewandroid:layout_width="Match_parent"  android:layout_height="Match_parent">        </com.wingsofts.cardiograph.CardiographView>    <com.wingsofts.cardiograph.PathViewandroid:layout_width="Match_parent"  Android:layout_height="match_parent" />                </relativelayout>

For the sake of simplicity, create a new view inheritance Cardiographview, where you only need to rewrite his OnDraw method, and the other properties do not need to be defined.

private void DrawPath (canvas canvas) {//reset path MPath. Reset();Simulate an ECG pattern with path MPath. MoveTo(0, mheight/2);int TMP =0;for (int i =0; i<10;i++) {MPath. LineTo(tmp+ -, -);MPath. LineTo(tmp+ -, Mheight/2+ -);MPath. LineTo(tmp+ the, Mheight/2);MPath. LineTo(tmp+ $, Mheight/2);TMP = tmp+ $;}//Set brush style Mpaint. SetStyle(Paint. Style. STROKE);Mpaint. SetColor(Mlinecolor);Mpaint. Setstrokewidth(5);Canvas. DrawPath(Mpath,mpaint);}

Well, now draw it out like this:

Then how do you get him to move? Of course is Scrollby ~ ~ Here Notice the difference between Scrollby and Scrollto, interview often test, then postinvalidatedelayed can

  @Override    protectedvoidonDraw(Canvas canvas) {        drawPath(canvas);        scrollBy(1,0);        postInvalidateDelayed(10);    }

Done! This is the same as the implementation diagram above:

Of course, this is just a demo, you can according to their own needs to different coordinates to draw, to achieve the real ECG effect.

If you like my blog, please pay attention to OH.

In addition: If you have a position as long as in Guangzhou Welcome to pull me, I just quit internship work, June will graduate, will be unemployed!!!

Address of this project (for Star): Click to open

Teach you how to create an ECG effect view Android Custom view