Android Custom Controls---Cancel view

First, prefaceHaven't updated the blog for a long time, has been busy recently, looking for internships, finishing graduation materials, looking for houses and so on. Now most of the basic work is done, these days in the company wrote some custom controls, intended to send to share with you.
first look at the final

This custom view scenario is primarily used to override the Cancel button in the upper-left corner of the dialog box or in the upper-right corner. According to my previous practice, all the designers sent me a picture, I create a imageview, and then set the picture in the end. If one day the product manager looks uncomfortable, want to round, or rectangular, diagonal want xxx color. It's got to wait.DesignerHair Map (I am not very likely PS AH). So in order to avoid trouble, plan to write one yourself.
Second, custom control personal ideascreates a Customcancelview class that inherits the view directly. Rewrite the onmeasure and OnDraw methods inside.
1. Override the Onmeasure method to force the view to be set to the same width and height. Write only the Layout_width property value in the XML file, and the value of the Layout_height property can be written casually.

@Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {    setmeasureddimension ( Widthmeasurespec, Widthmeasurespec);}

2, the next more troublesome is to rewrite the OnDraw method. It is not difficult to draw a circle, rectangle, Circle rectangle in the OnDraw method. the question to think about is how to draw a diagonal line, and the size of the diagonal will change as the size of the view changes.
I take the example of drawing a rounded left diagonal. (1) First we assume that the black border of the rectangle is the view boundary of our control, set its width and height to 100 (this black border we are not visible.) )

(2) draw a circle again, this blue circle is our visible view.

(3) gets the radius of the circle with a radius of CIRCLERADIUS=WIDTH/2. That is, RADIUS 50 (the three line in the figure is the radius of the circle)

(4) draw a red vertical line, because the triangle formed by the three-way edge is obviously a isosceles triangle well (eh, I am not very good at maths.) ), set 1, 2 sides is the value of the x,3 side, we know is 50 (this is the radius value AH). The value of x is approximately equal to 35 according to the Pythagorean theorem. That is, the length of the edge is 35. the code in the program is int rectanglehalf= (int) math.sqrt ((Circleradius*circleradius)/2);

(5) then calculate the coordinates of the green point in the graph, set the coordinates (Leftdiagonalstartx,Leftdiagonalstarty). thex= radiusvalue50-2-side value (=15)y= radius value 50-1 sidesthe value(35) = 15. so this green dot coordinates for (15,15)Program CodeLeftdiagonalstartx = Leftdiagonalstarty = Circleradius-rectanglehalf

(6) Set the green dot coordinate in the lower right corner (Leftdiagonalendx, Leftdiagonalendy). Thex= The value of the 50+5 edge of the radius value (a) =85y= The value of the 50+6 edge of the RADIUS value (35) = 85. so this green dot coordinates for (85,85)Program Codeleftdiagonalendx = Leftdiagonalendy = Circleradius + rectanglehalf

According to the mathematical definition: two points to determine a straight line. finally call Canvas.drawline () to draw this left diagonal line out
on the right diagonal of the drawing is not said, the basic ideas and the above is similar.
the core code for the OnDraw method is as follows

@Override protected void OnDraw (canvas canvas) {//calculates the radius of the circle Circleradius = GetWidth ()/2;    Draw a square/circle/Circle Rectangle (Note that the purpose of drawing this graphic is to be used as a background).    Drawview (canvas, painttemp); Get half int rectanglehalf = (int) Math for the length of the rounded inner rectangle.    SQRT ((Circleradius * Circleradius)/2);    Left diagonal coordinates int leftdiagonalstartx, leftdiagonalstarty, Leftdiagonalendx, Leftdiagonalendy; Calculate the coordinates of the left diagonal (consider the effect of paintwidth and diagonallength on the diagonal, think that these two parameters affect code reading can be temporarily removed) Leftdiagonalstartx = Leftdiagonalstarty =    Circleradius-rectanglehalf + paintwidth + diagonallength;    Leftdiagonalendx = Leftdiagonalendy = Circleradius + rectanglehalf-paintwidth-diagonallength; Draw left Diagonal drawdiagonal (canvas, Leftdiagonalstartx, Leftdiagonalstarty, Leftdiagonalendx, Leftdiagonalendy, diagonalLe    Ftcolor, Paintcapround);    Right diagonal coordinates int rightdiagonalstartx, rightdiagonalstarty, Rightdiagonalendx, Rightdigonalendy; Calculate the coordinates of the right diagonal (consider the effect of paintwidth and diagonallength on the diagonal, and think that these two parameters affect code reading can be temporarily removed) Rightdiagonalstartx = CirclerAdius + rectanglehalf-paintwidth-diagonallength;    Rightdiagonalstarty = circleradius-rectanglehalf + paintwidth + diagonallength;    Rightdiagonalendx = circleradius-rectanglehalf + paintwidth + diagonallength;    Rightdigonalendy = Circleradius + rectanglehalf-paintwidth-diagonallength; Draw Right Diagonal drawdiagonal (canvas, Rightdiagonalstartx, Rightdiagonalstarty, Rightdiagonalendx, Rightdigonalendy, Diagona    Lrightcolor, Paintcapround); Draw Square/round/round rectangle Drawview (canvas, mpaint);} /*** Drawing View * * @param canvas * @param paint */public void Drawview (canvas canvas, paint paint) {if (Cancelviewtype = = SQ    Uare) {canvas.drawrect (Paintwidth, Paintwidth, GetWidth ()-Paintwidth, GetHeight ()-paintwidth, paint); } else if (Cancelviewtype = = CIRCLE) {canvas.drawcircle (Circleradius, Circleradius, Circleradius-paintwidth, p    aint); } else if (Cancelviewtype = = Rounded_rectangle) {canvas.drawroundrect (new RECTF (Paintwidth, Paintwidth, GetWidth () -Paintwidth, GetHeight ()-paintwidth), Rounddegree, Rounddegree, paint); } else {log.e ("------------->", "View type Error!    " ); }}/*** Draw Diagonal * * @param canvas * @param diagonalstartx * @param diagonalstarty * @param diagonalendx * @param diagonalendy *  /public void drawdiagonal (canvas canvas, int diagonalstartx, int diagonalstarty, int diagonalendx, int diagonalendy, int    Diagonalcolor, Boolean paintcapround) {Paint diagonalpaint = new Paint ();    Diagonalpaint.setantialias (TRUE);    Diagonalpaint.setcolor (Diagonalcolor);    Diagonalpaint.setstrokewidth (Diagonalpaintwidth); Diagonalpaint.setstyle (Paint.style.    STROKE); if (paintcapround) {//sets the brush's semicircle style diagonalpaint.setstrokecap (paint.cap.    ROUND); } else {//Set brush default value Diagonalpaint.setstrokecap (Paint.cap.    SQUARE); }//Draw diagonal Canvas.drawline (Diagonalstartx, Diagonalstarty, Diagonalendx, Diagonalendy, diagonalpaint);}

(7) XML file LayoutNote In the XML file be sure to add this sentence xmlns:app= "Http://schemas.android.com/apk/res-auto" (where Xmlns:=xxx name can be customized)

<? XML version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android "Xmlns:app=" Http://schemas.android.com/apk/res-auto "xmlns:tools=" Http://schemas.android.com/tools "android:l Ayout_width= "Match_parent" android:layout_height= "match_parent" android:background= "#d4d4d4" Android:orientati         on= "vertical" > <textview android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android:p adding= "10DP" android:text= "square, round, round rectangle" android:textcolor= "#000000" Android:text Size= "16DP"/> <linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_cont Ent "android:orientation=" horizontal "> <per.edward.ui.customcancelview android:id=" @+id/c Ancel_one "android:layout_width=" 80DP "android:layout_height=" 80DP "Android:layout_mar gin= "10DP"/> &Lt;per.edward.ui.customcancelview android:id= "@+id/cancel_two" android:layout_width= "80DP" android:layout_height= "80DP" android:layout_margin= "10DP" app:cc_type= "Circle"/> &            Lt;per.edward.ui.customcancelview android:id= "@+id/cancel_three" android:layout_width= "80DP"            android:layout_height= "80DP" android:layout_margin= "10DP" app:cc_round_degree= "35" App:cc_type= "Rounded_rectangle"/> </LinearLayout> <textview android:layout_width= "Match_par Ent "android:layout_height=" wrap_content "Android:p adding=" 10DP "android:text=" square (changed the color of the border), round (change        The background color), the circle rectangle (changed the color of the diagonal) "android:textcolor=" #000000 "android:textsize=" 16DP "/> <linearlayout Android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:orientation= "Horizonta L "> <per.edWard.ui.CustomCancelView android:layout_width= "80DP" android:layout_height= "80DP" Andro        Id:layout_margin= "10DP" app:cc_stroke_width= "3DP" app:cc_stroke_width_color= "#31b2f7"/>            <per.edward.ui.customcancelview android:layout_width= "80DP" android:layout_height= "80DP"        Android:layout_margin= "10DP" app:cc_background= "#7ccf66" app:cc_type= "Circle"/>            <per.edward.ui.customcancelview android:layout_width= "80DP" android:layout_height= "80DP" Android:layout_margin= "10DP" app:cc_diagonal_left_color= "#3af700" App:cc_diagonal_right_col Or= "#fff200" app:cc_round_degree= "app:cc_type=" Rounded_rectangle "/> &LT;/LINEARLAYOUT&G    T <textview android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android:p add        Ing= "10DP"android:text= "squares (borders and backgrounds are set to transparent), rounded (diagonally widened, and rounded at the end of the diagonal), rounded rectangles (with rectangles at the end of the diagonal)" android:textcolor= "#000000" android:t Extsize= "16DP"/> <linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_c Ontent "android:orientation=" horizontal "> <per.edward.ui.customcancelview android:layout_ Width= "80DP" android:layout_height= "80DP" android:layout_margin= "10DP" App:cc_backgrou Nd= "#00000000" app:cc_diagonal_length = "10DP" app:cc_stroke_width_color= "#00000000"/> &            Lt;per.edward.ui.customcancelview android:layout_width= "80DP" android:layout_height= "80DP"            Android:layout_margin= "10DP" app:cc_background= "#e079ead7" app:cc_diagonal_length = "10DP" App:cc_diagonal_paint_width= "10DP" app:cc_type= "Circle"/> <per.edward.ui.customcancelvi EW android:lAyout_width= "80DP" android:layout_height= "80DP" android:layout_margin= "10DP" App:cc_di            Agonal_left_color= "#596dd1" app:cc_diagonal_length = "10DP" app:cc_diagonal_paint_width= "10DP" App:cc_diagonal_right_color= "#bd79c4" app:cc_paint_cap_round= "false" app:cc_round_degree= " "App:cc_type=" Rounded_rectangle "/> </LinearLayout></LinearLayout>

third, the endafter sharing, I moved the bricks. Demo Source Please poke here: Android Custom Control---cancel View

Android Custom Controls---Cancel view