Hand take you to draw a fashion dashboard Android own definition view

Get the artwork. We have to draw exactly the same ape.

In order not to be sprayed by the boss, just can practice ah.

I heard that you think the previous few are so easy, that today will take you to a relatively more complex.

Reprint Please specify source: http://blog.csdn.net/wingichoy/article/details/50468674

Note: Each blog is built on the basics of a previous blog, assuming you've just touched your own definition view. To be able to talk about the way you define view simple learning Here I used to read the article. I have recorded the process of learning to define my own view, and some of the previous blogs have made some mistakes (repeatedly drawn, OnDraw new objects, etc.). I don't want to correct the mistakes in the blog post here. Because some of the mistakes are often made, later blogs have pointed out these mistakes and did not do it again. This is a learning process. So I want to record the wrong experience. And so become a master to look back at that year's self is how food. will also have a sense of accomplishment.

。

For example the following today (on the left is the implementation diagram to the right of the UI graph):

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

The overall effect of self-feeling is good. At least it's about the same.

Previous dynamic diagram:

In fact, this effect is not very difficult to achieve, that is, the calculation of coordinates, radians and the like may be more troublesome, here to share write one of the manuscript. Please ignore the very ugly words. In fact, make your own definition view or draw more on paper. So I hope you can draw like this, the idea will be very smooth.

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

All right, no more talking nonsense. Get started.

First you define the attribute constructor, measured what you must have been very skilled directly paste code, staring writing is very clear

public class Panelview extends View {private int mwidth;    private int mheight;    private int mpercent;    Scale width private float mtikewidth;    The width of the second arc is private int mscendarcwidth;    The radius of the smallest circle private int mmincircleradius;    The wide private int mrectwidth of the text rectangle;    The high private int mrectheight of the text rectangle;    Text content private String MText = "";    The size of the text private int mtextsize;    Set text color private int mtextcolor;    private int marccolor;    Small circle and pointer color private int mmincirclecolor;    Number of ticks private int mtikecount;    Private Context Mcontext;    Public Panelview (Context context) {This (context, NULL);    } public Panelview (context context, AttributeSet Attrs) {This (context, attrs, 0);         } public Panelview (context context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);        Mcontext = context;        TypedArray a = context.obtainstyledattributes (attrs,r.styleable.panelview,defstyleattr,0); MarccoloR = A.getcolor (R.styleable.panelview_arccolor, Color.parsecolor ("#5FB1ED"));        Mmincirclecolor = A.getcolor (R.styleable.panelview_pointercolor,color.parsecolor ("#C9DEEE"));        Mtikecount = A.getint (r.styleable.panelview_tikecount,12);        Mtextsize = A.getdimensionpixelsize (Pxutils.sptopx (R.styleable.panelview_android_textsize,mcontext), 24);        MText = a.getstring (R.styleable.panelview_android_text);    Mscendarcwidth = 50; } @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {int widthsize = Measuresp        Ec.getsize (WIDTHMEASURESPEC);        int widthmode = Measurespec.getmode (Widthmeasurespec);        int heightsize = measurespec.getsize (Heightmeasurespec);        int heightmode = Measurespec.getmode (Heightmeasurespec);        if (Widthmode = = measurespec.exactly) {mwidth = widthsize;        }else {mwidth = pxutils.dptopx (200,mcontext);        } if (Heightmode = = measurespec.exactly) {    Mheight = heightsize;        }else {mheight = pxutils.dptopx (200,mcontext);        } log.e ("Wing", mwidth+ "");    Setmeasureddimension (Mwidth, mheight); }

Define your own properties Attr.xml

<?xml version= "1.0" encoding= "Utf-8"?
><resources>    <declare-styleable name= "Panelview" >        <attr name= "arccolor" format= "COLOR"/ >        <attr name= "Arcwidth" format= "Dimension"/> <attr        name= "Android:text"/> <attr name=        "Tikecount" format= "integer"/>        <attr name= "PointerColor" format= "color"/> <attr        name= "Android: TextSize "/>    </declare-styleable></resources>

Then comes the play, which is drawing. Just like painting, a complex view is a stroke of paint. So we break this view down.

Probably decomposed into for example the following:1. The outermost arc 2. Inside the thick arc 3. Middle Circle 4. The smallest circle 5. Scale 6. Pointer 7. Rectangle 8. Text

It must be hard for you to make a separate drawing. That combination is the view. Start our OnDraw () below

According to this decomposition:

1. Draw the outermost arc one thing to note here is that. Suppose you want this circle to be remembered in the view minus half the width of the brush because the radius is calculated from the center of the circle to the middle of the brush width, so the rectangle that arcs here is new RECTF (Strokewidth, Strokewidth, Mwidth-strokewidth, Mheig Ht-strokewidth)

     Paint p = new paint ();         int strokewidth = 3;        P.setstrokewidth (strokewidth);        P.setantialias (true);        P.setstyle (Paint.Style.STROKE);        P.setcolor (Marccolor);        Outermost line        Canvas.drawarc (New RECTF (Strokewidth, Strokewidth, Mwidth-strokewidth, Mheight-strokewidth), 145, °f, FA LSE, p);

This is the effect of drawing.

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

2. Draw the inside of the rough arc, here is more troublesome is to be divided into four sections, look at the picture:

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

Since the length of the large circle and the inside of the rough arc is inconsistent, here is calculated using a percentage to cause the pointer deviation, then the 1, 22 parts fixed to draw. Then there's the 3 full part. Use percentages to calculate how many degrees you need to draw, and finally 4 blank parts.

First, draw the rectangle of the rough arc. It's fixed here 50 less than a large arc radius (in fact it can be improved, you can change it dynamically to make him more flexible), and then calculate the percentage.

RECTF SECONDRECTF = new RECTF (Strokewidth +, Strokewidth +, mwidth-strokewidth-50, mheight-strokewidth-50); C0/>float secondrectwidth = mwidth-strokewidth-50-(strokewidth +);        float secondrectheight = mheight-strokewidth-50-(strokewidth +);        float percent = mpercent/100f;

Next, draw 1 arcs. First calculate the fill filled with the degree of the part, because it is prominent, so the assumption that the percentage is 0, the left is white to highlight the assumption is not zero, then and full color unity.

        The degree of the filled arc    -5 is the deviation of the size arc        float fill = percent;        The degrees of empty arcs        float empty = 250-fill;//        log.e ("Wing", Fill + "");        if (percent==0) {            p.setcolor (color.white);        }        Draw the rough arc protruding part left end        Canvas.drawarc (secondrectf,135,11,false,p);

Then draw a 2 arc, which is filled with fill,

Canvas.drawarc (SECONDRECTF, 145, fill, false, p);

Next is the 3 arc. An arc that is not filled with empty. It's white.

P.setcolor (color.white);        An CANVAS.DRAWARC part of an arc-hu        (SECONDRECTF, 145 + fill, empty, false, p);

At last. Draw the 4 arc on the right, assuming a percentage of 100 then the color is the same as the full, otherwise white

Draw the thick arc to the right end of the protruding part        if (percent = = 1) {            p.setcolor (marccolor);        }        Canvas.drawarc (SECONDRECTF,144+FILL+EMPTY,10,FALSE,P);

So the rough arc is finished to look at the effect, drew two arcs (actually 5), it was formed.

3. The middle of the small round outer ring. He doesn't have to say it's the center of the whole view.

        P.setcolor (Marccolor);        Draw a small round outer ring        p.setstrokewidth (3);        Canvas.drawcircle (MWIDTH/2, MHEIGHT/2, p);

4. Draw the inner circle, the center of the same. Change the radius and brush roughness

        Draw Small Circle inner ring        P.setcolor (mmincirclecolor);        P.setstrokewidth (8);        Mmincircleradius =;        Canvas.drawcircle (MWIDTH/2, MHEIGHT/2, Mmincircleradius, p);

5. The scale scale may be more troublesome to handle, with the trigonometric calculation coordinates AH loop draw out.

。

Here's an easy way to do this: rotate the canvas.

First introduce a concept, what is called rotating the canvas, is to rotate your canvas. After testing, rotation, the entire axis will rotate accordingly. An example of a picture is shown below.

That's probably the point. The coordinate system rotates after the canvas is rotated, but the original image is still there, so you can say that the point x, y rotates in this position before. Then the rotation is another position. But their coordinates are the same. So the scale can also be used to test such a method of painting. We just have to draw the top of the scale and rotate it.

Draws the first segment of the scale. Then a total of 250 radians calculates the degree of each tick by 250 divided by the number of ticks Mtikecount, which is the degree of each rotation.  The next step is to rotate the canvas so that the right half of the scale can be plotted according to the original coordinates. Note: To make the subsequent drawing normal, be sure to turn the canvas back to its original position

        Draw the scale.        P.setcolor (marccolor);        Draw the first top of the scale        mtikewidth =;        P.setstrokewidth (3);        Canvas.drawline (MWIDTH/2, 0, MWIDTH/2, Mtikewidth, p);        Angle of rotation        float rangle = 250f/mtikecount;        Draw the right tick for        (int i = 0; i < MTIKECOUNT/2; i++) {            canvas.rotate (rangle, MWIDTH/2, MHEIGHT/2) by rotating the canvas; 
   canvas.drawline (MWIDTH/2, 0, MWIDTH/2, Mtikewidth, p);        }        Now need to turn the canvas back        canvas.rotate (-rangle * mtikecount/2, MWIDTH/2, MHEIGHT/2);

The left half is the same, the degree that needs to be changed is negative.

        Draw the left tick for        (int i = 0; i < MTIKECOUNT/2; i++) {            canvas.rotate (-rangle, MWIDTH/2, MHEIGHT/2) by rotating the canvas; 
   canvas.drawline (MWIDTH/2, 0, MWIDTH/2, Mtikewidth, p);        }        Now need to turn the canvas back        canvas.rotate (Rangle * mtikecount/2, MWIDTH/2, MHEIGHT/2);

6. The pointer pointer is drawn similar to the scale, calculated as a percentage of the degree and then rotating the canvas based on whether it is greater than 50%.

The end point of the pointer is half of the thick arc rectangle of the total view height plus the small circle. The front coordinates explain that. This is the same. Take your pen and count it.

Notice where the canvas rotates I calculate a formula of * PERCENT-250/2.

Assume that less than 50% is positive if the negative hypothesis is greater than 50%. Then rotate.

Don't be sure to turn the canvas back in the end.

        Draw Pointer        P.setcolor (mmincirclecolor);        P.setstrokewidth (4);        Draw scale        Canvas.rotate ((PERCENT-250/2), MWIDTH/2, MHEIGHT/2) in percent;        Canvas.drawline (MWIDTH/2, (MHEIGHT/2-SECONDRECTHEIGHT/2) + MSCENDARCWIDTH/2 + 2, MWIDTH/2, MHEIGHT/2-MMinC Ircleradius, p);        Rotate the canvas back to        canvas.rotate (-(PERCENT-250/2), MWIDTH/2, MHEIGHT/2);

The next step is to draw rectangles and text. There's nothing to say, coordinates are x around the Mwidth/2 y-axis. Fine-tune a distance from the center

    Draw Rectangle        P.setstyle (Paint.Style.FILL);        P.setcolor (Marccolor);        Mrectwidth =;        Mrectheight = +;        The bottom coordinate of the text rectangle is        float rectbottomy = mheight/2 + secondrectheight/3+mrectheight;        Canvas.drawrect (MWIDTH/2-MRECTWIDTH/2,MHEIGHT/2 + secondrectheight/3,mwidth/2+mrectwidth/2,rectbottomy,p);        P.settextsize (mtextsize);        Mtextcolor = Color.White;        P.setcolor (Mtextcolor);        float txtlength = P.measuretext (mText);        Canvas.drawtext (MText, (mwidth-txtlength)/2,rectbottomy + 40,p);        Super.ondraw (canvas);

This completes the drawing of the entire view.

The following is to be done for the convenience of users. Provides some methods for setting properties.

/**     * Set percentage     * @param percent     *    /public void setpercent (int percent) {        mpercent = percent;        Invalidate ();    }    /**     * Set Text     * @param text     *    /public void SetText (String text) {        mText = text;        Invalidate ();    }    /**     * Set arc color     * @param color     *    /public void setarccolor (int color) {        Marccolor = color;        Invalidate ();    }    /**     * Set pointer color     * @param color     *    /public void setpointercolor (int color) {        Mmincirclecolor = color;        Invalidate ();    }    /**     * Set Text size     * @param size     *    /public void settextsize (int size) {        mtextsize = size;        Invalidate ();    }    /**     * Set the width of the thick arc     * @param width *     /public    void setarcwidth (int width) {        mscendarcwidth = width;< C45/>invalidate ();    }

Done!

！

。 A seemingly complex view has been drawn through our step-by-step steps.

In fact, this is the way technology is formed. Just one step at a down-to-earth practice. I believe someday I can be a great God.

The project address: Panelview seeking attention to seek comment star!!.!!!

Hand take you to draw a fashion dashboard Android own definition view