When customizing the view, use some of the temperature of the paint canvas to customize the loading control (animation five, "hexagon" rotation jumps)

Reprint please indicate the source: Wang 亟亟 's way of Daniel

A series of recent articles are some of the custom control of the drawing, animation and other effects, this piece directly to do a custom view, the address of the previous article: http://blog.csdn.net/ddwhan0123/article/details/50477030 (not see the small partners can see)

As a rule, stick to the demo.

Package Structure:

• Design analysis

Yellow for the whole of the entire control, the green part of the drawing out of the hexagon, blue for a standard TextView

Question, why not put the controls together?

At the outset, we have considered the direct paint of the entire control of the hexagon and the text are drawn out, think or think that the text part or need more extensive ductility, and not just fixed to what form, he should have his own characteristics, so they still use the control, the whole of the control "into" Two parts of a layout.

• Code implementation

First of all, we want to do the first control hexagon "Cuteloadingview", how to draw?

 @Overrideprotected void OnDraw (CanvasCanvas) {Super.ondraw (Canvas);//Center dotXcenter = Xdraw/2; Ycenter = Ydraw/2; Mlength = Xdraw/2; Double Radian30 = -* Math.PI/ the;floatA = (float) (Mlength * Math.Sin(RADIAN30));floatB = (float) (Mlength * Math.Cos(RADIAN30));floatc = (Ydraw-(2* b))/2; Initpaint ();//path PATH = new Path ();//Path.moveto (Xdraw, YDRAW/2);//Path.lineto (xdraw-a, ydraw-c);//Path.lineto (Xdraw-a-Mlength, ydraw-c);//Path.lineto (0, YDRAW/2);//Path.lineto (A, c); μ//Path.lineto (xdraw-a, c);//Path.close ();//Http://snowcoal.com/article/520.htmlLOGUTILS.D ("--->cuteloadingview initvalue getmeasuredwidth:"+ Xdraw +"Getmeasuredheight:"+ Ydraw +"Image_animtype:"+ Image_animtype);//Canvas.drawpath (path, paint);Paint.setcolor (defaultcolor[0]);Canvas. DrawLine (Xdraw, Ydraw/2, Xdraw-a, ydraw-c, paint); Paint.setcolor (defaultcolor[1]);Canvas. DrawLine (Xdraw-a, Ydraw-c, Xdraw-a-Mlength, ydraw-c, paint); Paint.setcolor (defaultcolor[2]);Canvas. DrawLine (Xdraw-a-Mlength, Ydraw-c,0, Ydraw/2, paint); Paint.setcolor (defaultcolor[3]);Canvas. DrawLine (0, Ydraw/2, A, c, paint); Paint.setcolor (defaultcolor[4]);Canvas. DrawLine (A, C, Xdraw-a, c, paint); Paint.setcolor (defaultcolor[5]);Canvas. DrawLine (Xdraw, Ydraw/2, Xdraw-a, C, paint);//Makeanim (this, image_animtype); animation implementation}

Choose the DrawLine way to draw each side, and then draw a different color to draw a change of color, hexagon left how to calculate on Google Bar, there will be (commented out part is used DrawPath beforehand, but because he cannot beforehand each side of the individual coloring, so also commented out, If you want to use a coloring or can be used DrawPath)

• Animation section

The use of Objectanimator and Animationset of the previous mentioned combination of boxing to achieve, rotation, transparency and other operations, a more detailed demonstration can see http://blog.csdn.net/ddwhan0123/article/details/50470237

To make the animation infinitely repetitive, I set up her animation mode

objectAnimator2.setRepeatCount(ValueAnimator.INFINITE);objectAnimator2.setRepeatMode(ValueAnimator.RESTART);

Finish processing the hexagon control and make a custom layout to wrap up the two parts over.

First, get a series of initialized parameters:

Get the label array TypedArray TypedArray = Context. Obtainstyledattributes(Attrs, R. Styleable. Cuteloadingview);try {image_width = (int) TypedArray. Getdimension(R. Styleable. Cuteloadingview_image_width, -);Image_height = (int) TypedArray. Getdimension(R. Styleable. Cuteloadingview_image_height, -);Text = TypedArray. getString(R. Styleable. Cuteloadingview_image_text);Image_animtype = TypedArray. getString(R. Styleable. Cuteloadingview_image_animtype);} catch (Exception e) {logutils. E("Unable to the parse attributes due to:"+ E. GetMessage());} finally {TypedArray. Recycle();} if (text = = NULL | | text. Length() <1) {text ="Loading in ...";}

Set some default values if they are not passed.
In addition, TextView's text value Shiyi "Space" for the judgment, so the incoming string please like "Wang 亟亟 hello" this way, otherwise there will be an exception

Similar logic can also be found when SetColor, and throws an exception if the color array does not meet the requirements.

After the initialization parameters are obtained, set our outermost layout first

This side uses is LinearLayout, by the way set up the play, otherwise our space all defaults on the left

        //设置水平        this.setOrientation(LinearLayout.VERTICAL);        this.setGravity(Gravity.CENTER);

First create, our hexagon, long for the incoming size, if not passed the default 120

ifnull) {            new CuteLoadingView(context, attrs, Image_AnimType);            cuteLoadingView.setLayoutParams(new LayoutParams(                    image_width, image_height));            this.addView(cuteLoadingView);        }

Then set up our TextView, let him move, set the default font size, set the text content

if (TextView = = null) {//Add TextView component TextView = new TextView (context);Set the content of the component TextView TextView. SetText(text);TextView. Settextsize(textSize);Makejump ();Set the component's height, width textView. Setlayoutparams(New Layoutparams (layoutparams. WRAP_content, Layoutparams. WRAP_content));LinearLayout. LayoutparamsLP = new LinearLayout. Layoutparams(LinearLayout. Layoutparams. WRAP_content, LinearLayout. Layoutparams. WRAP_content);Lp. SetMargins(0, -,0,0);TextView. Setlayoutparams(LP);Add a component to the layout this. AddView(TextView);}

This is done, and then is to write a bit of Java's set code, convenient for everyone to the content, is not so easy

Source Address: Https://github.com/ddwhan0123/CuteLoadingLayoutGit
Weibo: http://weibo.com/u/5298245888 (new product will be sent on Weibo first)

Pass by the star, thank you

When customizing the view, use some of the temperature of the paint canvas to customize the loading control (animation five, "hexagon" rotation jumps)