Hand-painted with you to draw a fashion dashboard Android custom View

Hand-painted with you to draw a fashion dashboard Android custom View

After obtaining the artist, our programmers have to draw exactly the same picture. In order not to be sprayed by the boss, you can only practice more.

I heard that you think the previous articles are so easy. Today, it is relatively complicated.

Today's implementation diagram is shown below (the left side is the ui diagram and the right side is the implementation diagram ):

I feel that the overall effect is not bad. At least I have drawn the same picture. Previous dynamic graph:

In fact, this effect is not very difficult to achieve, that is, it may be difficult to calculate coordinates, radians, and so on. Here we will share this manuscript, so please ignore the ugly words, in fact, you still need to draw multiple images on paper for custom views. So I hope that you can draw images in this way.

Okay. Let's get started.

First, the custom property constructor, you must have been very skilled in directly pasting code for measuring something, and the comments are clearly written.

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 private int mScendArcWidth; // The radius of the smallest circle is private int mMinCircleRadius; // The width of the text rectangle is private int mRectWidth; // The height of the text rectangle is private int mRectHeight; // text content private String mText = ""; // text size private int mTextSize; // set the text color private int mTextColor; private int mArcColor; // small circle and pointer color private int mMinCircleColor; // Number of scales 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 =. getColor (R. styleable. panelView_arcColor, Color. parseColor ("# 5FB1ED"); mMinCircleColor =. getColor (R. styleable. panelView_pointerColor, Color. parseColor ("# C9DEEE"); mTikeCount =. getInt (R. styleable. panelView_tikeCount, 12); mTextSize =. getDimensionPixelSize (PxUtils. spToPx (R. styleable. panelView_android_textSize, mContext), 24); mText =. getString (R. styleable. panelView_android_text); mScendArcWidth = 50 ;}@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {int widthSize = MeasureSpec. 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 );}

Custom Attributes attr. xml

<!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--><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">    </attr></attr></attr></attr></attr></attr></declare-styleable></resources>

And draw. Just like painting, a complicated view is a stroke. So we break down this view.

It is roughly divided into the following:1. Exclusive arc 2. Rough arc 3. Small circle in the middle 4. Smallest circle 5. scale 6. pointer 7. Rectangle 8. Text

I believe that it is difficult for you to draw images separately. That is the view. Next we start our ondraw ()

According to this decomposition:

1. note that to draw the outermost arc, if you want the circle to be in the view, remember to subtract half of the width of the paint brush because the radius is calculated from the center of the circle to the width of the paint brush, so the arc-drawn rectangle here is new RectF (strokeWidth, strokeWidth, mWidth-strokeWidth, mHeight-strokeWidth)

Paint p = new Paint (); int strokeWidth = 3; p. setStrokeWidth (strokeWidth); p. setAntiAlias (true); p. setStyle (Paint. style. STROKE); p. setColor (mArcColor); // canvas with the outermost line. drawArc (new RectF (strokeWidth, strokeWidth, mWidth-strokeWidth, mHeight-strokeWidth), 145,250, false, p );

This is the effect.

2. Draw the rough arc in it. The troublesome part here is to divide it into four sections, as shown in the figure:

Because the length of the large circle is different from that of the thick arc, the percentage is used here to calculate the pointer deviation, so here we will fix the two parts 1 and 2 to draw, then there is the 3 filled part, and the percentage is used to calculate the number of degrees to be drawn, and the last is the 4 blank part.

First, draw the rectangle of the rough arc, which is fixed to be 50 less than the large Arc Radius (here we can actually improve it. You can change it to dynamic to make it more flexible), and then calculate the percentage.

RectF secondRectF = new RectF(strokeWidth + 50, strokeWidth + 50, mWidth - strokeWidth - 50, mHeight - strokeWidth - 50);        float secondRectWidth = mWidth - strokeWidth - 50 - (strokeWidth + 50);        float secondRectHeight = mHeight - strokeWidth - 50 - (strokeWidth + 50);        float percent = mPercent / 100f;

Next, draw an arc. First, calculate the degree of the filled part of fill. Because it is highlighted, if the percentage is 0, the left end of the highlight is white. If it is not zero, it is consistent with the filled color.

// The degree of the filled arc-5 is the deviation float fill = 250 * percent of the size arc; // float empty = 250-fill of the empty arc; // Log. e ("wing", fill + ""); if (percent = 0) {p. setColor (Color. WHITE);} // draw the left canvas of the highlighted part of the rough arc. drawArc (secondRectF, 135,11, false, p );

Then draw 2 arc, that is, the arc filled with fill,

canvas.drawArc(secondRectF, 145, fill, false, p);

Next is the 3-arc, that is, the unfilled arc of empty, which is white.

P. setColor (Color. WHITE); // The unfilled canvas. drawArc (secondRectF, 145 + fill, empty, false, p) of the image );

Finally, draw the 4-arc highlighted on the right. If the percentage is 100, it is consistent with the filled color; otherwise, it is white.

// Draw a rough arc to highlight the right side of the part if (percent = 1) {p. setColor (mArcColor);} canvas. drawArc (secondRectF, 144 + fill + empty, 10, false, p );

In this way, the rough arc will be drawn to see the effect, and two arcs (actually five) will be drawn.

3. The circle in the middle is the center of the entire view.

P. setColor (mArcColor); // draw the small circle outer ring p. setStrokeWidth (3); canvas. drawCircle (mWidth/2, mHeight/2, 30, p );

4. Draw an incircle with the same center and change the radius and width of the paint brush.

// Draw the inner circle p. setColor (mMinCircleColor); p. setStrokeWidth (8); mMinCircleRadius = 15; canvas. drawCircle (mWidth/2, mHeight/2, mMinCircleRadius, p );

5. It may be difficult to process the scale. Use the trigonometric function to calculate the coordinates and draw them cyclically .. Here is a simple method: rotating the canvas.

First, we will introduce the concept of rotating a canvas, that is, rotating your canvas .. After testing, the entire axis is rotated accordingly, as shown in an example.

This is probably the meaning. After the canvas is rotated, the coordinate system is also rotated, but the original image is still there. So, for example, you are at this position before x and y rotation, the rotation is another position, but their coordinates are the same. Therefore, you can use this method to draw a scale. We just need to draw the top scale and then rotate it.

Draw the first scale, and then calculate the degree of each scale in a total of 250 radians by dividing 250 by the number of mTikeCount, that is, the degree of each rotation. Next, gradually rotate the canvas and draw the right half of the scale according to the original coordinates. Note: In order to make the subsequent painting normal, you must convert the canvas back to its original position.

// Draw the scale! P. setColor (mArcColor); // draw the first top scale of mTikeWidth = 20; p. setStrokeWidth (3); canvas. drawLine (mWidth/2, 0, mWidth/2, mTikeWidth, p); // Rotation Angle float rAngle = 250f/mTikeCount; // draw the scale on the right by rotating the canvas (int I = 0; I <mTikeCount/2; I ++) {canvas. rotate (rAngle, mWidth/2, mHeight/2); canvas. drawLine (mWidth/2, 0, mWidth/2, mTikeWidth, p);} // you need to rotate the canvas back to the canvas. rotate (-rAngle * mTikeCount/2, mWidth/2, mHeight/2 );

The left half is the same, and the change degree is negative.

// Draw the scale on the left by rotating the canvas (int I = 0; I <mTikeCount/2; I ++) {canvas. rotate (-rAngle, mWidth/2, mHeight/2); canvas. drawLine (mWidth/2, 0, mWidth/2, mTikeWidth, p);} // you need to rotate the canvas back to the canvas. rotate (rAngle * mTikeCount/2, mWidth/2, mHeight/2 );

6. The drawing of pointer is similar to the scale. Calculate the percentage degree and then rotate the canvas based on whether the percentage is greater than 50%.

The starting and ending points of the pointer are the half of the total view height, the half of the rough arc rectangle plus a small circle. The preceding coordinates explain the same. You can pick up the pen and calculate it by yourself.

Note that the canvas rotation is calculated to produce a formula 250 * percent-250/2.

If it is less than 50%, It is negative. If it is greater than 50%, it is positive and then rotated.

Never turn the canvas back.

// Draw the pointer p. setColor (mMinCircleColor); p. setStrokeWidth (4); // draw the scale canvas by percentage. rotate (250 * percent-250/2), mWidth/2, mHeight/2); canvas. drawLine (mWidth/2, (mHeight/2-secondRectHeight/2) + mScendArcWidth/2 + 2, mWidth/2, mHeight/2-mMinCircleRadius, p ); // rotate the canvas back to canvas. rotate (-(250 * percent-250/2), mWidth/2, mHeight/2 );

Next, draw a rectangle and text. There is nothing to say. The coordinates are the mWidth/2 y axes around X. You can adjust the distance according to the center.

// Draw the rectangle p. setStyle (Paint. style. FILL); p. setColor (mArcColor); mRectWidth = 60; mRectHeight = 25; // 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 );

In this way, the entire view is drawn.

The following describes how to set attributes for the convenience of users.

/*** 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 the 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 the text size * @ param size */public void setTextSize (int size) {mTextSize = size; invalidate ();} /*** set the width of the rough arc * @ param width */public void setArcWidth (int width) {mScendArcWidth = width; invalidate ();}

Success !!! A seemingly complex view is drawn step by step.

In fact, the same is true for the development of technology. As long as you practice it step by step, I believe that one day I will become a great god and find my favorite job.