Android Imitation Win8 interface development

Lin Bingwen Evankaka original works. Reprint please specify the source Http://blog.csdn.net/evankaka

This article will mimic a design of the Win8 interface, a single block. The method is simple. Here, you can change the picture to become the interface you want.

First look at the effect:

1. First look at the custom Myimageview:

Package Com.example.win8test;import Android.annotation.suppresslint;import Android.content.context;import Android.graphics.camera;import Android.graphics.canvas;import Android.graphics.matrix;import Android.graphics.paint;import Android.graphics.paintflagsdrawfilter;import Android.graphics.drawable.bitmapdrawable;import Android.graphics.drawable.drawable;import Android.os.Handler; Import Android.os.message;import Android.util.attributeset;import Android.view.motionevent;import Android.widget.ImageView, @SuppressLint ("Handlerleak") public class Myimageview extends ImageView {public static final int rotate_handler_message_start = 1;public static final int rotate_handler_message_turning = 2;public static final int Ro tate_handler_message_turned = 3;public static final int rotate_handler_message_reverse = 6;public static final int scale_h Andler_message_start = 1;public static final int scale_handler_message_turning = 2;public static final int scale_handler_m essage_turned = 3;public static final int scale_handler_message_reverse = 6;private Boolean Isantialias = true;private Boolean scaleonly = False;private Boole An issizechanged = false;private boolean isshowanimation = true;private int rotatedegree = 10;private Boolean isFirst = tr ue;private float minscale = 0.95f;private int vwidth;private int Vheight;private Boolean isanimationfinish = True, IsActio Nmove = False,isscale = False;private Camera Camera;boolean xbigy = false;float Rolatex = 0;float RolateY = 0;OnViewClick onclick = Null;public Myimageview (context context) {super (context); camera = new camera ();} Public Myimageview (context context, AttributeSet Attrs) {Super (context, attrs); camera = new camera (); public void Setanimationonoff (Boolean oo) {isshowanimation = oo;} public void Setonclickintent (Onviewclick onclick) {this.onclick = onclick;} @SuppressLint ("drawallocation") @Overrideprotected void OnDraw (canvas canvas) {Super.ondraw (canvas), if (IsFirst) { IsFirst = False;init ();} Canvas.setdrawfilter (New PaintflagsdrawfiltER (0, paint.anti_alias_flag| Paint.filter_bitmap_flag));} public void init () {vwidth = GetWidth ()-Getpaddingleft ()-getpaddingright (); vheight = GetHeight ()-getpaddingtop ()-G Etpaddingbottom ();D rawable drawable = getdrawable (); bitmapdrawable BD = (bitmapdrawable) drawable;bd.setantialias (Isantialias);} @Overridepublic boolean ontouchevent (Motionevent event) {super.ontouchevent (event); if (!isshowanimation) return true; Switch (event.getaction () & Motionevent.action_mask) {case MotionEvent.ACTION_DOWN:float X = Event.getx (); float Y = E Vent.gety (); Rolatex = VWIDTH/2-X; Rolatey = VHEIGHT/2-Y; Xbigy = Math.Abs (Rolatex) > Math.Abs (rolatey)? True:false;isscale = x > Vwidth/3 && x < Vwidth * 2/3 && y > vheight/3&& Y < V Height * 2/3;isactionmove = false;if (Isscale) {if (isanimationfinish &&!issizechanged) {issizechanged = True;s Cale_handler.sendemptymessage (Scale_handler_message_start);}} else {if (scaleonly) {Scale_handler.Sendemptymessage (Scale_handler_message_start);} else {rotate_handler.sendemptymessage (Rotate_handler_message_start);}} Break;case MotionEvent.ACTION_MOVE:float x = Event.getx (); Float y = event.gety (); if (x > Vwidth | | y > Vheight | | x < 0 | | Y < 0) {Isactionmove = true;} else {isactionmove = false;} Break;case MotionEvent.ACTION_UP:if (Isscale) {if (issizechanged) scale_handler.sendemptymessage (scale_handler_ Message_reverse);} else {rotate_handler.sendemptymessage (rotate_handler_message_reverse);} break;} return true;} Public interface Onviewclick {public void OnClick (); @SuppressLint ("Handlerleak") private Handler Rotate_handler = new Handler () {private Matrix matrix = new Matrix ();p rivate F Loat count = 0;//Private Boolean clickguolv = false; @Overridepublic void Handlemessage (Message msg) {super.handlemessage ( msg); Matrix.set (Getimagematrix ()); switch (msg.what) {Case rotate_handler_message_start:count = 0;beginrotate (Matrix , (Xbigy count:0), (Xbigy 0:count)); Rotate_handleR.sendemptymessage (rotate_handler_message_turning); Break;case rotate_handler_message_turning:beginrotate (Matrix , (Xbigy count:0), (Xbigy 0:count)), Count++;if (Count < Getdegree ()) {Rotate_handler.sendemptymessage (rotate_ha ndler_message_turning);} else {isanimationfinish = true;} Break;case rotate_handler_message_turned:beginrotate (Matrix, (Xbigy count:0), (Xbigy 0:count)); if (Count > 0) { Rotate_handler.sendemptymessage (rotate_handler_message_turned);} else {isanimationfinish = true;if (!isactionmove && onclick! = null) {Onclick.onclick ();}} Count--;count--;break;case Rotate_handler_message_reverse:count = Getdegree () beginrotate (Matrix, XbigY count:0), (Xbigy 0:count)); Rotate_handler.sendemptymessage (rotate_handler_message_turned); break;}}; Private synchronized void beginrotate (Matrix matrix, float rotatex,float rotatey) {//Bitmap BM = Getimagebitmap (); int SCA LeX = (int) (vwidth * 0.5f); int scaleY = (int) (vheight * 0.5f); Camera.save (); camera.rotatEX (Rolatey > 0 rotatey:-rotatey) Camera.rotatey (Rolatex < 0 Rotatex:-rotatex); Camera.getmatrix (matrix); Camer A.restore ();//control center point if (Rolatex > 0 && Rotatex! = 0) {matrix.pretranslate (-vwidth,-scaley); Matrix.posttranslate (Vwidth, ScaleY);} else if (Rolatey > 0 && Rotatey! = 0) {matrix.pretranslate (-scalex,-vheight); Matrix.posttranslate (ScaleX, VHe ight);} else if (Rolatex < 0 && Rotatex! = 0) {matrix.pretranslate ( -0,-scaley); matrix.posttranslate (0, ScaleY);} else if (Rolatey < 0 && Rotatey! = 0) {matrix.pretranslate (-scalex, -0); Matrix.posttranslate (ScaleX, 0);} Setimagematrix (matrix);} Private Handler Scale_handler = new Handler () {private Matrix Matrix = new Matrix ();p rivate float S;int count = 0; @Overrid epublic void Handlemessage (Message msg) {super.handlemessage (msg); Matrix.set (Getimagematrix ()); switch (msg.what) { Case Scale_handler_message_start:if (!isanimationfinish) {return;} else {isanimationfinish = False;issizechanged = True;count = 0;s = (float) math.sqrt (math.sqrt (Minscale)); Beginscale (Matrix, s); Scale_handler.sendemptymessage (Scale _handler_message_turning);} Break;case Scale_handler_message_turning:beginscale (Matrix, s); if (Count < 4) {Scale_handler.sendemptymessage ( scale_handler_message_turning);} else {isanimationfinish = true;if (!issizechanged &&!isactionmove && onclick! = null) {Onclick.onclick () ;}} Count++;break;case Scale_handler_message_reverse:if (!isanimationfinish) {scale_handler.sendemptymessage (Scale_ Handler_message_reverse);} else {isanimationfinish = False;count = 0;s = (float) math.sqrt (math.sqrt (1.0f/minscale)); Beginscale (Matrix, s); Scale_h Andler.sendemptymessage (scale_handler_message_turning); issizechanged = false;} break;}}; Private synchronized void Beginscale (matrix matrix, float scale) {int scaleX = (int) (vwidth * 0.5f); int scaleY = (int) (V Height * 0.5f); Matrix.postscale (scale, scale, ScaleX, ScaleY); Setimagematrix (matrix);} public int Getdegree () {returnRotatedegree;} public void Setdegree (int degree) {rotatedegree = degree;} public float Getscale () {return minscale;} public void Setscale (float scale) {Minscale = scale;}}

2, down, to see the layout

<linearlayout 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:backg Round= "@drawable/d" android:orientation= "vertical" tools:context= ". Mainactivity "> <linearlayout android:layout_width=" wrap_content "android:layout_height=" Wrap_conte NT "android:orientation=" horizontal "> <com.example.win8test.myimageview android:id=" @+id/M YImageView01 "android:layout_width=" 108DP "android:layout_height=" 108DP "android:layout_m Argin= "16DP" android:scaletype= "Matrix" android:src= "@drawable/fen"/> <com.example.win 8test. Myimageview android:id= "@+id/myimageview02" android:layout_width= "108DP" Android:layout_h eight= "108DP" android:layout_margin= "16DP" android:scaletype= "Matrix"Android:src=" @drawable/fen "/> </LinearLayout> <linearlayout android:layout_width=" W Rap_content "android:layout_height=" wrap_content "android:orientation=" Horizontal "> <com.examp Le.win8test.MyImageView android:id= "@+id/myimageview03" android:layout_width= "108DP" Android oid:layout_height= "108DP" android:layout_margin= "16DP" android:scaletype= "Matrix" Android            : src= "@drawable/fen"/> <com.example.win8test.myimageview android:id= "@+id/myimageview04"            Android:layout_width= "108DP" android:layout_height= "108DP" android:layout_margin= "16DP"        Android:scaletype= "Matrix" android:src= "@drawable/fen"/> </LinearLayout> <linearlayout Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:orientation= "Horizontal "> <com.exAmple.win8test.MyImageView android:id= "@+id/myimageview05" android:layout_width= "108DP" a ndroid:layout_height= "108DP" android:layout_margin= "16DP" android:scaletype= "Matrix" Android            oid:src= "@drawable/fen"/> <com.example.win8test.myimageview android:id= "@+id/myimageview06"            Android:layout_width= "108DP" android:layout_height= "108DP" android:layout_margin= "16DP"  Android:scaletype= "Matrix" android:src= "@drawable/fen"/> </LinearLayout></LinearLayout>

3, the above Picture button usage, here only to one Picture button added the event:

Myimageview image_3d_1 = (myimageview) Findviewbyid (R.ID.MYIMAGEVIEW01);        

4. Effect

The finger presses in the middle is shrinks, the finger presses on the edge to have the angle to scroll

When the finger is pressed, the image that is pressed is smaller, and the finger keeps moving while the other picture buttons do not respond

Android Imitation Win8 interface development