Teach you how to create an ECG effect View Android custom View

Teach you how to create an ECG effect View Android custom View

Hi, I don't look like mushrooms... I am so moldy at school.

Thinking without learning

Lili is right. I have some strange questions. Most of them are caused by thinking and not learning. I think too much when I have not read enough books. Most of them are just like white thinking, so the revolution is not successful, comrades still need to work hard.

Well, I don't want to talk nonsense. Because cloth always has to do an electrocardiographic task, I want to practice it. In short, the UI image obtained is as follows:

The effect is as follows:

Get the graph and do some simple analysis first. Er ..

Drawing of the background table:

First, drawColor is black, and then draw lines with loops,

ECG drawing:

It looks like path. It should be okay.

As a result, I finished the two steps .. The results showed that, um .. Indeed, the key is how to let him change .. It's easy to think of scrollBy. Then you will find out .. The background has also changed .. Solve the problem .. Therefore, we may be opportunistic to separate the two views, that is, the background is a View, and the line chart is a View.

First, create a View for background View. He has some attributes, because these views were originally one, and later there was another View that needed the same attributes to be discounted, so he was just lazy and changed it to protected ..
Reprinted please indicate the source: http://blog.csdn.net/wingichoy/article/details/51023865

Public class CardiographView extends View {// Paint brush protected Paint mPaint; // The discounted Color protected int mLineColor = Color. parseColor ("#76f112"); // grid Color protected int mGridColor = Color. parseColor ("#1b4200"); // Small Grid Color protected int mSGridColor = Color. parseColor ("#092100"); // background Color protected int mBackgroundColor = Color. BLACK; // its own size protected int mWidth, mHeight; // The grid width protected int mGridWidth = 50; // The width of the small mesh protected int mSGridWidth = 10; // The ECG discount protected Path mPath;

Defines these attributes and initializes the paint brush and Path in the constructor.

public CardiographView(Context context) {        this(context,null);    }    public CardiographView(Context context, AttributeSet attrs) {        this(context, attrs,0);    }    public CardiographView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        mPaint = new Paint();        mPath = new Path();    }

Next we get our own width and height. Note: to simplify the example, we will not measure it here.

@Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        mWidth = w;        mHeight = h;        super.onSizeChanged(w, h, oldw, oldh);    }

After the preparation is complete, start to draw the background and create a drawBackground (Canvas canvas) method.
You can use a for loop to draw a vertical line. The starting x coordinate of the horizontal line is 0, the ending x coordinate is mWidth, And the y coordinate is I * mGridWidth (grid width). We need to get the number of grids, that is, dividing the width and height by the grid width, for specific operations, see the code:

Private void initBackground (Canvas canvas) {canvas. drawColor (mBackgroundColor); // draw a Small Grid // number of vertical bars int vSNum = mWidth/mSGridWidth; // number of horizontal lines int hSNum = mHeight/mSGridWidth; mPaint. setColor (mSGridColor); mPaint. setStrokeWidth (2); // draw a vertical line for (int I = 0; I
  

The running effect is as follows:

Er... It looks like a bit ..

Add Path to it now .. Create a new View and write it to the bottom of the relative Layout

To simplify the process, create a new View that inherits CardiographView. Here, you only need to override its ondraw method. Other attributes do not need to be defined.

Private void drawPath (Canvas canvas) {// reset path mPath. reset (); // use path to simulate an ECG pattern mPath. moveTo (0, mHeight/2); int tmp = 0; for (int I = 0; I <10; I ++) {mPath. lineTo (tmp + 20,100); mPath. lineTo (tmp + 70, mHeight/2 + 50); mPath. lineTo (tmp + 80, mHeight/2); mPath. lineTo (tmp + 200, mHeight/2); tmp = tmp + 200;} // set the brush style mPaint. setStyle (Paint. style. STROKE); mPaint. setColor (mLineColor); mPaint. setStrokeWidth (5); canvas. drawPath (mPath, mPaint );}

Now we can figure it out as follows:


Then how can we make him move. Of course it's scrollBy ~~ Pay attention to the difference between scrollBy and scrollTo. This is often used for interviews. Then, you can use postInvalidateDelayed.

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

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

Of course, this is just a demo. You can draw different coordinates as needed to achieve the real ECG effect.

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