Custom view of the Big Windmill Series Demo (i)

Every time I write a blog most hate to write the beginning of the blog, do not know what to write, now also, feel and write 800-word composition. The reason why this series of demo is because the day before yesterday to see a picture of the online circle of the source code when

Whim want to do a trick yourself, by the way to learn the relevant knowledge of the view! Say dry, of course, when you write your own reference to write other people get code, after all, the custom view and my level is indeed challenging, through the completion of some of these columns of the small demo really harvest a lot, although there are a little in my opinion more powerful features can not be achieved, but their purpose is also calculated to achieve. First of all, talk about the wind car series of small demo general Overview: A total of five versions, which also means that the series will write four to five short small blogs, each version of the previous version of the changes or improvements in functionality. Special Note: This is a very small demo, but for beginners can really learn something, so to share, if there is a great God to see these low level of the blog hope to leave their own knowledge of Android a little evaluation or criticism. In short, welcome criticism correct, gossip, enter the theme:

The Wind Car version 1.0) realizes the functions and cares as follows:

1) The windmill picture rotates with the rotation of the finger and the speed of rotation is fixed

2) The rotation of the picture must have been designed to the Androidview process, so postinvalidate and invalidate two methods prepared.

3) Since the picture rotates with the movement of the finger, it will certainly be ontouchevent to the Motionevent.action_move event and then processed

4) The required windmill picture material is as follows:

5) The picture of the windmill is the same as a square picture, which needs to be calculated as the center of the founder's line, which rotates the axis of rotation.

The view code that is defined by the five above shows the following:

Package Rotation.demo.view;import Android.content.context;import Android.graphics.bitmap;import Android.graphics.canvas;import Android.graphics.matrix;import Android.graphics.paint;import Android.util.attributeset;import android.util.log;import Android.view.motionevent;import android.view.View;/** * Verson 1.0 * Rotation of the windmill with the finger rotation * rotating ideas * 1) The windmill rotates involving the redrawing process of the picture * 2) The move event of the monitor finger, when the move event is heard, call the relevant method to redraw * 3) Use matrix transformation to realize the rotation of the windmill * @autho R Xiaobenxiong * */public class Rotationview extends view{/** to rotate picture **/private Bitmap bitmap;/** windmill per rotational radian **/private int ra D = width of the 30;/** picture: Here is a square picture, so the width and height are the same **/private int width = 0;/*** the height of the picture: here is a square picture, so the width and height are the same **/private int Height = 0;/** defines a brush **/private paint paint = new paint ();p ublic Rotationview (context context, AttributeSet Attrs) {super (C Ontext, attrs);} Public Rotationview (context context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);} Public Rotationview (Context context) {super (context);} /** * Get picture width and height */public void initsIze () {width = Bitmap.getwidth ();  Height = bitmap.getheight (); Postinvalidate ();}        public void SetBitmap (Bitmap Bitmap) {this.bitmap = Bitmap;} The width and height of a picture to set the width and height of the custom view, due to the square width and height is the same @overrideprotected void onmeasure (int widthmeasurespec, int heightmeasurespec) {//TODO auto-generated method Stubsuper.onmeasure (Widthmeasurespec, Heightmeasurespec); Setmeasureddimension (width,          width);} /*** * Implement the OnDraw method to draw the windmill picture, and draw out the rotating effect of the windmill, through the matrix to control the */  @Override protected void OnDraw (        Canvas canvas) {Matrix matrix = new Matrix ();        Set the hinge position matrix.settranslate ((float) width/2, (float) HEIGHT/2);        rad-=3;//The Radian increment for each rotation is 3 of course, the larger the number, the faster//start to turn matrix.prerotate (RAD);                Shaft Reduction matrix.pretranslate (-(float) WIDTH/2,-(float) HEIGHT/2);                Draw Windmill Pictures Canvas.drawbitmap (BitMap, matrix,paint);    Super.ondraw (canvas); } @Overridepublic Boolean ontouchevent (Motionevent event) {int Action = event.getaction (); switch (action) {case motionevent.action_move://continues to redraw as the finger moves, allowing the windmill to rotate.  postinvalidate ();//call method to redraw break;}  return true;} }

The above code is very simple, mainly to capture the Motionevent.action_move event, and call the Postinvalidate method to achieve redrawing, in the OnDraw method through Martix changes to achieve the rotation of the windmill. Here to note:

1) Ontouchevent to return True otherwise will not perform the program you write in this method, specific reasons see the Android event interception mechanism

Inside the configuration file, use the following:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent "    android:background= "#ffffffff"    >    <rotation.demo.view.rotationview         android:id= "@+id/ Rotationview "        android:layout_height=" wrap_content "        android:layout_width=" Wrap_content "        android: Layout_centerinparent= "true" >    </rotation.demo.view.rotationview ></RelativeLayout>

public class Mainactivity extends Activity {    @Overrideprotected void onCreate (Bundle savedinstancestate) { Super.oncreate (savedinstancestate); Setcontentview (R.layout.activity_main); Rotationview rotation = (rotationview) Findviewbyid (R.id.rotationview); Bitmapdrawable drawable = (bitmapdrawable) getresources (). getdrawable (R.drawable.fengche); Rotation.setBitMap ( Drawable.getbitmap ()); Rotation.initsize ();}}

After running, there is a problem: whether the finger is clockwise or counterclockwise, the direction of the windmill movement is always counterclockwise, after testing that when three of the matrix.prerotate gradually become larger

is clockwise rotation, if the primary key becomes small is counterclockwise, so I simply added a two button to choose whether it is counterclockwise clockwise, when counterclockwise to let the RAD variable decrement, clockwise increment is OK. For this reason, the Boolean variable of clockwise is added to the Rotationview, and the value of clockwise is changed by clicking on the two-button variable. As follows:

The code changes for the OnDraw method are as follows:

Private Boolean clockwise = false; @Overrideprotected void OnDraw (canvas canvas) {Matrix matrix = new Matrix ();//Set Hinge position mat Rix.settranslate (float) width/2, (float) HEIGHT/2); if (clockwise) {//If it is clockwise rad+= 30;} else {rad-= 30;} Start matrix.prerotate (degree);//Pivot Restore Matrix.pretranslate (-(float) WIDTH/2,-(float) HEIGHT/2);//Send location to the center of view//Matr Ix.posttranslate ((float) (width)/2, (float) (height)/2), Canvas.drawbitmap (BitMap, Matrix, paint); Super.ondraw ( Canvas);}

After a simple modification, version 2 was born, of course, version 2.0 has some problems, left for version 3 to solve, see the custom view of the Big Windmill Series Demo (2)

Custom view of the Big Windmill Series Demo (i)