Android Custom View realizes the _android of Sesame fractal curve

1. Introduction

In fact, this effect was written a few days ago, but has not updated the blog, was thinking of the sesame Radar also do a good job to blog, and then today saw the micro-letter of the public number has a friend of the Sesame division of the radar map, so forget, is a complementary bar. Usually the article also write less, so it may be a bit messy, there is any need to improve the place welcome to give suggestions, appreciate.

Effect Chart:

2. Steps:

Initialize View's properties
Initializing brushes
Draw two dashed lines representing the highest and lowest points
Draw text
Draw a property that represents a month
Draw a Sesame split polyline
Draw dots that represent sesame points
To draw the suspended text and background of a selected fraction
Handling Click events

3. Code:

Initialize View property

/**
* Initialization Layout configuration
* *
@param context
* @param attrs
/private void initconfig AttributeSet attrs)
{
TypedArray a = context.obtainstyledattributes (attrs,r.styleable.scoretrend);
Maxscore=a.getint (r.styleable.scoretrend_max_score,700);
Minscore=a.getint (r.styleable.scoretrend_min_score,650);
Brokenlinecolor=a.getcolor (R.styleable.scoretrend_broken_line_color,brokenlinecolor);
A.recycle ();
}

Initialize the brush:

 private void init () {Brokenpath = new Path (); brokenpaint = new Paint (); brokenpaint.se
Tantialias (TRUE);
Brokenpaint.setstyle (Paint.Style.STROKE);
Brokenpaint.setstrokewidth (DIPTOPX (Brokenlinewith));
Brokenpaint.setstrokecap (Paint.Cap.ROUND);
Straightpaint = new Paint ();
Straightpaint.setantialias (TRUE);
Straightpaint.setstyle (Paint.Style.STROKE);
Straightpaint.setstrokewidth (Brokenlinewith);
Straightpaint.setcolor ((Straightlinecolor));
Straightpaint.setstrokecap (Paint.Cap.ROUND);
Dottedpaint = new Paint ();
Dottedpaint.setantialias (TRUE);
Dottedpaint.setstyle (Paint.Style.STROKE);
Dottedpaint.setstrokewidth (Brokenlinewith);
Dottedpaint.setcolor ((Straightlinecolor));
Dottedpaint.setstrokecap (Paint.Cap.ROUND);
Textpaint = new Paint ();
Textpaint.setantialias (TRUE);
Textpaint.settextalign (Paint.Align.CENTER);
Textpaint.setstyle (Paint.Style.FILL);
Textpaint.setcolor ((Textnormalcolor));
Textpaint.settextsize (DIPTOPX (15)); }

Draw represents the highest and lowest-dotted lines

Draw dotted line
private void Drawdottedline (Canvas Canvas, float startx, float starty, float stopx, float stopy)
{
dot Tedpaint.setpatheffect (New Dashpatheffect (New float[]{20, 4));
Dottedpaint.setstrokewidth (1);
Instantiate path path
mpath = new Path ();
Mpath.reset ();
Defines the starting point of the path
Mpath.moveto (StartX, starty);
Mpath.lineto (STOPX, stopy);
Canvas.drawpath (MPath, dottedpaint);
}

Draw text

Draw text private void DrawText (Canvas Canvas) {textpaint.settextsize (DIPTOPX); Textpaint.setcolor (Textnormalcolor)
; Canvas.drawtext (Maxscore), Viewwith * 0.1F-DIPTOPX (string.valueof), Viewheight * 0.15f + textsize * 0.25f, TextPaint)
; 
Canvas.drawtext (Minscore), Viewwith * 0.1F-DIPTOPX (string.valueof), Viewheight * 0.4f + textsize * 0.25f, TextPaint);
Textpaint.setcolor (0xff7c7c7c); float Newwith = viewwith-(Viewwith * 0.15f) * 2;//separator line distance to the leftmost and rightmost is 0.15 times times viewwith float coordinatex;//divider x coordinate textpaint.se
Ttextsize (DIPTOPX (12));
Textpaint.setstyle (Paint.Style.FILL);
Textpaint.setcolor (Textnormalcolor);
TEXTSIZE = (int) textpaint.gettextsize (); for (int i = 0; i < monthtext.length i++) {Coordinatex = Newwith * ((float) (i)/(monthCount-1)) + (Viewwith * 0.15
f);
if (i = = selectMonth-1) {textpaint.setstyle (Paint.Style.STROKE); Textpaint.setcolor (Brokenlinecolor);
RECTF r2 = new RECTF ();
R2.left = COORDINATEX-TEXTSIZE-DIPTOPX (4); R2.top = viewheight * 0.7f + diptopx (4) + TEXTSIZE/2;
R2.right = Coordinatex + textsize + diptopx (4);
R2.bottom = viewheight * 0.7f + DIPTOPX (4) + Textsize + diptopx (8);
Canvas.drawroundrect (R2, ten, textpaint);
}//Draw month Canvas.drawtext (Monthtext[i], Coordinatex, viewheight * 0.7f + DIPTOPX (4) + Textsize + diptopx (5), textpaint);
Textpaint.setcolor (Textnormalcolor); }
}

Draw a property that represents a month

Draw the line (including scale) of the month
private void Drawmonthline (Canvas Canvas)
{
straightpaint.setstrokewidth (DIPTOPX (1));
Canvas.drawline (0, Viewheight * 0.7f, Viewwith, Viewheight * 0.7f, straightpaint);
float Newwith = viewwith-(Viewwith * 0.15f) * 2;//separator line is 0.15 times times the distance from the far left and the far right. Viewwith
float coordinatex;//divider x coordinate
for (int i = 0; i < Monthcount i++)
{
Coordinatex = Newwith * (float) (i)/(monthCount-1)) + (Viewwith * 0. 15f);
Canvas.drawline (Coordinatex, Viewheight * 0.7f, Coordinatex, Viewheight * 0.7f + diptopx (4), straightpaint);
}

Draw a Sesame split polyline

Draw a polyline
private void Drawbrokenline (Canvas Canvas)
{
brokenpath.reset ();
Brokenpaint.setcolor (Brokenlinecolor);
Brokenpaint.setstyle (Paint.Style.STROKE);
if (Score.length = = 0)
{return
;
}
LOG.V ("Scoretrend", "Drawbrokenline:" + scorepoints.get (0));
Brokenpath.moveto (Scorepoints.get (0). x, Scorepoints.get (0). y);
for (int i = 0; i < scorepoints.size (); i++)
{
Brokenpath.lineto (Scorepoints.get (i). x, Scorepoints.get (i). y);
}
Canvas.drawpath (Brokenpath, brokenpaint);
}

Draw dots that represent sesame points

Draws a polyline through the point private void Drawpoint (Canvas Canvas) {if (scorepoints = = null) {return;} brokenpaint.setstrokewidth (Diptopx
(1)); for (int i = 0; i < scorepoints.size (); i++) {Brokenpaint.setcolor (Brokenlinecolor); Brokenpaint.setstyle (Paint.style .
STROKE);
Canvas.drawcircle (Scorepoints.get (i). x, Scorepoints.get (i). Y, Diptopx (3), brokenpaint);
Brokenpaint.setcolor (Color.White);
Brokenpaint.setstyle (Paint.Style.FILL); if (i = = selectMonth-1) {brokenpaint.setcolor (0XFFD0F3F2); Canvas.drawcircle (Scorepoints.get (i). x, Scorepoints.get (i)
). Y, Diptopx (8f), brokenpaint);
Brokenpaint.setcolor (0XFF81DDDB);
Canvas.drawcircle (Scorepoints.get (i). x, Scorepoints.get (i). Y, Diptopx (5f), brokenpaint);
Draw a floating text background box Drawfloattextbackground (canvas, Scorepoints.get (i). x, Scorepoints.get (i). Y-DIPTOPX (8f));
Textpaint.setcolor (0xFFFFFFFF); Draw Floating Text Canvas.drawtext (string.valueof (score[i)), Scorepoints.get (i). x, Scorepoints.get (i) y-diptopx (5f)-
TEXTSIZE, Textpaint);
} brokenpaint.setcolor (0xFFFFFFFF); CanVas.drawcircle (Scorepoints.get (i). x, Scorepoints.get (i). Y, Diptopx (1.5f), brokenpaint);
Brokenpaint.setstyle (Paint.Style.STROKE);
Brokenpaint.setcolor (Brokenlinecolor);
Canvas.drawcircle (Scorepoints.get (i). x, Scorepoints.get (i). Y, Diptopx (2.5f), brokenpaint); }
}

To draw the suspended text and background of a selected fraction

Draws a background
private void Drawfloattextbackground (Canvas Canvas, int x, int y)
{
brokenpath.reset () to display floating text;
Brokenpaint.setcolor (Brokenlinecolor);
Brokenpaint.setstyle (Paint.Style.FILL);
P1 point is
= new Point (x, y);
Brokenpath.moveto (Point.x, point.y);
P2
point.x = point.x + diptopx (5);
Point.y = POINT.Y-DIPTOPX (5);
Brokenpath.lineto (Point.x, point.y);
P3
point.x = point.x + diptopx ();
Brokenpath.lineto (Point.x, point.y);
P4
point.y = point.y-diptopx ();
Brokenpath.lineto (Point.x, point.y);
P5
point.x = Point.x-diptopx (a);
Brokenpath.lineto (Point.x, point.y);
P6
point.y = Point.y + diptopx ();
Brokenpath.lineto (Point.x, point.y);
P7
point.x = point.x + diptopx ();
Brokenpath.lineto (Point.x, point.y);
The last point is connected to the first point
brokenpath.lineto (x, y);
Canvas.drawpath (Brokenpath, brokenpaint);
}

Handling Click events

@Override public boolean ontouchevent (Motionevent event) {this.getparent (). Requestdisallowintercepttouchevent (True)
//Once the underlying view receives the touch action and calls this method then the parent layer view will no longer call onintercepttouchevent, and cannot intercept subsequent action switch (event.getaction ()) {
Case MotionEvent.ACTION_DOWN:break;
Case MotionEvent.ACTION_MOVE:break;
Case MotionEvent.ACTION_UP:onActionUpEvent (event);
This.getparent (). Requestdisallowintercepttouchevent (false);
Break
Case MotionEvent.ACTION_CANCEL:this.getParent (). Requestdisallowintercepttouchevent (false);
Break
return true; } private void Onactionupevent (Motionevent event) {Boolean Isvalidtouch = Validatetouch (Event.getx (), event.gety ()); if (
Isvalidtouch) {invalidate ();}} is a valid touch range private Boolean Validatetouch (float x, float y) {//Curve touch area for (int i = 0; i < scorepoints.size (); i++) {/ /DIPTOPX (8) times 2 to properly increase the touch area if (X > (Scorepoints.get (i). X-DIPTOPX (8) * 2) && x < (Scorepoints.get (i) x + DiPT OPX (8) * 2)) {if (Y > (Scorepoints.get (i) y-diptopx (8) * 2)&& y < (scorepoints.get (i). Y + diptopx (8) * 2)) {Selectmonth = i + 1; return true;}} //month Touch area//Calculate center point of each month x coordinate float monthtouchy = viewheight * 0.7F-DIPTOPX (3);//Minus DIPTOPX (3) Increase touch area float Newwith = Viewwit
H-(Viewwith * 0.15f) * 2;//divider line distance to the leftmost and rightmost is 0.15 times times viewwith float validtouchx[] = new Float[monthtext.length]; for (int i = 0; i < monthtext.length i++) {Validtouchx[i] = Newwith * ((float) (i)/(monthCount-1)) + (Viewwith * 0
.15f); } if (Y > Monthtouchy) {for (int i = 0; i < validtouchx.length i++) {log.v ("Scoretrend", "Validatetouch:validtouch
X: "+ validtouchx[i]);  if (x < validtouchx[i] + DIPTOPX (8) && x > Validtouchx[i]-diptopx (8)) {LOG.V ("Scoretrend", "Validatetouch:
"+ (i + 1));
Selectmonth = i + 1;
return true;
}} return false; }

Gets the height of the control

@Override
protected void onsizechanged (int w, int h, int oldw, int oldh)
{
super.onsizechanged (W, H, OLDW, old h);
Viewwith = W;
Viewheight = h;
InitData ();
}

4. Summary

There are some relatively imperfect areas to deal with, such as the number of attributes that can be adjusted through XML too few. Usually write things or too little, I hope that after summing up the completion of writing skills. The required attributes need to be perfected later.

GitHub Address: Https://github.com/FelixLee0527/ZhiMaScoreCurve

The above is a small set to introduce the Android custom view to achieve sesame plot effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!