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